#2294 Fix Accessibility Violations - 2 (#2295)

Signed-off-by: srikant <[email protected]>
elyra-ai · Jan 16, 2025 · eb5e478 · eb5e478
1 parent 84ce953
commit eb5e478
Show file tree

Hide file tree

Showing 6 changed files with 6 additions and 11 deletions.
diff --git a/canvas_modules/common-canvas/assets/images/arrange_horizontally.svg b/canvas_modules/common-canvas/assets/images/arrange_horizontally.svg
diff --git a/canvas_modules/common-canvas/assets/images/arrange_vertically.svg b/canvas_modules/common-canvas/assets/images/arrange_vertically.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
diff --git 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
 				/>
 			);
 		}

diff --git 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 = <SVG src={icon} className={className} disabled={this.props.disabled} />;
+				icon = <SVG src={icon} className={className} disabled={this.props.disabled} aria-label={this.props.type} />;
 			} else {
 				icon = <div />;
 			}

diff --git a/canvas_modules/common-canvas/src/toolbar/toolbar-button-item.jsx b/canvas_modules/common-canvas/src/toolbar/toolbar-button-item.jsx
@@ -18,8 +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";
@@ -29,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 } 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,
@@ -123,12 +121,10 @@ class ToolbarButtonItem extends React.Component {
 			return <OpenPanelFilledLeft disabled={disabled} />;
 		case (TOOLBAR_TOGGLE_PALETTE):
 			return <OpenPanelFilledLeft disabled={disabled} />;
-
-		// Non-carbon icons
 		case (TOOLBAR_ARRANGE_HORIZONALLY):
-			return <SVG src={ArrangeHorizontally} disabled={disabled} />;
+			return <ArrangeHorizontal disabled={disabled} />;
 		case (TOOLBAR_ARRANGE_VERTICALLY):
-			return <SVG src={ArrangeVertically} disabled={disabled} />;
+			return <ArrangeVertical disabled={disabled} />;
 		case (TOOLBAR_TOGGLE_NOTIFICATION_PANEL):
 			return <SVG src={ToggleNotificationPanel} disabled={disabled} />;