Aria property name updates

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

@@ -136,8 +136,8 @@ export class AboutModal extends React.Component<AboutModalProps, ModalState> {
 
     return ReactDOM.createPortal(
       <AboutModalContainer
-        ariaLabelledbyId={this.ariaLabelledBy}
-        ariaDescribedById={this.ariaDescribedBy}
+        aboutModalBoxHeaderId={this.ariaLabelledBy}
+        aboutModalBoxContentId={this.ariaDescribedBy}
         {...props}
       />,
       container

packages/react-core/src/components/AboutModal/AboutModalContainer.tsx

@@ -34,9 +34,9 @@ export interface AboutModalContainerProps extends React.HTMLProps<HTMLDivElement
   /** the URL of the image for the background.  */
   backgroundImageSrc?: string;
   /** id to use for About Modal Box aria labeled by  */
-  ariaLabelledbyId: string;
+  aboutModalBoxHeaderId: string;
   /** id to use for About Modal Box aria described by  */
-  ariaDescribedById: string;
+  aboutModalBoxContentId: string;
   /** Set close button aria label */
   closeButtonAriaLabel?: string;
 }
@@ -51,9 +51,9 @@ export const AboutModalContainer: React.FunctionComponent<AboutModalContainerPro
   brandImageSrc,
   brandImageAlt,
   backgroundImageSrc,
-  ariaLabelledbyId,
-  ariaDescribedById,
   closeButtonAriaLabel,
+  aboutModalBoxHeaderId,
+  aboutModalBoxContentId,
   ...props
 }: AboutModalContainerProps) => {
   if (!isOpen) {
@@ -62,13 +62,17 @@ export const AboutModalContainer: React.FunctionComponent<AboutModalContainerPro
   return (
     <Backdrop>
       <FocusTrap focusTrapOptions={{ clickOutsideDeactivates: true }} className={css(styles.bullseye)}>
-        <AboutModalBox className={className} aria-labelledby={ariaLabelledbyId} aria-describedby={ariaDescribedById}>
+        <AboutModalBox
+          className={className}
+          aria-labelledby={aboutModalBoxHeaderId}
+          aria-describedby={aboutModalBoxContentId}
+        >
           <AboutModalBoxBrand src={brandImageSrc} alt={brandImageAlt} />
-          <AboutModalBoxCloseButton aria-label={closeButtonAriaLabel} onClose={onClose} />
-          {productName && <AboutModalBoxHeader id={ariaLabelledbyId} productName={productName} />}
+          <AboutModalBoxCloseButton onClose={onClose} aria-label={closeButtonAriaLabel} />
+          {productName && <AboutModalBoxHeader id={aboutModalBoxHeaderId} productName={productName} />}
           <AboutModalBoxContent
             trademark={trademark}
-            id={ariaDescribedById}
+            id={aboutModalBoxContentId}
             noAboutModalBoxContentContainer={false}
             {...props}
           >

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

@@ -48,7 +48,7 @@ test('modal does not call onClose for esc key if it is not open', () => {
   expect(props.onClose).not.toBeCalled();
 });
 
-test('Each modal is given new ariaDescribedById and ariaLabelledbyId', () => {
+test('Each modal is given new aria-describedby and aria-labelledby', () => {
   const first = new AboutModal(props);
   const second = new AboutModal(props);
   expect(first.ariaLabelledBy).not.toBe(second.ariaLabelledBy);

packages/react-core/src/components/AboutModal/__tests__/AboutModalContainer.test.tsx

@@ -9,8 +9,8 @@ const props = {
   brandImageSrc: 'brandImg...',
   brandImageAlt: 'Brand Image',
   backgroundImageSrc: 'backgroundImageSrc...',
-  ariaLabelledbyId: 'ariaLablledbyId',
-  ariaDescribedById: 'ariaDescribedById'
+  'aria-labelledby': 'ariaLablledbyId',
+  'aria-describedby': 'ariaDescribedById'
 };
 test('About Modal Container Test simple', () => {
   const view = shallow(<AboutModalContainer {...props}>This is ModalBox content</AboutModalContainer>);

packages/react-core/src/components/AboutModal/__tests__/Generated/AboutModalContainer.test.tsx

@@ -19,8 +19,8 @@ it('AboutModalContainer should match snapshot (auto-generated)', () => {
       brandImageSrc={'string'}
       brandImageAlt={'string'}
       backgroundImageSrc={'string'}
-      ariaLabelledbyId={'string'}
-      ariaDescribedById={'string'}
+      aria-labelledby={'string'}
+      aria-describedby={'string'}
     />
   );
   expect(view).toMatchSnapshot();

packages/react-core/src/components/AboutModal/__tests__/Generated/__snapshots__/AboutModal.test.tsx.snap

@@ -5,8 +5,8 @@ exports[`AboutModal should match snapshot (auto-generated) 1`] = `
   containerInfo={<div />}
 >
   <AboutModalContainer
-    ariaDescribedById="pf-about-modal-content-0"
-    ariaLabelledbyId="pf-about-modal-title-0"
+    aboutModalBoxContentId="pf-about-modal-content-0"
+    aboutModalBoxHeaderId="pf-about-modal-title-0"
     backgroundImageSrc="''"
     brandImageAlt="string"
     brandImageSrc="string"

packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalContainer.test.tsx.snap

@@ -15,8 +15,6 @@ exports[`About Modal Container Test isOpen 1`] = `
     tag="div"
   >
     <AboutModalBox
-      aria-describedby="ariaDescribedById"
-      aria-labelledby="ariaLablledbyId"
       className=""
     >
       <AboutModalBoxBrand
@@ -27,11 +25,11 @@ exports[`About Modal Container Test isOpen 1`] = `
         onClose={[Function]}
       />
       <AboutModalBoxHeader
-        id="ariaLablledbyId"
         productName="Product Name"
       />
       <AboutModalBoxContent
-        id="ariaDescribedById"
+        aria-describedby="ariaDescribedById"
+        aria-labelledby="ariaLablledbyId"
         noAboutModalBoxContentContainer={false}
         title="Test Modal Container title"
         trademark="Trademark and copyright information here"

packages/react-core/src/components/ApplicationLauncher/__tests__/__snapshots__/ApplicationLauncher.test.tsx.snap

@@ -127,8 +127,8 @@ exports[`ApplicationLauncher custom icon 1`] = `
       data-ouia-safe={true}
     >
       <DropdownToggle
+        aria-haspopup={true}
         aria-label="Application launcher"
-        ariaHasPopup={true}
         iconComponent={null}
         id="pf-toggle-id-5"
         isDisabled={false}
@@ -257,8 +257,8 @@ exports[`ApplicationLauncher custom icon 1`] = `
         }
       >
         <Toggle
+          aria-haspopup={true}
           aria-label="Application launcher"
-          ariaHasPopup={true}
           bubbleEvent={false}
           className=""
           id="pf-toggle-id-5"
@@ -882,8 +882,8 @@ exports[`ApplicationLauncher dropup + right aligned 1`] = `
       data-ouia-safe={true}
     >
       <DropdownToggle
+        aria-haspopup={true}
         aria-label="Application launcher"
-        ariaHasPopup={true}
         iconComponent={null}
         id="pf-toggle-id-3"
         isDisabled={false}
@@ -931,8 +931,8 @@ exports[`ApplicationLauncher dropup + right aligned 1`] = `
         }
       >
         <Toggle
+          aria-haspopup={true}
           aria-label="Application launcher"
-          ariaHasPopup={true}
           bubbleEvent={false}
           className=""
           id="pf-toggle-id-3"
@@ -1158,8 +1158,8 @@ exports[`ApplicationLauncher dropup 1`] = `
       data-ouia-safe={true}
     >
       <DropdownToggle
+        aria-haspopup={true}
         aria-label="Application launcher"
-        ariaHasPopup={true}
         iconComponent={null}
         id="pf-toggle-id-2"
         isDisabled={false}
@@ -1207,8 +1207,8 @@ exports[`ApplicationLauncher dropup 1`] = `
         }
       >
         <Toggle
+          aria-haspopup={true}
           aria-label="Application launcher"
-          ariaHasPopup={true}
           bubbleEvent={false}
           className=""
           id="pf-toggle-id-2"
@@ -1434,8 +1434,8 @@ exports[`ApplicationLauncher expanded 1`] = `
       data-ouia-safe={true}
     >
       <DropdownToggle
+        aria-haspopup={true}
         aria-label="Application launcher"
-        ariaHasPopup={true}
         iconComponent={null}
         id="pf-toggle-id-4"
         isDisabled={false}
@@ -1563,8 +1563,8 @@ exports[`ApplicationLauncher expanded 1`] = `
         }
       >
         <Toggle
+          aria-haspopup={true}
           aria-label="Application launcher"
-          ariaHasPopup={true}
           bubbleEvent={false}
           className=""
           id="pf-toggle-id-4"
@@ -2185,8 +2185,8 @@ exports[`ApplicationLauncher regular 1`] = `
       data-ouia-safe={true}
     >
       <DropdownToggle
+        aria-haspopup={true}
         aria-label="Application launcher"
-        ariaHasPopup={true}
         iconComponent={null}
         id="pf-toggle-id-0"
         isDisabled={false}
@@ -2234,8 +2234,8 @@ exports[`ApplicationLauncher regular 1`] = `
         }
       >
         <Toggle
+          aria-haspopup={true}
           aria-label="Application launcher"
-          ariaHasPopup={true}
           bubbleEvent={false}
           className=""
           id="pf-toggle-id-0"
@@ -2461,8 +2461,8 @@ exports[`ApplicationLauncher right aligned 1`] = `
       data-ouia-safe={true}
     >
       <DropdownToggle
+        aria-haspopup={true}
         aria-label="Application launcher"
-        ariaHasPopup={true}
         iconComponent={null}
         id="pf-toggle-id-1"
         isDisabled={false}
@@ -2510,8 +2510,8 @@ exports[`ApplicationLauncher right aligned 1`] = `
         }
       >
         <Toggle
+          aria-haspopup={true}
           aria-label="Application launcher"
-          ariaHasPopup={true}
           bubbleEvent={false}
           className=""
           id="pf-toggle-id-1"

packages/react-core/src/components/ChipGroup/Chip.tsx

@@ -88,7 +88,7 @@ export class Chip extends React.Component<ChipProps & OUIAProps, ChipState> {
             {!isReadOnly && (
               <ChipButton
                 onClick={onClick}
-                ariaLabel={closeBtnAriaLabel}
+                aria-label={closeBtnAriaLabel}
                 id={`remove_${randomId}`}
                 aria-labelledby={`remove_${randomId} ${randomId}`}
               >
@@ -110,7 +110,7 @@ export class Chip extends React.Component<ChipProps & OUIAProps, ChipState> {
         {!isReadOnly && (
           <ChipButton
             onClick={onClick}
-            ariaLabel={closeBtnAriaLabel}
+            aria-label={closeBtnAriaLabel}
             id={`remove_${randomId}`}
             aria-labelledby={`remove_${randomId} ${randomId}`}
           >

packages/react-core/src/components/ChipGroup/ChipButton.tsx

@@ -3,7 +3,7 @@ import { Button, ButtonProps } from '../Button';
 
 export interface ChipButtonProps extends ButtonProps {
   /** Aria label for chip button */
-  ariaLabel?: string;
+  'aria-label'?: string;
   /** Content rendered inside the chip item */
   children?: React.ReactNode;
   /** Additional classes added to the chip item */
@@ -13,7 +13,7 @@ export interface ChipButtonProps extends ButtonProps {
 }
 
 export const ChipButton: React.FunctionComponent<ChipButtonProps> = ({
-  ariaLabel = 'close',
+  'aria-label': ariaLabel = 'close',
   children = null,
   className = '',
   onClick = () => undefined,

packages/react-core/src/components/ChipGroup/__tests__/Chip.test.tsx

@@ -49,3 +49,4 @@ describe('Chip', () => {
     expect(view).toMatchSnapshot();
   });
 });
+

packages/react-core/src/components/ChipGroup/__tests__/Generated/__snapshots__/ChipButton.test.tsx.snap

@@ -2,7 +2,8 @@
 
 exports[`ChipButton should match snapshot (auto-generated) 1`] = `
 <Button
-  aria-label="'close'"
+  aria-label="close"
+  ariaLabel="'close'"
   className="''"
   onClick={[Function]}
   variant="plain"

packages/react-core/src/components/ChipGroup/__tests__/__snapshots__/Chip.test.tsx.snap

@@ -27,8 +27,8 @@ exports[`Chip closable 1`] = `
         Chip
       </span>
       <ChipButton
+        aria-label="close"
         aria-labelledby="remove_pf-random-id-1 pf-random-id-1"
-        ariaLabel="close"
         id="remove_pf-random-id-1"
         onClick={[Function]}
       >
@@ -116,8 +116,8 @@ exports[`Chip closable with tooltip 1`] = `
         1234567890123456789
       </span>
       <ChipButton
+        aria-label="close"
         aria-labelledby="remove_pf-random-id-2 pf-random-id-2"
-        ariaLabel="close"
         id="remove_pf-random-id-2"
         onClick={[Function]}
       >

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

@@ -38,9 +38,9 @@ export interface ClipboardCopyProps extends Omit<React.HTMLProps<HTMLDivElement>
   hoverTip?: string;
   /** Tooltip message to display when clicking the copy button */
   clickTip?: string;
-  /** Custom flag to show that the input requires an associated id or aria-label. */
+  /** Aria-label to use on the TextInput. */
   textAriaLabel?: string;
-  /** Custom flag to show that the toggle button requires an associated id or aria-label. */
+  /** Aria-label to use on the ClipboardCopyToggle. */
   toggleAriaLabel?: string;
   /** Flag to show if the input is read only. */
   isReadOnly?: boolean;

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

@@ -34,7 +34,7 @@ export interface ContextSelectorProps {
   screenReaderLabel?: string;
   /** Text that appears in the Context Selector Toggle */
   toggleText?: string;
-  /** aria-label for the Context Selector Search Button */
+  /** Aria-label for the Context Selector Search Button */
   searchButtonAriaLabel?: string;
   /** Value in the Search field */
   searchInputValue?: string;

packages/react-core/src/components/DataList/DataListToggle.tsx

@@ -26,8 +26,6 @@ export const DataListToggle: React.FunctionComponent<DataListToggleProps> = ({
   isExpanded = false,
   'aria-controls': ariaControls = '',
   'aria-label': ariaLabel = 'Details',
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  'aria-labelledby': ariaLabelledBy = '',
   rowid = '',
   id,
   ...props

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

@@ -102,7 +102,7 @@ describe('DataList', () => {
 
   test('Toggle default with aria label', () => {
     const view = shallow(
-      <DataListToggle aria-label="Toggle details for" aria-labelledby="ex-toggle2 ex-item2" id="ex-toggle2" />
+      <DataListToggle aria-label="Toggle details for" id="ex-toggle2" />
     );
 
     expect(view.find(Button).props()['aria-label']).toBe('Toggle details for');

packages/react-core/src/components/DataList/__tests__/Generated/__snapshots__/DataListToggle.test.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`DataListToggle should match snapshot (auto-generated) 1`] = `
 <div
+  aria-labelledby="''"
   className="pf-c-data-list__item-control ''"
 >
   <div