fix(FullPageError): accessibility violations (carbon-design-system#6503)

* fix(FullPageError): accessibility voilations * fix(FullPageError): accessibility voilations * fix(FullPageError): accessibility voilations --------- Co-authored-by: Nandan Devadula <[email protected]>
anamikaanu96 · Nov 29, 2024 · 3f45528 · 3f45528
1 parent d5767e8
commit 3f45528
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 21 deletions.
diff --git a/packages/ibm-products/src/components/FullPageError/FullPageError.test.js b/packages/ibm-products/src/components/FullPageError/FullPageError.test.js
@@ -76,7 +76,8 @@ describe(componentName, () => {
 
   it('renders error label', () => {
     render(<FullPageError {...defaultProps} />);
-    expect(screen.getByText('↳ ' + label)).toBeInTheDocument();
+    const labelElement = screen.getByText(label).closest('span');
+    expect(labelElement).toContainHTML('<span aria-hidden="true">↳ </span>');
   });
 
   it('renders description', () => {

diff --git a/packages/ibm-products/src/components/FullPageError/FullPageError.tsx b/packages/ibm-products/src/components/FullPageError/FullPageError.tsx
@@ -82,25 +82,18 @@ export let FullPageError = React.forwardRef<HTMLDivElement, FullPageErrorProps>(
     const errorData = {
       403: {
         svg: (
-          <Error403SVG
-            className={`${blockClass}__svg ${blockClass}__403`}
-            title={title}
-          />
+          <Error403SVG className={`${blockClass}__svg ${blockClass}__403`} />
         ),
       },
       404: {
         svg: (
-          <Error404SVG
-            className={`${blockClass}__svg ${blockClass}__404`}
-            title={title}
-          />
+          <Error404SVG className={`${blockClass}__svg ${blockClass}__404`} />
         ),
       },
       custom: {
         svg: (
           <ErrorGenericSVG
             className={`${blockClass}__svg ${blockClass}__custom`}
-            title={title}
           />
         ),
       },
@@ -117,7 +110,10 @@ export let FullPageError = React.forwardRef<HTMLDivElement, FullPageErrorProps>(
           <Grid className={`${blockClass}__grid`}>
             <Column sm={4} md={3} lg={6} className={`${blockClass}__column`}>
               <h1 className={`${blockClass}__title`}>
-                <span className={`${blockClass}__label`}>↳ {label}</span>
+                <span className={`${blockClass}__label`}>
+                  <span aria-hidden="true">↳ </span>
+                  {label}
+                </span>
                 <span>{title}</span>
               </h1>
               <p className={`${blockClass}__description`}>{description}</p>

diff --git a/packages/ibm-products/src/components/FullPageError/assets/Error403SVG.js b/packages/ibm-products/src/components/FullPageError/assets/Error403SVG.js
@@ -11,14 +11,14 @@ import React from 'react';
 // Other standard imports.
 import { string } from 'prop-types';
 
-export const Error403SVG = ({ className, title }) => {
+export const Error403SVG = ({ className }) => {
   return (
     <svg
       viewBox="0 0 750 570"
       fill="none"
       className={className}
+      aria-hidden="true"
       xmlns="http://www.w3.org/2000/svg"
-      aria-label={title}
     >
       <g clipPath="url(#clip0_0_2401)">
         <path
@@ -829,5 +829,4 @@ export const Error403SVG = ({ className, title }) => {
 // See https://www.npmjs.com/package/prop-types#usage.
 Error403SVG.propTypes = {
   className: string,
-  title: string,
 };
diff --git a/packages/ibm-products/src/components/FullPageError/assets/Error404SVG.js b/packages/ibm-products/src/components/FullPageError/assets/Error404SVG.js
@@ -11,14 +11,14 @@ import React from 'react';
 // Other standard imports.
 import { string } from 'prop-types';
 
-export const Error404SVG = ({ className, title }) => {
+export const Error404SVG = ({ className }) => {
   return (
     <svg
       viewBox="0 0 751 549"
       fill="none"
       className={className}
+      aria-hidden="true"
       xmlns="http://www.w3.org/2000/svg"
-      aria-label={title}
     >
       <g clipPath="url(#clip0_0_2285)">
         <path d="M103.296 290.22V153.267H612.488" fill="#F3F3F3" />
@@ -733,5 +733,4 @@ export const Error404SVG = ({ className, title }) => {
 // See https://www.npmjs.com/package/prop-types#usage.
 Error404SVG.propTypes = {
   className: string,
-  title: string,
 };
diff --git a/packages/ibm-products/src/components/FullPageError/assets/ErrorGenericSVG.js b/packages/ibm-products/src/components/FullPageError/assets/ErrorGenericSVG.js
@@ -11,14 +11,14 @@ import React from 'react';
 // Other standard imports.
 import { string } from 'prop-types';
 
-export const ErrorGenericSVG = ({ className, title }) => {
+export const ErrorGenericSVG = ({ className }) => {
   return (
     <svg
       viewBox="0 0 750 506"
       fill="none"
       className={className}
+      aria-hidden="true"
       xmlns="http://www.w3.org/2000/svg"
-      aria-label={title}
     >
       <g clipPath="url(#clip0_203_144)">
         <path
@@ -828,5 +828,4 @@ export const ErrorGenericSVG = ({ className, title }) => {
 // See https://www.npmjs.com/package/prop-types#usage.
 ErrorGenericSVG.propTypes = {
   className: string,
-  title: string,
 };
diff --git a/packages/ibm-products/src/components/FullPageError/preview-components/UiShell.js b/packages/ibm-products/src/components/FullPageError/preview-components/UiShell.js
@@ -35,7 +35,7 @@ export const UiShell = ({ children }) => {
             <Header aria-label="IBM Product">
               <SkipToContent />
               <HeaderMenuButton
-                aria-label="Open menu"
+                aria-label={isSideNavExpanded ? 'Close menu' : 'Open menu'}
                 onClick={onClickSideNavExpand}
                 isCollapsible
                 isActive={isSideNavExpanded}