fix(Loading): improve screenreader support (#11759)

* fix(Loading): improve screenreader support

* fix(Loading): more screenreader tweaks

* test(snapshot): update snapshots

* test(Loading): update Loading tests

* test(format): format files

Author: tw15egan

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -3793,7 +3793,7 @@ Map {
   "Loading" => Object {
     "defaultProps": Object {
       "active": true,
-      "description": "Active loading indicator",
+      "description": "loading",
       "small": false,
       "withOverlay": true,
     },
@@ -3807,9 +3807,7 @@ Map {
       "description": Object {
         "type": "string",
       },
-      "id": Object {
-        "type": "string",
-      },
+      "id": [Function],
       "small": Object {
         "type": "bool",
       },

packages/react/src/components/InlineLoading/InlineLoading-story.js

@@ -18,10 +18,7 @@ const props = () => ({
     ['inactive', 'active', 'finished', 'error'],
     'active'
   ),
-  iconDescription: text(
-    'Icon description (iconDescription)',
-    'Active loading indicator'
-  ),
+  iconDescription: text('Icon description (iconDescription)', 'loading'),
   description: text(
     'Loading progress description (description)',
     'Loading data...'

packages/react/src/components/InlineLoading/InlineLoading-test.js

@@ -19,17 +19,13 @@ describe('InlineLoading', () => {
   it('should render a loader by default', () => {
     render(<InlineLoading />);
 
-    expect(
-      screen.getByLabelText('Active loading indicator')
-    ).toBeInTheDocument();
+    expect(screen.getByTitle('loading')).toBeInTheDocument();
   });
 
   it('should render a loader if the status is inactive', () => {
     render(<InlineLoading status="inactive" />);
 
-    expect(
-      screen.getByLabelText('Active loading indicator')
-    ).toBeInTheDocument();
+    expect(screen.getByTitle('not loading')).toBeInTheDocument();
   });
 
   it('should render the success state if status is finished', () => {

packages/react/src/components/InlineLoading/InlineLoading.js

@@ -24,10 +24,11 @@ export default function InlineLoading({
   const prefix = usePrefix();
   const loadingClasses = classNames(`${prefix}--inline-loading`, className);
   const getLoading = () => {
+    let iconLabel = iconDescription ? iconDescription : status;
     if (status === 'error') {
       return (
         <ErrorFilled className={`${prefix}--inline-loading--error`}>
-          <title>{iconDescription}</title>
+          <title>{iconLabel}</title>
         </ErrorFilled>
       );
     }
@@ -40,15 +41,18 @@ export default function InlineLoading({
       return (
         <CheckmarkFilled
           className={`${prefix}--inline-loading__checkmark-container`}>
-          <title>{iconDescription}</title>
+          <title>{iconLabel}</title>
         </CheckmarkFilled>
       );
     }
     if (status === 'inactive' || status === 'active') {
+      if (!iconDescription) {
+        iconLabel = status === 'active' ? 'loading' : 'not loading';
+      }
       return (
         <Loading
           small
-          description={iconDescription}
+          description={iconLabel}
           withOverlay={false}
           active={status === 'active'}
         />

packages/react/src/components/InlineLoading/next/InlineLoading.stories.js

@@ -17,7 +17,7 @@ export default {
 export const _InlineLoading = () => (
   <InlineLoading
     status="active"
-    iconDescription="Active loading indicator"
+    iconDescription="Loading"
     description="Loading data..."
   />
 );

packages/react/src/components/Loading/Loading-story.js

@@ -13,7 +13,7 @@ const props = () => ({
   active: boolean('Active (active)', true),
   withOverlay: boolean('With overlay (withOverlay)', false),
   small: boolean('Small (small)', false),
-  description: text('Description (description)', 'Active loading indicator'),
+  description: text('Description (description)', 'Loading'),
 });
 
 export default {
@@ -25,13 +25,3 @@ export default {
 export const Default = () => {
   return <Loading {...props()} className={'some-class'} />;
 };
-
-Default.parameters = {
-  info: {
-    text: `
-        Loading spinners are used when retrieving data or performing slow computations,
-        and help to notify users that loading is underway. The 'active' property is true by default;
-        set to false to end the animation.
-      `,
-  },
-};

packages/react/src/components/Loading/Loading-test.js

@@ -36,13 +36,6 @@ describe('Loading', () => {
       const { container } = render(<Loading />);
       const liveRegion = container.querySelector('[aria-live]');
       expect(liveRegion).toBeInstanceOf(HTMLElement);
-
-      const id = liveRegion.getAttribute('aria-labelledby');
-      expect(id).toBeDefined();
-
-      const label = document.getElementById(id);
-      expect(label).toBeDefined();
-      expect(typeof label.textContent).toBe('string');
     });
 
     // https://www.w3.org/TR/WCAG21/#status-messages

packages/react/src/components/Loading/Loading.js

@@ -7,14 +7,11 @@
 
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useRef } from 'react';
-import setupGetInstanceId from '../../tools/setupGetInstanceId';
+import React from 'react';
 import { usePrefix } from '../../internal/usePrefix';
-
-const getInstanceId = setupGetInstanceId();
+import deprecate from '../../prop-types/deprecate';
 
 function Loading({
-  id,
   active,
   className: customClassName,
   withOverlay,
@@ -23,7 +20,6 @@ function Loading({
   ...rest
 }) {
   const prefix = usePrefix();
-  const { current: instanceId } = useRef(getInstanceId());
   const loadingClassName = cx(customClassName, {
     [`${prefix}--loading`]: true,
     [`${prefix}--loading--small`]: small,
@@ -33,18 +29,13 @@ function Loading({
     [`${prefix}--loading-overlay`]: true,
     [`${prefix}--loading-overlay--stop`]: !active,
   });
-  const loadingId = id || `loading-id-${instanceId}`;
 
   const loading = (
     <div
       {...rest}
       aria-atomic="true"
-      aria-labelledby={loadingId}
       aria-live={active ? 'assertive' : 'off'}
       className={loadingClassName}>
-      <label id={loadingId} className={`${prefix}--visually-hidden`}>
-        {description}
-      </label>
       <svg className={`${prefix}--loading__svg`} viewBox="0 0 100 100">
         <title>{description}</title>
         {small ? (
@@ -91,7 +82,7 @@ Loading.propTypes = {
   /**
    * Provide an `id` to uniquely identify the label
    */
-  id: PropTypes.string,
+  id: deprecate(PropTypes.string, `\nThe prop \`id\` is no longer needed.`),
 
   /**
    * Specify whether you would like the small variant of <Loading>
@@ -108,7 +99,7 @@ Loading.defaultProps = {
   active: true,
   withOverlay: true,
   small: false,
-  description: 'Active loading indicator',
+  description: 'loading',
 };
 
 export default Loading;