From 94da5a9a22cbd2707712ac1b134c890251a4204e Mon Sep 17 00:00:00 2001 From: srikant Date: Thu, 9 Jan 2025 21:18:12 +0530 Subject: [PATCH 01/12] #2294 Fix Accessibility Violations - 2 Signed-off-by: srikant --- .../common-canvas/assets/images/notification_counter_icon.svg | 2 +- canvas_modules/common-canvas/src/icons/icon.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/canvas_modules/common-canvas/assets/images/notification_counter_icon.svg b/canvas_modules/common-canvas/assets/images/notification_counter_icon.svg index a250f462bc..469e09bf64 100644 --- a/canvas_modules/common-canvas/assets/images/notification_counter_icon.svg +++ b/canvas_modules/common-canvas/assets/images/notification_counter_icon.svg @@ -1,3 +1,3 @@ - + diff --git a/canvas_modules/common-canvas/src/icons/icon.jsx b/canvas_modules/common-canvas/src/icons/icon.jsx index 26c0b20e58..83ee080589 100644 --- a/canvas_modules/common-canvas/src/icons/icon.jsx +++ b/canvas_modules/common-canvas/src/icons/icon.jsx @@ -124,7 +124,7 @@ export default class Icon extends React.Component { icon = this.getCanvasIcon(this.props.type); if (typeof icon !== "undefined") { const className = classNames("canvas-icon", iconClassName, this.props.className); - icon = ; + icon = ; } else { icon =
; } From 636f9cd2e451e40306752038401c5cab4ad2b7d6 Mon Sep 17 00:00:00 2001 From: srikant Date: Fri, 10 Jan 2025 11:56:33 +0530 Subject: [PATCH 02/12] Replace SVG with carbon icons Signed-off-by: srikant --- .../assets/images/notification_counter_icon.svg | 2 +- .../src/toolbar/toolbar-button-item.jsx | 13 ++++--------- 2 files changed, 5 insertions(+), 10 deletions(-) diff --git a/canvas_modules/common-canvas/assets/images/notification_counter_icon.svg b/canvas_modules/common-canvas/assets/images/notification_counter_icon.svg index 469e09bf64..a250f462bc 100644 --- a/canvas_modules/common-canvas/assets/images/notification_counter_icon.svg +++ b/canvas_modules/common-canvas/assets/images/notification_counter_icon.svg @@ -1,3 +1,3 @@ - + diff --git a/canvas_modules/common-canvas/src/toolbar/toolbar-button-item.jsx b/canvas_modules/common-canvas/src/toolbar/toolbar-button-item.jsx index e13b580ee5..e219411314 100644 --- a/canvas_modules/common-canvas/src/toolbar/toolbar-button-item.jsx +++ b/canvas_modules/common-canvas/src/toolbar/toolbar-button-item.jsx @@ -18,9 +18,6 @@ import React from "react"; import PropTypes from "prop-types"; import Tooltip from "../tooltip/tooltip.jsx"; -import ArrangeHorizontally from "./../../assets/images/arrange_horizontally.svg"; -import ArrangeVertically from "./../../assets/images/arrange_vertically.svg"; -import ToggleNotificationPanel from "./../../assets/images/notification_counter_icon.svg"; import { Button } from "@carbon/react"; import SVG from "react-inlinesvg"; @@ -29,7 +26,7 @@ import { StopFilledAlt, Play, Undo, Redo, Chat, ChatOff, Result, Cut, Copy, Paste, Edit, ColorPalette, Maximize, Minimize, Launch, AddComment, TrashCan, ZoomIn, ZoomOut, Checkmark, ChevronRight, ChevronDown, ChevronUp, - CenterToFit, OpenPanelFilledLeft } from "@carbon/react/icons"; + CenterToFit, OpenPanelFilledLeft, ArrangeVertical, ArrangeHorizontal, NotificationCounter } from "@carbon/react/icons"; import { TOOLBAR_STOP, TOOLBAR_RUN, TOOLBAR_UNDO, TOOLBAR_REDO, TOOLBAR_CUT, TOOLBAR_COPY, TOOLBAR_PASTE, TOOLBAR_CLIPBOARD, TOOLBAR_CREATE_COMMENT, TOOLBAR_CREATE_AUTO_COMMENT, @@ -123,14 +120,12 @@ class ToolbarButtonItem extends React.Component { return ; case (TOOLBAR_TOGGLE_PALETTE): return ; - - // Non-carbon icons case (TOOLBAR_ARRANGE_HORIZONALLY): - return ; + return ; case (TOOLBAR_ARRANGE_VERTICALLY): - return ; + return ; case (TOOLBAR_TOGGLE_NOTIFICATION_PANEL): - return ; + return ; default: return null; From 1e8bd88226f841f001a73a1563dbc396b0dd6ca4 Mon Sep 17 00:00:00 2001 From: srikant Date: Mon, 13 Jan 2025 19:16:32 +0530 Subject: [PATCH 03/12] Detle Arrange Horizontal and Vertical svgs Signed-off-by: srikant --- .../common-canvas/assets/images/arrange_horizontally.svg | 1 - .../common-canvas/assets/images/arrange_vertically.svg | 1 - 2 files changed, 2 deletions(-) delete mode 100644 canvas_modules/common-canvas/assets/images/arrange_horizontally.svg delete mode 100644 canvas_modules/common-canvas/assets/images/arrange_vertically.svg diff --git a/canvas_modules/common-canvas/assets/images/arrange_horizontally.svg b/canvas_modules/common-canvas/assets/images/arrange_horizontally.svg deleted file mode 100644 index 1ef38b7eca..0000000000 --- a/canvas_modules/common-canvas/assets/images/arrange_horizontally.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/canvas_modules/common-canvas/assets/images/arrange_vertically.svg b/canvas_modules/common-canvas/assets/images/arrange_vertically.svg deleted file mode 100644 index ac1b5228fd..0000000000 --- a/canvas_modules/common-canvas/assets/images/arrange_vertically.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file From cc9cb0f4f7e8b0b42931c3271422462f0bb27269 Mon Sep 17 00:00:00 2001 From: srikant Date: Mon, 13 Jan 2025 21:09:16 +0530 Subject: [PATCH 04/12] Delete Notification SVG Signed-off-by: srikant --- .../common-canvas/assets/images/notification_counter_icon.svg | 3 --- 1 file changed, 3 deletions(-) delete mode 100644 canvas_modules/common-canvas/assets/images/notification_counter_icon.svg diff --git a/canvas_modules/common-canvas/assets/images/notification_counter_icon.svg b/canvas_modules/common-canvas/assets/images/notification_counter_icon.svg deleted file mode 100644 index a250f462bc..0000000000 --- a/canvas_modules/common-canvas/assets/images/notification_counter_icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - From 9f07d581033ee23348916128790792afd121a461 Mon Sep 17 00:00:00 2001 From: srikant Date: Wed, 15 Jan 2025 19:51:21 +0530 Subject: [PATCH 05/12] Resolve Accessibility Violation for Keyboard Navigation Div by including role and aria-label Signed-off-by: srikant --- canvas_modules/common-canvas/src/common-canvas/cc-contents.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/canvas_modules/common-canvas/src/common-canvas/cc-contents.jsx b/canvas_modules/common-canvas/src/common-canvas/cc-contents.jsx index 8dc0953913..739e1ab446 100644 --- a/canvas_modules/common-canvas/src/common-canvas/cc-contents.jsx +++ b/canvas_modules/common-canvas/src/common-canvas/cc-contents.jsx @@ -479,6 +479,7 @@ class CanvasContents extends React.Component { onMouseDown={this.onMouseDown} onMouseLeave={this.onMouseLeave} onBlur={this.onBlur} onKeyDown={this.onKeyDown} onKeyUp={this.onKeyUp} + role="application" aria-label="canvas-keyboard-navigation" // Resolve Accessibility Violation of role and label /> ); } From fab593edf24180cf3d6340ccdb46a38ab3405043 Mon Sep 17 00:00:00 2001 From: srikant Date: Wed, 15 Jan 2025 19:57:04 +0530 Subject: [PATCH 06/12] Add back Notification Icon in toolbar Signed-off-by: srikant --- .../common-canvas/assets/images/notification_counter_icon.svg | 3 +++ .../common-canvas/src/toolbar/toolbar-button-item.jsx | 3 ++- 2 files changed, 5 insertions(+), 1 deletion(-) create mode 100644 canvas_modules/common-canvas/assets/images/notification_counter_icon.svg diff --git a/canvas_modules/common-canvas/assets/images/notification_counter_icon.svg b/canvas_modules/common-canvas/assets/images/notification_counter_icon.svg new file mode 100644 index 0000000000..b45a724677 --- /dev/null +++ b/canvas_modules/common-canvas/assets/images/notification_counter_icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/canvas_modules/common-canvas/src/toolbar/toolbar-button-item.jsx b/canvas_modules/common-canvas/src/toolbar/toolbar-button-item.jsx index e219411314..974a54d156 100644 --- a/canvas_modules/common-canvas/src/toolbar/toolbar-button-item.jsx +++ b/canvas_modules/common-canvas/src/toolbar/toolbar-button-item.jsx @@ -18,6 +18,7 @@ import React from "react"; import PropTypes from "prop-types"; import Tooltip from "../tooltip/tooltip.jsx"; +import ToggleNotificationPanel from "./../../assets/images/notification_counter_icon.svg"; import { Button } from "@carbon/react"; import SVG from "react-inlinesvg"; @@ -125,7 +126,7 @@ class ToolbarButtonItem extends React.Component { case (TOOLBAR_ARRANGE_VERTICALLY): return ; case (TOOLBAR_TOGGLE_NOTIFICATION_PANEL): - return ; + return ; default: return null; From 3ba9fa349194f5728fee85529583209d020f4204 Mon Sep 17 00:00:00 2001 From: srikant Date: Wed, 15 Jan 2025 20:14:19 +0530 Subject: [PATCH 07/12] Fix build issue Signed-off-by: srikant --- .../common-canvas/src/toolbar/toolbar-button-item.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/canvas_modules/common-canvas/src/toolbar/toolbar-button-item.jsx b/canvas_modules/common-canvas/src/toolbar/toolbar-button-item.jsx index 974a54d156..c9b19a8dec 100644 --- a/canvas_modules/common-canvas/src/toolbar/toolbar-button-item.jsx +++ b/canvas_modules/common-canvas/src/toolbar/toolbar-button-item.jsx @@ -27,7 +27,7 @@ import { StopFilledAlt, Play, Undo, Redo, Chat, ChatOff, Result, Cut, Copy, Paste, Edit, ColorPalette, Maximize, Minimize, Launch, AddComment, TrashCan, ZoomIn, ZoomOut, Checkmark, ChevronRight, ChevronDown, ChevronUp, - CenterToFit, OpenPanelFilledLeft, ArrangeVertical, ArrangeHorizontal, NotificationCounter } from "@carbon/react/icons"; + CenterToFit, OpenPanelFilledLeft, ArrangeVertical, ArrangeHorizontal } from "@carbon/react/icons"; import { TOOLBAR_STOP, TOOLBAR_RUN, TOOLBAR_UNDO, TOOLBAR_REDO, TOOLBAR_CUT, TOOLBAR_COPY, TOOLBAR_PASTE, TOOLBAR_CLIPBOARD, TOOLBAR_CREATE_COMMENT, TOOLBAR_CREATE_AUTO_COMMENT, From d2b3ba1c0c450afddd15c9e325416cf346625c89 Mon Sep 17 00:00:00 2001 From: srikant Date: Thu, 16 Jan 2025 16:42:13 +0530 Subject: [PATCH 08/12] #2294 Fix Accessibility Violations - 2 Signed-off-by: srikant --- .../src/common-properties/controls/radioset/radioset.jsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/canvas_modules/common-canvas/src/common-properties/controls/radioset/radioset.jsx b/canvas_modules/common-canvas/src/common-properties/controls/radioset/radioset.jsx index 053793cb87..57b2f7af10 100644 --- a/canvas_modules/common-canvas/src/common-properties/controls/radioset/radioset.jsx +++ b/canvas_modules/common-canvas/src/common-properties/controls/radioset/radioset.jsx @@ -234,6 +234,8 @@ class RadiosetControl extends React.Component { orientation={this.props.control.orientation} helperText={this.props.control.helperText} readOnly={this.props.readOnly} + // Provide unique aria-label for each radio button group + aria-label={`Radio Button Group (${ControlUtils.getDataId(this.props.control, this.props.propertyId)})`} > {buttons} From fc8fc7c9fc85acc7cfc660ca136bb15ad3864c24 Mon Sep 17 00:00:00 2001 From: srikant Date: Tue, 21 Jan 2025 16:41:35 +0530 Subject: [PATCH 09/12] fix cutsom button violation in properties table Signed-off-by: srikant --- .../common-canvas/locales/common-properties/locales/en.json | 1 + .../components/table-buttons/table-buttons.jsx | 2 ++ .../src/common-properties/constants/constants.js | 1 + .../src/common-properties/controls/abstract-table.jsx | 6 ++++++ 4 files changed, 10 insertions(+) diff --git a/canvas_modules/common-canvas/locales/common-properties/locales/en.json b/canvas_modules/common-canvas/locales/common-properties/locales/en.json index 644fe60889..3ddb351219 100644 --- a/canvas_modules/common-canvas/locales/common-properties/locales/en.json +++ b/canvas_modules/common-canvas/locales/common-properties/locales/en.json @@ -95,6 +95,7 @@ "table.toolbar.button.delete": "Delete", "table.toolbar.button.edit": "Edit", "table.toolbar.button.cancel": "Cancel", + "table.toolbar.overflow.label": "Table Toolbar Overflow", "list.table.label": "Values", "dropdown.tooltip.openMenu": "Open menu", "dropdown.tooltip.closeMenu": "Close menu", diff --git a/canvas_modules/common-canvas/src/common-properties/components/table-buttons/table-buttons.jsx b/canvas_modules/common-canvas/src/common-properties/components/table-buttons/table-buttons.jsx index 3b1a8ac1c8..09a4a4d0f7 100644 --- a/canvas_modules/common-canvas/src/common-properties/components/table-buttons/table-buttons.jsx +++ b/canvas_modules/common-canvas/src/common-properties/components/table-buttons/table-buttons.jsx @@ -113,6 +113,7 @@ class TableButtons extends React.Component { instanceId={0} size="sm" toolbarActionHandler={this.customButtonOnClick} + additionalText={{ overflowMenuLabel: this.props.toolbarOverflowLabel }} />
); } @@ -123,6 +124,7 @@ TableButtons.propTypes = { propertyId: PropTypes.object.isRequired, customButtons: PropTypes.array.isRequired, tableState: PropTypes.string, + toolbarOverflowLabel: PropTypes.string, customButtonsState: PropTypes.object // set in by redux }; diff --git a/canvas_modules/common-canvas/src/common-properties/constants/constants.js b/canvas_modules/common-canvas/src/common-properties/constants/constants.js index 45305b6cbc..2e8c5b4155 100644 --- a/canvas_modules/common-canvas/src/common-properties/constants/constants.js +++ b/canvas_modules/common-canvas/src/common-properties/constants/constants.js @@ -127,6 +127,7 @@ export const MESSAGE_KEYS = { TABLE_TOOLBAR_BUTTON_DELETE: "table.toolbar.button.delete", TABLE_TOOLBAR_BUTTON_EDIT: "table.toolbar.button.edit", TABLE_TOOLBAR_BUTTON_CANCEL: "table.toolbar.button.cancel", + TABLE_TOOLBAR_OVERFLOW_LABEL: "table.toolbar.overflow.label", TABLE_DELETEICON_TOOLTIP: "table.deleteIcon.tooltip" }; diff --git a/canvas_modules/common-canvas/src/common-properties/controls/abstract-table.jsx b/canvas_modules/common-canvas/src/common-properties/controls/abstract-table.jsx index 60fc619ea5..249e79e618 100644 --- a/canvas_modules/common-canvas/src/common-properties/controls/abstract-table.jsx +++ b/canvas_modules/common-canvas/src/common-properties/controls/abstract-table.jsx @@ -143,6 +143,11 @@ export default class AbstractTable extends React.Component { return row; } + // Returns the label for the overflow menu in the table toolbar + getTableToolbarOverflowLabel() { + return PropertyUtils.formatMessage(this.props.controller.getReactIntl(), MESSAGE_KEYS.TABLE_TOOLBAR_OVERFLOW_LABEL); + } + setScrollToRow(row) { this.scrollToRow = row; } @@ -534,6 +539,7 @@ export default class AbstractTable extends React.Component { tableState={tableState} customButtons={customButtons} customButtonsState={this.props.tableButtons} + toolbarOverflowLabel={this.getTableToolbarOverflowLabel()} /> ); } From 5f68bc821eb77c96aa04a5e52472e6709b3a24d4 Mon Sep 17 00:00:00 2001 From: srikant Date: Tue, 21 Jan 2025 17:47:59 +0530 Subject: [PATCH 10/12] Include translation for Radio Btn Group Aria Label Signed-off-by: srikant --- .../locales/common-properties/locales/en.json | 1 + .../src/common-properties/constants/constants.js | 1 + .../src/common-properties/controls/radioset/radioset.jsx | 7 +++++-- 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/canvas_modules/common-canvas/locales/common-properties/locales/en.json b/canvas_modules/common-canvas/locales/common-properties/locales/en.json index 3ddb351219..89265ac2ff 100644 --- a/canvas_modules/common-canvas/locales/common-properties/locales/en.json +++ b/canvas_modules/common-canvas/locales/common-properties/locales/en.json @@ -96,6 +96,7 @@ "table.toolbar.button.edit": "Edit", "table.toolbar.button.cancel": "Cancel", "table.toolbar.overflow.label": "Table Toolbar Overflow", + "radiobuttongroup.aria.label": "Radio Button Group", "list.table.label": "Values", "dropdown.tooltip.openMenu": "Open menu", "dropdown.tooltip.closeMenu": "Close menu", diff --git a/canvas_modules/common-canvas/src/common-properties/constants/constants.js b/canvas_modules/common-canvas/src/common-properties/constants/constants.js index 2e8c5b4155..57e7c0bb4f 100644 --- a/canvas_modules/common-canvas/src/common-properties/constants/constants.js +++ b/canvas_modules/common-canvas/src/common-properties/constants/constants.js @@ -128,6 +128,7 @@ export const MESSAGE_KEYS = { TABLE_TOOLBAR_BUTTON_EDIT: "table.toolbar.button.edit", TABLE_TOOLBAR_BUTTON_CANCEL: "table.toolbar.button.cancel", TABLE_TOOLBAR_OVERFLOW_LABEL: "table.toolbar.overflow.label", + RADIO_BUTTON_GROUP_ARIA_LABEL: "radiobuttongroup.aria.label", TABLE_DELETEICON_TOOLTIP: "table.deleteIcon.tooltip" }; diff --git a/canvas_modules/common-canvas/src/common-properties/controls/radioset/radioset.jsx b/canvas_modules/common-canvas/src/common-properties/controls/radioset/radioset.jsx index 57b2f7af10..09bb533932 100644 --- a/canvas_modules/common-canvas/src/common-properties/controls/radioset/radioset.jsx +++ b/canvas_modules/common-canvas/src/common-properties/controls/radioset/radioset.jsx @@ -19,11 +19,12 @@ import PropTypes from "prop-types"; import { connect } from "react-redux"; import { isEqual } from "lodash"; import * as ControlUtils from "./../../util/control-utils"; +import * as PropertyUtils from "./../../util/property-utils"; import * as ConditionsUtils from "./../../ui-conditions/conditions-utils.js"; import ValidationMessage from "./../../components/validation-message"; import { RadioButton, RadioButtonGroup } from "@carbon/react"; import classNames from "classnames"; -import { STATES, UPDATE_TYPE } from "./../../constants/constants.js"; +import { MESSAGE_KEYS, STATES, UPDATE_TYPE } from "./../../constants/constants.js"; import { v4 as uuid4 } from "uuid"; import { Information } from "@carbon/react/icons"; import Tooltip from "./../../../tooltip/tooltip.jsx"; @@ -224,6 +225,8 @@ class RadiosetControl extends React.Component { ); } + const radioBtnGroupAriaLabel = PropertyUtils.formatMessage(this.props.controller.getReactIntl(), MESSAGE_KEYS.RADIO_BUTTON_GROUP_ARIA_LABEL); + return (
{buttons} From 21858ba8729c8c2fb3198f477e715b94a3521729 Mon Sep 17 00:00:00 2001 From: srikant Date: Tue, 21 Jan 2025 18:02:53 +0530 Subject: [PATCH 11/12] Test build Signed-off-by: srikant --- .../components/table-buttons/table-buttons.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/canvas_modules/common-canvas/src/common-properties/components/table-buttons/table-buttons.jsx b/canvas_modules/common-canvas/src/common-properties/components/table-buttons/table-buttons.jsx index 09a4a4d0f7..323785e27c 100644 --- a/canvas_modules/common-canvas/src/common-properties/components/table-buttons/table-buttons.jsx +++ b/canvas_modules/common-canvas/src/common-properties/components/table-buttons/table-buttons.jsx @@ -113,7 +113,7 @@ class TableButtons extends React.Component { instanceId={0} size="sm" toolbarActionHandler={this.customButtonOnClick} - additionalText={{ overflowMenuLabel: this.props.toolbarOverflowLabel }} + // additionalText={{ overflowMenuLabel: this.props.toolbarOverflowLabel }} />
); } From 75ba7ec0297a066c1507f5e879c42b16fee15052 Mon Sep 17 00:00:00 2001 From: srikant Date: Tue, 21 Jan 2025 19:25:36 +0530 Subject: [PATCH 12/12] Test build 2 Signed-off-by: srikant --- .../components/table-buttons/table-buttons.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/canvas_modules/common-canvas/src/common-properties/components/table-buttons/table-buttons.jsx b/canvas_modules/common-canvas/src/common-properties/components/table-buttons/table-buttons.jsx index 323785e27c..09a4a4d0f7 100644 --- a/canvas_modules/common-canvas/src/common-properties/components/table-buttons/table-buttons.jsx +++ b/canvas_modules/common-canvas/src/common-properties/components/table-buttons/table-buttons.jsx @@ -113,7 +113,7 @@ class TableButtons extends React.Component { instanceId={0} size="sm" toolbarActionHandler={this.customButtonOnClick} - // additionalText={{ overflowMenuLabel: this.props.toolbarOverflowLabel }} + additionalText={{ overflowMenuLabel: this.props.toolbarOverflowLabel }} /> ); }