fix(Empty state): accessibility defect (carbon-design-system#4137)

* fix:empty state components svg alt text accebility update * fix:empty state components svg alt text accebility update correction * fix:empty state SVGs title updated with illustrationdecription prop * fix(Empty state):accebility defect props update * fix(Empty state):accebility defect props update * fix(Empty state):accebility defect props update * fix(Empty state):accebility defect props update lint issue * fix(Empty state):accebility defect illustrationDescription made optional * fix(Empty state):accebility defect tests * fix(Empty state):accebility defect tests --------- Co-authored-by: elysia <[email protected]>
lee-chase · Feb 5, 2024 · 778dd03 · 778dd03
1 parent b8653f0
commit 778dd03
Show file tree

Hide file tree

Showing 19 changed files with 76 additions and 31 deletions.
diff --git a/packages/ibm-products/src/components/EmptyStates/EmptyState.test.js b/packages/ibm-products/src/components/EmptyStates/EmptyState.test.js
@@ -28,6 +28,7 @@ const { name } = EmptyState;
 const defaultProps = {
   title: 'Empty state title',
   subtitle: 'Empty state subtitle',
+  illustrationDescription: 'Test alt text',
 };
 
 describe(name, () => {
@@ -96,11 +97,7 @@ describe(name, () => {
 
   it('should render a custom illustration', async () => {
     const { container } = render(
-      <EmptyState
-        {...defaultProps}
-        illustration={CustomIllustration}
-        illustrationDescription="Test alt text"
-      />
+      <EmptyState {...defaultProps} illustration={CustomIllustration} />
     );
     const customIllustrationElement = container.querySelector('img');
     expect(customIllustrationElement).toBeTruthy();
@@ -258,7 +255,11 @@ describe(name, () => {
   it('should throw a custom prop type validation error when an illustration is used without an illustrationDescription prop', async () =>
     expectError(required('illustrationDescription', 'EmptyState'), () => {
       render(
-        <EmptyState {...defaultProps} illustration={CustomIllustration} />
+        <EmptyState
+          title="Empty state title"
+          subtitle="Empty state subtitle"
+          illustration={CustomIllustration}
+        />
       );
     }));
 });
diff --git a/packages/ibm-products/src/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js b/packages/ibm-products/src/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js
@@ -35,6 +35,7 @@ export let ErrorEmptyState = React.forwardRef(
       action,
       className,
       illustrationPosition = defaults.position,
+      illustrationDescription,
       illustrationTheme,
       link,
       size = defaults.size,
@@ -64,7 +65,7 @@ export let ErrorEmptyState = React.forwardRef(
         <ErrorIllustration
           theme={illustrationTheme}
           size={size}
-          title={title}
+          alt={illustrationDescription || title}
         />
         <EmptyStateContent
           action={action}
@@ -110,6 +111,11 @@ ErrorEmptyState.propTypes = {
    */
   illustrationPosition: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
 
+  /**
+   * The alt text for empty state svg images. If not provided , title will be used.
+   */
+  illustrationDescription: PropTypes.string,
+
   /**
    * Empty state illustration theme variations.
    * To ensure you use the correct themed illustrations, you can conditionally specify light or dark

diff --git a/packages/ibm-products/src/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.stories.js b/packages/ibm-products/src/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.stories.js
@@ -47,6 +47,7 @@ export default {
 const defaultStoryProps = {
   title: 'Empty state title',
   subtitle: 'Description text explaining why this section is empty.',
+  illustrationDescription: 'Test alt text',
 };
 
 const Template = (args) => {

diff --git a/packages/ibm-products/src/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js b/packages/ibm-products/src/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js
@@ -36,6 +36,7 @@ export let NoDataEmptyState = React.forwardRef(
       className,
       illustrationPosition = defaults.position,
       illustrationTheme,
+      illustrationDescription,
       link,
       size = defaults.size,
       subtitle,
@@ -62,9 +63,9 @@ export let NoDataEmptyState = React.forwardRef(
         {...getDevtoolsProps(componentName)}
       >
         <NoDataIllustration
-          title={title}
           theme={illustrationTheme}
           size={size}
+          alt={illustrationDescription || title}
         />
         <EmptyStateContent
           action={action}
@@ -118,6 +119,11 @@ NoDataEmptyState.propTypes = {
    */
   illustrationTheme: PropTypes.oneOf(['light', 'dark']),
 
+  /**
+   * The alt text for empty state svg images. If not provided , title will be used.
+   */
+  illustrationDescription: PropTypes.string,
+
   /**
    * Empty state link object
    */

diff --git a/...ages/ibm-products/src/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.stories.js b/...ages/ibm-products/src/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.stories.js
@@ -47,6 +47,7 @@ export default {
 const defaultStoryProps = {
   title: 'Empty state title',
   subtitle: 'Description text explaining why this section is empty.',
+  illustrationDescription: 'Test alt text',
 };
 
 const Template = (args) => {

diff --git a/packages/ibm-products/src/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js b/packages/ibm-products/src/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js
@@ -36,6 +36,7 @@ export let NoTagsEmptyState = React.forwardRef(
       className,
       illustrationPosition = defaults.position,
       illustrationTheme,
+      illustrationDescription,
       link,
       size = defaults.size,
       subtitle,
@@ -64,7 +65,7 @@ export let NoTagsEmptyState = React.forwardRef(
         <NoTagsIllustration
           theme={illustrationTheme}
           size={size}
-          title={title}
+          alt={illustrationDescription || title}
         />
         <EmptyStateContent
           action={action}
@@ -118,6 +119,11 @@ NoTagsEmptyState.propTypes = {
    */
   illustrationTheme: PropTypes.oneOf(['light', 'dark']),
 
+  /**
+   * The alt text for empty state svg images. If not provided , title will be used.
+   */
+  illustrationDescription: PropTypes.string,
+
   /**
    * Empty state link object
    */

diff --git a/...ages/ibm-products/src/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.stories.js b/...ages/ibm-products/src/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.stories.js
@@ -47,6 +47,7 @@ export default {
 const defaultStoryProps = {
   title: 'Empty state title',
   subtitle: 'Description text explaining why this section is empty.',
+  illustrationDescription: 'Test alt text',
 };
 
 const Template = (args) => {

diff --git a/packages/ibm-products/src/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js b/packages/ibm-products/src/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js
@@ -36,6 +36,7 @@ export let NotFoundEmptyState = React.forwardRef(
       className,
       illustrationPosition = defaults.position,
       illustrationTheme,
+      illustrationDescription,
       link,
       size = defaults.size,
       subtitle,
@@ -64,7 +65,7 @@ export let NotFoundEmptyState = React.forwardRef(
         <NotFoundIllustration
           theme={illustrationTheme}
           size={size}
-          title={title}
+          alt={illustrationDescription || title}
         />
         <EmptyStateContent
           action={action}
@@ -121,6 +122,11 @@ NotFoundEmptyState.propTypes = {
    */
   illustrationTheme: PropTypes.oneOf(['light', 'dark']),
 
+  /**
+   * The alt text for empty state svg images. If not provided , title will be used.
+   */
+  illustrationDescription: PropTypes.string,
+
   /**
    * Empty state link object
    */

diff --git a/.../ibm-products/src/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.stories.js b/.../ibm-products/src/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.stories.js
@@ -46,6 +46,7 @@ export default {
 const defaultStoryProps = {
   title: 'Empty state title',
   subtitle: 'Description text explaining why this section is empty.',
+  illustrationDescription: 'Test alt text',
 };
 
 const Template = (args) => {
@@ -81,7 +82,9 @@ export const withActionIconButton = prepareStory(Template, {
     action: {
       text: 'Create new',
       onClick: action('Clicked empty state action button'),
-      renderIcon: (props) => <Add size={20} {...props} />,
+      renderIcon: (props) => (
+        <Add iconDescription="test" size={20} {...props} />
+      ),
       iconDescription: 'Add icon',
     },
   },

diff --git a/...bm-products/src/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js b/...bm-products/src/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js
@@ -36,6 +36,7 @@ export let NotificationsEmptyState = React.forwardRef(
       className,
       illustrationPosition = defaults.position,
       illustrationTheme,
+      illustrationDescription,
       link,
       size = defaults.size,
       subtitle,
@@ -64,7 +65,7 @@ export let NotificationsEmptyState = React.forwardRef(
         <NotificationsIllustration
           size={size}
           theme={illustrationTheme}
-          title={title}
+          alt={illustrationDescription || title}
         />
         <EmptyStateContent
           action={action}
@@ -121,6 +122,11 @@ NotificationsEmptyState.propTypes = {
    */
   illustrationTheme: PropTypes.oneOf(['light', 'dark']),
 
+  /**
+   * The alt text for empty state svg images. If not provided , title will be used.
+   */
+  illustrationDescription: PropTypes.string,
+
   /**
    * Empty state link object
    */

diff --git a/...cts/src/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.stories.js b/...cts/src/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.stories.js
@@ -46,6 +46,7 @@ export default {
 const defaultStoryProps = {
   title: 'Empty state title',
   subtitle: 'Description text explaining why this section is empty.',
+  illustrationDescription: 'Test alt text',
 };
 
 const Template = (args) => {

diff --git a/.../ibm-products/src/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js b/.../ibm-products/src/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js
@@ -36,6 +36,7 @@ export let UnauthorizedEmptyState = React.forwardRef(
       className,
       illustrationPosition = defaults.position,
       illustrationTheme,
+      illustrationDescription,
       link,
       size = defaults.size,
       subtitle,
@@ -64,7 +65,7 @@ export let UnauthorizedEmptyState = React.forwardRef(
         <UnauthorizedIllustration
           size={size}
           theme={illustrationTheme}
-          title={title}
+          alt={illustrationDescription || title}
         />
         <EmptyStateContent
           action={action}
@@ -121,6 +122,11 @@ UnauthorizedEmptyState.propTypes = {
    */
   illustrationTheme: PropTypes.oneOf(['light', 'dark']),
 
+  /**
+   * The alt text for empty state svg images. If not provided , title will be used.
+   */
+  illustrationDescription: PropTypes.string,
+
   /**
    * Empty state link object
    */

diff --git a/...ducts/src/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.stories.js b/...ducts/src/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.stories.js
@@ -46,6 +46,7 @@ export default {
 const defaultStoryProps = {
   title: 'Empty state title',
   subtitle: 'Description text explaining why this section is empty.',
+  illustrationDescription: 'Test alt text',
 };
 
 const Template = (args) => {

diff --git a/packages/ibm-products/src/components/EmptyStates/assets/ErrorIllustration.js b/packages/ibm-products/src/components/EmptyStates/assets/ErrorIllustration.js
@@ -17,7 +17,7 @@ import uuidv4 from '../../../global/js/utils/uuidv4';
 // The block part of our conventional BEM class names (blockClass__E--M).
 const blockClass = `${pkg.prefix}--empty-state`;
 
-export const ErrorIllustration = ({ theme, title, size, ...rest }) => {
+export const ErrorIllustration = ({ theme, size, alt, ...rest }) => {
   const svgId = uuidv4();
 
   return (
@@ -34,7 +34,7 @@ export const ErrorIllustration = ({ theme, title, size, ...rest }) => {
       ])}
       role="img"
     >
-      <title>{title}</title>
+      <title>{alt}</title>
       {theme === 'dark' ? (
         <>
           <defs>
@@ -193,5 +193,5 @@ export const ErrorIllustration = ({ theme, title, size, ...rest }) => {
 ErrorIllustration.propTypes = {
   size: PropTypes.oneOf(['lg', 'sm']),
   theme: PropTypes.oneOf(['light', 'dark']),
-  title: PropTypes.string,
+  alt: PropTypes.string.isRequired,
 };
diff --git a/packages/ibm-products/src/components/EmptyStates/assets/NoDataIllustration.js b/packages/ibm-products/src/components/EmptyStates/assets/NoDataIllustration.js
@@ -17,7 +17,7 @@ import uuidv4 from '../../../global/js/utils/uuidv4';
 // The block part of our conventional BEM class names (blockClass__E--M).
 const blockClass = `${pkg.prefix}--empty-state`;
 
-export const NoDataIllustration = ({ theme, title, size, ...rest }) => {
+export const NoDataIllustration = ({ theme, size, alt, ...rest }) => {
   const svgId = uuidv4();
 
   return (
@@ -34,7 +34,7 @@ export const NoDataIllustration = ({ theme, title, size, ...rest }) => {
       ])}
       role="img"
     >
-      <title>{title}</title>
+      <title>{alt}</title>
       {theme === 'dark' ? (
         <>
           <defs>
@@ -185,5 +185,5 @@ export const NoDataIllustration = ({ theme, title, size, ...rest }) => {
 NoDataIllustration.propTypes = {
   size: PropTypes.oneOf(['lg', 'sm']),
   theme: PropTypes.oneOf(['light', 'dark']),
-  title: PropTypes.string,
+  alt: PropTypes.string.isRequired,
 };
diff --git a/packages/ibm-products/src/components/EmptyStates/assets/NoTagsIllustration.js b/packages/ibm-products/src/components/EmptyStates/assets/NoTagsIllustration.js
@@ -17,7 +17,7 @@ import uuidv4 from '../../../global/js/utils/uuidv4';
 // The block part of our conventional BEM class names (blockClass__E--M).
 const blockClass = `${pkg.prefix}--empty-state`;
 
-export const NoTagsIllustration = ({ theme, title, size, ...rest }) => {
+export const NoTagsIllustration = ({ theme, size, alt, ...rest }) => {
   const svgId = uuidv4();
 
   return (
@@ -35,7 +35,7 @@ export const NoTagsIllustration = ({ theme, title, size, ...rest }) => {
       ])}
       role="img"
     >
-      <title>{title}</title>
+      <title>{alt}</title>
       {theme === 'dark' ? (
         <>
           <defs>
@@ -358,5 +358,5 @@ export const NoTagsIllustration = ({ theme, title, size, ...rest }) => {
 NoTagsIllustration.propTypes = {
   size: PropTypes.oneOf(['lg', 'sm']),
   theme: PropTypes.oneOf(['light', 'dark']),
-  title: PropTypes.string,
+  alt: PropTypes.string.isRequired,
 };
diff --git a/packages/ibm-products/src/components/EmptyStates/assets/NotFoundIllustration.js b/packages/ibm-products/src/components/EmptyStates/assets/NotFoundIllustration.js
@@ -17,7 +17,7 @@ import uuidv4 from '../../../global/js/utils/uuidv4';
 // The block part of our conventional BEM class names (blockClass__E--M).
 const blockClass = `${pkg.prefix}--empty-state`;
 
-export const NotFoundIllustration = ({ theme, title, size, ...rest }) => {
+export const NotFoundIllustration = ({ theme, size, alt, ...rest }) => {
   const svgId = uuidv4();
 
   return (
@@ -34,7 +34,7 @@ export const NotFoundIllustration = ({ theme, title, size, ...rest }) => {
       ])}
       role="img"
     >
-      <title>{title}</title>
+      <title>{alt}</title>
       {theme === 'dark' ? (
         <>
           <defs>
@@ -289,5 +289,5 @@ export const NotFoundIllustration = ({ theme, title, size, ...rest }) => {
 NotFoundIllustration.propTypes = {
   size: PropTypes.oneOf(['lg', 'sm']),
   theme: PropTypes.oneOf(['light', 'dark']),
-  title: PropTypes.string,
+  alt: PropTypes.string.isRequired,
 };
diff --git a/packages/ibm-products/src/components/EmptyStates/assets/NotificationsIllustration.js b/packages/ibm-products/src/components/EmptyStates/assets/NotificationsIllustration.js
@@ -17,7 +17,7 @@ import uuidv4 from '../../../global/js/utils/uuidv4';
 // The block part of our conventional BEM class names (blockClass__E--M).
 const blockClass = `${pkg.prefix}--empty-state`;
 
-export const NotificationsIllustration = ({ theme, title, size, ...rest }) => {
+export const NotificationsIllustration = ({ theme, size, alt, ...rest }) => {
   const svgId = uuidv4();
 
   return (
@@ -34,7 +34,7 @@ export const NotificationsIllustration = ({ theme, title, size, ...rest }) => {
       ])}
       role="img"
     >
-      <title>{title}</title>
+      <title>{alt}</title>
       {theme === 'dark' ? (
         <>
           <defs>
@@ -289,5 +289,5 @@ export const NotificationsIllustration = ({ theme, title, size, ...rest }) => {
 NotificationsIllustration.propTypes = {
   size: PropTypes.oneOf(['lg', 'sm']),
   theme: PropTypes.oneOf(['light', 'dark']),
-  title: PropTypes.string,
+  alt: PropTypes.string.isRequired,
 };