Fix: Update prop names to match aria labels

modules/_labs/color-picker/react/lib/ColorPicker.tsx

@@ -29,7 +29,7 @@ export interface ColorPickerProps extends React.HTMLAttributes<HTMLDivElement> {
    */
   showCustomHexInput?: boolean;
   /**
-   * The label text of the custom hex input.
+   * The label text of the custom hex input. This is also used as the aria-label
    * @default 'Custom Hex Color'
    */
   customHexInputLabel?: string;

modules/_labs/drawer/react/lib/DrawerHeader.tsx

@@ -17,7 +17,7 @@ export interface DrawerHeaderProps extends React.HTMLAttributes<HTMLDivElement>
    * The `aria-label` for the DrawHeader close button. Useful for i18n.
    * @default Close
    */
-  closeIconLabel?: string;
+  closeIconAriaLabel?: string;
   /**
    * The background color of the DrawerHeader.
    */
@@ -74,7 +74,7 @@ const CloseButton = styled(IconButton)({
 export default class DrawerHeader extends React.Component<DrawerHeaderProps, {}> {
   public render() {
     const {
-      closeIconLabel = 'Close',
+      closeIconAriaLabel = 'Close',
       headerColor = colors.soap100,
       borderColor = colors.soap500,
       inverse = false,
@@ -89,11 +89,11 @@ export default class DrawerHeader extends React.Component<DrawerHeaderProps, {}>
         <HeaderTitle id={id} inverse={inverse} title={title}>
           {title}
         </HeaderTitle>
-        {onClose && closeIconLabel && (
+        {onClose && closeIconAriaLabel && (
           <CloseButton
             variant={inverse ? IconButtonVariant.Inverse : IconButtonVariant.Plain}
             onClick={onClose}
-            aria-label={closeIconLabel}
+            aria-label={closeIconAriaLabel}
             icon={xIcon}
           />
         )}

modules/_labs/drawer/react/stories/stories.tsx

@@ -64,7 +64,7 @@ storiesOf('Labs|Drawer/React', module)
         <Drawer
           header={
             <DrawerHeader
-              closeIconLabel={'Close'}
+              closeIconAriaLabel={'Close'}
               onClose={action('onClose callback')}
               title={'Drawer Header'}
             />
@@ -94,7 +94,7 @@ storiesOf('Labs|Drawer/React', module)
         <Drawer
           header={
             <DrawerHeader
-              closeIconLabel={'Close'}
+              closeIconAriaLabel={'Close'}
               headerColor={text(headerColor, headerColorDefaultValue)}
               inverse={boolean(showInverselabel, showInverseIconDefaultValue)}
               onClose={action('onClose callback')}
@@ -120,7 +120,7 @@ storiesOf('Labs|Drawer/React', module)
           header={
             <DrawerHeader
               id={'accessibleDrawer'}
-              closeIconLabel={'Close'}
+              closeIconAriaLabel={'Close'}
               headerColor={text(headerColor, headerColorDefaultValue)}
               inverse={boolean(showInverselabel, showInverseIconDefaultValue)}
               onClose={action('onClose callback')}

modules/_labs/header/react/lib/parts/SearchBar.tsx

@@ -59,7 +59,7 @@ export interface SearchBarProps extends GrowthBehavior, React.FormHTMLAttributes
    * The screenreader label text for the SearchBar submit button.
    * @default Search
    */
-  submitLabel?: string;
+  submitAriaLabel?: string;
   /**
    * The screenreader label text for the SearchBar clear button.
    * @default Reset Search Form
@@ -69,12 +69,12 @@ export interface SearchBarProps extends GrowthBehavior, React.FormHTMLAttributes
    * The screenreader label text for the button to open the collapsed SearchBar.
    * @default Open Search
    */
-  openButtonLabel?: string;
+  openButtonAriaLabel?: string;
   /**
    * The screenreader label text for the button to close the open SearchBar.
    * @default Cancel
    */
-  closeButtonLabel?: string;
+  closeButtonAriaLabel?: string;
   /**
    * If true, render the SearchBar with a button to clear the text input.
    * @default true
@@ -377,9 +377,9 @@ export class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
       clearButtonAriaLabel = 'Reset Search Form',
       placeholder = 'Search',
       inputLabel = 'Search',
-      submitLabel = 'Search',
-      openButtonLabel = 'Open Search',
-      closeButtonLabel = 'Cancel',
+      submitAriaLabel = 'Search',
+      openButtonAriaLabel = 'Open Search',
+      closeButtonAriaLabel = 'Cancel',
       showClearButton = true,
       grow,
       onSubmit,
@@ -406,15 +406,15 @@ export class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
       >
         <SearchContainer>
           <SearchIcon
-            aria-label={submitLabel}
+            aria-label={submitAriaLabel}
             icon={searchIcon}
             isCollapsed={isCollapsed}
             variant={this.getIconButtonType()}
             type="submit"
             isHidden={!!isCollapsed && !this.state.showForm}
           />
           <SearchIcon
-            aria-label={openButtonLabel}
+            aria-label={openButtonAriaLabel}
             icon={searchIcon}
             isCollapsed={isCollapsed}
             variant={this.getIconButtonType()}
@@ -455,7 +455,7 @@ export class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
             </SearchCombobox>
           </SearchField>
           <CloseButton
-            aria-label={closeButtonLabel}
+            aria-label={closeButtonAriaLabel}
             icon={xIcon}
             isCollapsed={isCollapsed}
             variant={IconButton.Variant.Plain}

modules/_labs/header/react/spec/SearchBar.spec.tsx

@@ -34,7 +34,7 @@ describe('Header Search', () => {
   test('Searching with icon should call callback', async () => {
     const label = `submitLabel`;
     const {findByLabelText} = render(
-      <SearchBar onSubmit={cb} initialValue="world" submitLabel={label} />
+      <SearchBar onSubmit={cb} initialValue="world" submitAriaLabel={label} />
     );
 
     fireEvent.click(await findByLabelText(label));
@@ -83,8 +83,8 @@ describe('Header Search', () => {
       <SearchBar
         onSubmit={cb}
         inputLabel={inputLabel}
-        openButtonLabel={openLabel}
-        closeButtonLabel={closeLabel}
+        openButtonAriaLabel={openLabel}
+        closeButtonAriaLabel={closeLabel}
         isCollapsed={true}
       />
     );

modules/_labs/menu/react/lib/Menu.tsx

@@ -39,7 +39,7 @@ export interface MenuProps extends GrowthBehavior, React.HTMLAttributes<HTMLULis
   /**
    * The HTML `id` of the element that labels the Menu. Often used with menu buttons.
    */
-  labeledBy?: string;
+  'aria-labelledby'?: string;
 }
 
 export interface MenuState {
@@ -103,7 +103,7 @@ export default class Menu extends React.Component<MenuProps, MenuState> {
       id = this.id,
       isOpen = true,
       children,
-      labeledBy,
+      'aria-labelledby': ariaLabelledby,
       grow,
       width,
       onSelect,
@@ -124,7 +124,7 @@ export default class Menu extends React.Component<MenuProps, MenuState> {
           role="menu"
           tabIndex={0}
           id={id}
-          aria-labelledby={labeledBy}
+          aria-labelledby={ariaLabelledby}
           aria-activedescendant={`${id}-${selectedItemIndex}`}
           onKeyDown={this.handleKeyboardShortcuts}
           ref={this.menuRef}

modules/_labs/menu/react/spec/Menu.spec.tsx

@@ -220,7 +220,7 @@ describe('Menu Accessibility', () => {
 
   test('labeledBy menu should have aria-labelledby set', () => {
     const label: string = 'myLabel';
-    const component = mount(<Menu labeledBy={label} />);
+    const component = mount(<Menu aria-labelledby={label} />);
     expect(
       component
         .find('ul')

modules/_labs/menu/react/stories/stories.tsx

@@ -117,7 +117,7 @@ class ControlledMenu extends React.Component<{}, ControlledMenuState> {
                 isOpen={isOpen}
                 onClose={this.handleClose}
                 id={this.menuId}
-                labeledBy={this.controlButtonId}
+                aria-labelledby={this.controlButtonId}
               >
                 {createMenuItems().map(buildItem)}
               </Menu>

modules/avatar/react/lib/Avatar.tsx

@@ -22,7 +22,7 @@ export interface AvatarLocalProps {
    */
   size?: SystemIconCircleSize | number;
   /**
-   * The alt text of the Avatar image.
+   * The alt text of the Avatar image. This prop is also used for the aria-label
    * @default Avatar
    */
   altText?: string;

modules/banner/react/lib/Banner.tsx

@@ -30,7 +30,7 @@ export interface BannerProps extends Themeable, React.ButtonHTMLAttributes<HTMLB
    */
   error?: ErrorType;
   /**
-   * The text of the Banner action.
+   * The text of the Banner action. This prop is also used as the aria-label for the action in the banner
    * @default 'View All'
    */
   actionText?: string;

modules/button/react/lib/IconButton.tsx

@@ -47,6 +47,7 @@ const IconButton = ({
   size = 'medium',
   buttonRef,
   onToggleChange,
+  'aria-label': iconArialabel,
   icon,
   toggled,
   children,
@@ -91,6 +92,7 @@ const IconButton = ({
       fillIcon={toggled}
       extraStyles={containerStyles}
       aria-pressed={toggled}
+      aria-label={iconArialabel}
       {...elemProps}
     >
       {icon ? <SystemIcon icon={icon} /> : children}

modules/popup/react/lib/Popup.tsx

@@ -61,7 +61,7 @@ export interface PopupProps extends React.HTMLAttributes<HTMLDivElement> {
    * The `aria-label` for the Popup close button.
    * @default Close
    */
-  closeLabel?: string;
+  closeButtonAriaLabel?: string;
 }
 
 const closeIconSpacing = spacing.xs;
@@ -118,7 +118,7 @@ export default class Popup extends React.Component<PopupProps> {
     const {
       padding = Popup.Padding.l,
       closeIconSize = 'medium',
-      closeLabel = 'Close',
+      closeButtonAriaLabel = 'Close',
       transformOrigin = {
         horizontal: 'center',
         vertical: 'top',
@@ -149,8 +149,7 @@ export default class Popup extends React.Component<PopupProps> {
               size={closeIconSize}
               onClick={handleClose}
               icon={xIcon}
-              title={closeLabel}
-              aria-label={closeLabel}
+              aria-label={closeButtonAriaLabel}
             />
           </CloseIconContainer>
         )}

modules/side-panel/react/lib/SidePanel.tsx

@@ -53,12 +53,12 @@ export interface SidePanelProps extends React.HTMLAttributes<HTMLDivElement> {
    * The `aria-label` that describes closing the navigation.
    * @default 'close navigation'
    */
-  closeNavigationLabel?: string;
+  closeNavigationAriaLabel?: string;
   /**
    * The `aria-label` that describes opening the navigation.
    * @default 'open navigation'
    */
-  openNavigationLabel?: string;
+  openNavigationAriaLabel?: string;
 }
 
 export interface SidePanelState {
@@ -188,8 +188,8 @@ export default class SidePanel extends React.Component<SidePanelProps, SidePanel
   public render() {
     const {
       backgroundColor = SidePanelBackgroundColor.White,
-      openNavigationLabel = 'open navigation',
-      closeNavigationLabel = 'close navigation',
+      openNavigationAriaLabel = 'open navigation',
+      closeNavigationAriaLabel = 'close navigation',
       openDirection = SidePanelOpenDirection.Left,
       breakpoint = 768,
       openWidth = 300,
@@ -219,7 +219,7 @@ export default class SidePanel extends React.Component<SidePanelProps, SidePanel
           {onToggleClick && (
             <ToggleButton
               openDirection={openDirection}
-              aria-label={open ? closeNavigationLabel : openNavigationLabel}
+              aria-label={open ? closeNavigationAriaLabel : openNavigationAriaLabel}
               toggled={false}
               size={IconButton.Size.Small}
               onClick={this.onToggleClick}

modules/skeleton/react/lib/skeleton.tsx

@@ -8,7 +8,7 @@ export interface SkeletonProps {
    * The `aria-label` that describes loading.
    * @default 'Loading'
    */
-  loadingLabel?: string;
+  'aria-label'?: string;
 }
 
 const TRANSPARENCY_POSITION = 45;
@@ -62,14 +62,14 @@ export default class Skeleton extends React.Component<SkeletonProps, SkeletonSta
   };
 
   render(): React.ReactNode {
-    const {loadingLabel = 'Loading', children, ...elemProps} = this.props;
+    const {'aria-label': loadingAriaLabel = 'Loading', children, ...elemProps} = this.props;
     const {width, height} = this.state;
     const diagonal = Math.sqrt(width * width + height * height) + WHITE_SHEEN_WIDTH;
     const topPosition = (-1 * (diagonal - height)) / 2;
 
     return (
       <SkeletonContainer
-        aria-label={loadingLabel}
+        aria-label={loadingAriaLabel}
         aria-live={'polite'}
         role={'status'}
         ref={this.ref}