aria-label improvements

primer · Oct 10, 2022 · ed92434 · ed92434
1 parent 4b27d49
commit ed92434
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 9 deletions.
diff --git a/docs/content/drafts/UnderlineNav2.mdx b/docs/content/drafts/UnderlineNav2.mdx
@@ -16,7 +16,7 @@ import {UnderlineNav} from '@primer/react/drafts'
 ### Simple
 
 ```jsx live drafts
-<UnderlineNav ariaLabel="Repository">
+<UnderlineNav aria-label="Repository">
   <UnderlineNav.Item selected>Item 1</UnderlineNav.Item>
   <UnderlineNav.Item>Item 2</UnderlineNav.Item>
   <UnderlineNav.Item>Item 3</UnderlineNav.Item>
@@ -26,7 +26,7 @@ import {UnderlineNav} from '@primer/react/drafts'
 ### With Icons
 
 ```jsx live drafts
-<UnderlineNav ariaLabel="Repository">
+<UnderlineNav aria-label="Repository">
   <UnderlineNav.Item selected icon={CodeIcon}>
     Code
   </UnderlineNav.Item>
@@ -53,7 +53,7 @@ When overflow occurs, the component first hides icons if present to optimize for
 #### Items Without Icons
 
 ```jsx live drafts
-<UnderlineNav ariaLabel="Repository">
+<UnderlineNav aria-label="Repository">
   <UnderlineNav.Item selected icon={CodeIcon}>
     Code
   </UnderlineNav.Item>
@@ -83,7 +83,7 @@ When overflow occurs, the component first hides icons if present to optimize for
 If there is still overflow, the component will behave depending on the pointer.
 
 ```jsx live drafts
-<UnderlineNav ariaLabel="Repository">
+<UnderlineNav aria-label="Repository">
   <UnderlineNav.Item selected icon={CodeIcon}>
     Code
   </UnderlineNav.Item>

diff --git a/src/UnderlineNav2/UnderlineNav.tsx b/src/UnderlineNav2/UnderlineNav.tsx
@@ -157,7 +157,7 @@ export const UnderlineNav = forwardRef(
     {
       as = 'nav',
       align,
-      'aria-label': ariaLabel = 'Navigation',
+      'aria-label': ariaLabel,
       sx: sxProp = {},
       afterSelect,
       variant = 'default',
@@ -330,6 +330,11 @@ export const UnderlineNav = forwardRef(
       focusedLink?.current && isCoarsePointer && scrollLinkIntoView(focusedLink)
     }, [focusedLink, isCoarsePointer])
 
+    if (!ariaLabel) {
+      // eslint-disable-next-line no-console
+      console.warn('Use the `aria-label` prop to provide an accessible label for assistive technology')
+    }
+
     return (
       <UnderlineNavContext.Provider
         value={{
@@ -359,7 +364,7 @@ export const UnderlineNav = forwardRef(
               type="left"
               show={scrollValues.scrollLeft > 0}
               onScrollWithButton={onScrollWithButton}
-              ariaLabel={ariaLabel}
+              aria-label={ariaLabel}
             />
           )}
 
@@ -411,7 +416,7 @@ export const UnderlineNav = forwardRef(
               type="right"
               show={scrollValues.scrollRight > 0}
               onScrollWithButton={onScrollWithButton}
-              ariaLabel={ariaLabel}
+              aria-label={ariaLabel}
             />
           )}
         </Box>

diff --git a/src/UnderlineNav2/UnderlineNavArrowButton.tsx b/src/UnderlineNav2/UnderlineNavArrowButton.tsx
@@ -10,12 +10,12 @@ const ArrowButton = ({
   type,
   show,
   onScrollWithButton,
-  ariaLabel = 'navigation'
+  'aria-label': ariaLabel
 }: {
   type: 'left' | 'right'
   show: boolean
   onScrollWithButton: OnScrollWithButtonEventType
-  ariaLabel: string
+  'aria-label'?: React.AriaAttributes['aria-label']
 }) => {
   const leftBtnRef = React.useRef<HTMLButtonElement>(null)
   const rightBtnRef = React.useRef<HTMLButtonElement>(null)