Skip to content

Accessibility added for few pages #3066

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 10 commits into
base: console
Choose a base branch
from
Open

Accessibility added for few pages #3066

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
2f3de4a
Accessibility added for few pages
piyushraj-egov Aug 29, 2025
50f8095
Merge branch 'console' into console-accessibility
piyushraj-egov Aug 29, 2025
3b05dec
reverted back to react-components for setupcampaign
piyushraj-egov Aug 29, 2025
61b89f6
Merge branch 'console' into console-accessibility
piyushraj-egov Aug 29, 2025
12f9cef
Merge branch 'console' into console-accessibility
jagankumar-egov Aug 29, 2025
e9146e2
Merge branch 'console' into console-accessibility
piyushraj-egov Sep 2, 2025
718c28e
Merge branch 'console' into console-accessibility
piyushraj-egov Sep 5, 2025
4ab90c3
Accessibility added for few pages
piyushraj-egov Aug 29, 2025
6dd713a
reverted back to react-components for setupcampaign
piyushraj-egov Aug 29, 2025
2ce5748
Merge branch 'console-accessibility' of https://github.com/egovernmen…
piyushraj-egov Sep 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 14 additions & 9 deletions health/micro-ui/web/micro-ui-internals/example/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,12 +40,12 @@ module.exports = {
},
output: {
filename: "[name].[contenthash:8].bundle.js",
chunkFilename: "[name].[contenthash:8].chunk.js",
path: path.resolve(__dirname, "build"),
clean: true, // Clean the output directory before emit
chunkFilename: "[name].[contenthash:8].chunk.js",
path: path.resolve(__dirname, "build"),
clean: true, // Clean the output directory before emit
publicPath: "/workbench-ui/",
},
optimization: {
optimization: {
splitChunks: {
chunks: "all",
minSize: 20000,
Expand Down Expand Up @@ -102,7 +102,7 @@ module.exports = {
new HtmlWebpackPlugin({
inject: true,
template: "public/index.html",
templateParameters:isProduction?{}: {
templateParameters: isProduction ? {} : {
REACT_APP_GLOBAL: envFile.REACT_APP_GLOBAL, // <-- Inject env into HTML
},
}),
Expand All @@ -111,7 +111,7 @@ module.exports = {
modules: [path.resolve(__dirname, "src"), "node_modules"],
extensions: [".js", ".jsx", ".ts", ".tsx"],
preferRelative: true,
alias: {
alias: {
// Fix case sensitivity issues with React
"React": path.resolve(__dirname, "../node_modules/react"),
"react": path.resolve(__dirname, "../node_modules/react"),
Expand All @@ -123,12 +123,17 @@ module.exports = {
},
},
devServer: {
static: path.join(__dirname, "dist"),
static: path.join(__dirname, "build"),
compress: true,
port: 3000,
hot: true,
historyApiFallback: true,
watchFiles:isProduction?undefined: {
historyApiFallback: {
index: '/workbench-ui/index.html',
rewrites: [
{ from: /^\/workbench-ui/, to: '/workbench-ui/index.html' }
]
},
watchFiles: isProduction ? undefined : {
paths: ["**/*"], // watch all project files
Comment on lines +126 to 137
Copy link
Contributor

@coderabbitai coderabbitai bot Aug 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

SPA routing base path: add dot-rule exception

Deep links containing dots (e.g., /workbench-ui/some.route) may 404. Add disableDotRule: true for robust fallbacks.

-    historyApiFallback: {
+    historyApiFallback: {
+      disableDotRule: true,
       index: '/workbench-ui/index.html',
       rewrites: [
         { from: /^\/workbench-ui/, to: '/workbench-ui/index.html' }
       ]
     },
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
static: path.join(__dirname, "build"),
compress: true,
port: 3000,
hot: true,
historyApiFallback: true,
watchFiles:isProduction?undefined: {
historyApiFallback: {
index: '/workbench-ui/index.html',
rewrites: [
{ from: /^\/workbench-ui/, to: '/workbench-ui/index.html' }
]
},
watchFiles: isProduction ? undefined : {
paths: ["**/*"], // watch all project files
static: path.join(__dirname, "build"),
compress: true,
port: 3000,
hot: true,
historyApiFallback: {
disableDotRule: true,
index: '/workbench-ui/index.html',
rewrites: [
{ from: /^\/workbench-ui/, to: '/workbench-ui/index.html' }
]
},
watchFiles: isProduction ? undefined : {
paths: ["**/*"], // watch all project files
🤖 Prompt for AI Agents 
In health/micro-ui/web/micro-ui-internals/example/webpack.config.js around lines
126 to 137 the historyApiFallback config can 404 on deep links containing dots
(e.g., /workbench-ui/some.route); add disableDotRule: true to the
historyApiFallback object so the fallback will match paths with dots, keeping
the existing index and rewrites intact.

options: {
ignored: path.resolve(__dirname, "node_modules"), // skip same-level node_modules
Expand Down
2 changes: 1 addition & 1 deletion health/micro-ui/web/micro-ui-internals/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
"start:script": "./scripts/create.sh",
"build": "run-s build:**",
"build:css": "cd packages/css && yarn build",
"build:prod": "NODE_ENV=production yarn build:campaign",
"buildd:prod": "NODE_ENV=production yarn build:campaign",
"build:campaign": "cd packages/modules/campaign-manager && yarn build",
"dev:example": "cd example && yarn start",
"dev:css": "cd packages/css && yarn start",
Expand Down
2 changes: 1 addition & 1 deletion health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
"example": "cd example && npm run start",
"start": "webpack serve --mode=development --config webpack.config.js",
"start:prod": "NODE_ENV=production webpack serve --config webpack.config.js",
"build": "NODE_ENV=production webpack --config webpack.config.js",
"build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
"build:dev": "NODE_ENV=development webpack --config webpack.config.js",
"build:analyze": "NODE_ENV=production webpack --config webpack.config.js --analyze",
"publish:components": "npm publish --tag console-v0.5"
Expand Down
5 changes: 5 additions & 0 deletions ...ls/packages/modules/campaign-manager/src/pages/employee/NewCampaignCreate/CampaignHome.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,11 @@ const CampaignHome = () => {
<p className="name-description">{t(`HCM_CREATE_CAMPAIGN_DESCRIPTION`)}</p>
<div className={"containerStyle"}>
<div
tabIndex={0}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
setShowPopUp(true);
}}}
className={"cardStyle"}
Comment on lines +140 to 145
Copy link
Contributor

@coderabbitai coderabbitai bot Aug 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

⚠️ Potential issue

Fix extra brace and make the card fully accessible

  • There's a syntax error: an extra closing brace in onKeyDown (results in "}}}" instead of "}}").
  • For a11y, add role="button" (or switch to a ) and prevent default on Space to avoid page scroll. This also satisfies the linter warning about non-interactive elements with tabIndex.

Apply:

-        <div
-          tabIndex={0}
-          onKeyDown={(e) => {
-            if (e.key === "Enter" || e.key === " ") {
-              setShowPopUp(true);
-            }}}
-          className={"cardStyle"}
-          onClick={() => {
-            setShowPopUp(true);
-          }}
-        >
+        <div
+          role="button"
+          tabIndex={0}
+          className={"cardStyle"}
+          onClick={() => setShowPopUp(true)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              setShowPopUp(true);
+            }
+          }}
+          aria-label={t("HCM_CREATE_NEW_CAMPAIGN")}
+        >
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
tabIndex={0}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
setShowPopUp(true);
}}}
className={"cardStyle"}
<div
role="button"
tabIndex={0}
className={"cardStyle"}
onClick={() => setShowPopUp(true)}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
setShowPopUp(true);
}
}}
aria-label={t("HCM_CREATE_NEW_CAMPAIGN")}
>
🧰 Tools
🪛 Biome (2.1.2)

[error] 140-140: The HTML element div is non-interactive. Do not use tabIndex.

Adding non-interactive elements to the keyboard navigation flow can confuse users.
Unsafe fix: Remove the tabIndex attribute.

(lint/a11y/noNoninteractiveTabindex)

🤖 Prompt for AI Agents 
In
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/NewCampaignCreate/CampaignHome.js
around lines 140 to 145, fix the extra closing brace in the onKeyDown handler
and make the card accessible by adding role="button" (or changing the element to
a <button>); update the onKeyDown so it handles Enter and Space, calling
e.preventDefault() for the Space key to avoid page scroll and then
setShowPopUp(true), and ensure the element still has tabIndex={0} and an onClick
handler for mouse activation.

onClick={() => {
setShowPopUp(true);
Expand Down