#2211 Fix Accessibility Issues for palette (#2212)

elyra-ai · Oct 17, 2024 · 28e7cc0 · 28e7cc0
1 parent 7b8b5ad
commit 28e7cc0
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 3 deletions.
diff --git a/canvas_modules/common-canvas/src/palette/palette-content-list-item.jsx b/canvas_modules/common-canvas/src/palette/palette-content-list-item.jsx
@@ -284,7 +284,7 @@ class PaletteContentListItem extends React.Component {
 				icon = image;
 			} else if (typeof image === "string") {
 				icon = image.endsWith(".svg")
-					? <SVG src={image} className="palette-list-item-icon" draggable="false" />
+					? <SVG src={image} className="palette-list-item-icon" draggable="false" aria-hidden="true" />
 					: <img src={image} className="palette-list-item-icon" draggable="false" alt={""} />;
 			}
 		}

diff --git a/canvas_modules/common-canvas/src/palette/palette-flyout-content-category.jsx b/canvas_modules/common-canvas/src/palette/palette-flyout-content-category.jsx
@@ -170,7 +170,7 @@ class PaletteFlyoutContentCategory extends React.Component {
 			} else if (this.props.category.image.endsWith(".svg")) {
 				itemImage = (
 					<div>
-						<SVG src={this.props.category.image} className="palette-flyout-category-item-icon" draggable="false" />
+						<SVG src={this.props.category.image} className="palette-flyout-category-item-icon" draggable="false" aria-hidden="true" />
 					</div>
 				);
 			} else {

diff --git a/canvas_modules/common-canvas/src/palette/palette-flyout-content-search.jsx b/canvas_modules/common-canvas/src/palette/palette-flyout-content-search.jsx
@@ -52,7 +52,7 @@ class PaletteFlyoutContentSearch extends React.Component {
 			// palette-flyout-search id added for hopscotch tours
 			<div className="palette-flyout-search-container" id="palette-flyout-search">
 				<Search
-					id="palette-flyout-search"
+					id="palette-flyout-search-input"
 					className="palette-flyout-search"
 					placeholder={placeHolder}
 					onChange={this.handleSearchStringChange}