fix(Spinner): define default aria-label via destructuring (#12420)

The Spinner default "Contents" aria-label was emitted by an inline
conditional in the JSX, so the props table for the component did not
show that there was a default value at all (#11750). Move the default
to the destructuring pattern so react-docgen surfaces it, and replace
the three conditional spread expressions with a direct attribute plus
the still-conditional aria-labelledBy spread.

Existing snapshots are unchanged (`<Spinner />` still renders with
aria-label="Contents"). Added unit tests cover the default value, an
explicitly provided aria-label, and aria-labelledBy.

Closes #11750

Co-authored-by: Matt Van Horn <455140+mvanhorn@users.noreply.github.com>

Author: mvanhorn

packages/react-core/src/components/Spinner/Spinner.tsx

@@ -22,8 +22,10 @@ export interface SpinnerProps extends React.SVGProps<SVGSVGElement> {
   isInline?: boolean;
   /** Accessible label to describe what is loading */
   'aria-label'?: string;
-  /** Id of element which describes what is being loaded */
+  /** ID of the element(s) that provide an accessible name for the spinner. This prop is deprecated and you should instead use the aria-labelledby prop (with a lowercase "b") instead. */
   'aria-labelledBy'?: string;
+  /** ID of the element(s) that provide an accessible name for the spinner. */
+  'aria-labelledby'?: string;
 }
 
 export const Spinner: React.FunctionComponent<SpinnerProps> = ({
@@ -32,8 +34,9 @@ export const Spinner: React.FunctionComponent<SpinnerProps> = ({
   'aria-valuetext': ariaValueText = 'Loading...',
   diameter,
   isInline = false,
-  'aria-label': ariaLabel,
-  'aria-labelledBy': ariaLabelledBy,
+  'aria-label': ariaLabel = 'Contents',
+  'aria-labelledBy': deprecatedAriaLabelledBy,
+  'aria-labelledby': ariaLabelledby,
   ...props
 }: SpinnerProps) => (
   <svg
@@ -42,9 +45,10 @@ export const Spinner: React.FunctionComponent<SpinnerProps> = ({
     aria-valuetext={ariaValueText}
     viewBox="0 0 100 100"
     {...(diameter && { style: { [cssDiameter.name]: diameter } as React.CSSProperties })}
-    {...(ariaLabel && { 'aria-label': ariaLabel })}
-    {...(ariaLabelledBy && { 'aria-labelledBy': ariaLabelledBy })}
-    {...(!ariaLabel && !ariaLabelledBy && { 'aria-label': 'Contents' })}
+    aria-label={ariaLabel}
+    {...((ariaLabelledby ?? deprecatedAriaLabelledBy) && {
+      'aria-labelledby': ariaLabelledby ?? deprecatedAriaLabelledBy
+    })}
     {...props}
   >
     <circle className={styles.spinnerPath} cx="50" cy="50" r="45" fill="none" />

packages/react-core/src/components/Spinner/__tests__/Spinner.test.tsx

@@ -1,11 +1,47 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { Spinner } from '../Spinner';
 
 test('simple spinner', () => {
   const { asFragment } = render(<Spinner />);
   expect(asFragment()).toMatchSnapshot();
 });
 
+test('uses default aria-label of "Contents" when none is provided', () => {
+  render(<Spinner />);
+  expect(screen.getByRole('progressbar')).toHaveAccessibleName('Contents');
+});
+
+test('uses a custom aria-label when one is provided', () => {
+  render(<Spinner aria-label="Loading users" />);
+  expect(screen.getByRole('progressbar')).toHaveAccessibleName('Loading users');
+});
+
+test('Renders with accessible name via aria-labelledby when passed', () => {
+  render(
+    <>
+      <span id="spinner-label">Loading reports</span>
+      <Spinner aria-labelledby="spinner-label" />
+    </>
+  );
+
+  expect(screen.getByRole('progressbar')).toHaveAccessibleName('Loading reports');
+});
+
+test('Renders deprecated aria-labelledBy as aria-labelledby', () => {
+  render(<Spinner aria-labelledBy="external-label" />);
+  expect(screen.getByRole('progressbar')).toHaveAttribute('aria-labelledby', 'external-label');
+});
+
+test('Prefers aria-labelledby over the deprecated aria-labelledBy when both are passed', () => {
+  render(<Spinner aria-labelledby="lowercase-label" aria-labelledBy="deprecated-label" />);
+  expect(screen.getByRole('progressbar')).toHaveAttribute('aria-labelledby', 'lowercase-label');
+});
+
+test('Renders with aria-label even when aria-labelledby is passed', () => {
+  render(<Spinner aria-labelledby="external-label" />);
+  expect(screen.getByRole('progressbar')).toHaveAccessibleName('Contents');
+});
+
 test('small spinner', () => {
   const { asFragment } = render(<Spinner size="sm" />);
   expect(asFragment()).toMatchSnapshot();