diff --git a/docs/content/drafts/UnderlineNav2.mdx b/docs/content/drafts/UnderlineNav2.mdx index b2b81acaadc..745ae4ccfc6 100644 --- 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 - + Item 1 Item 2 Item 3 @@ -26,7 +26,7 @@ import {UnderlineNav} from '@primer/react/drafts' ### With Icons ```jsx live drafts - + Code @@ -53,7 +53,7 @@ When overflow occurs, the component first hides icons if present to optimize for #### Items Without Icons ```jsx live drafts - + Code @@ -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 - + Code diff --git a/src/UnderlineNav2/UnderlineNav.tsx b/src/UnderlineNav2/UnderlineNav.tsx index c8710d1737f..17ef73925f4 100644 --- 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 ( 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} /> )} diff --git a/src/UnderlineNav2/UnderlineNavArrowButton.tsx b/src/UnderlineNav2/UnderlineNavArrowButton.tsx index 9f92755d948..a383035f3ef 100644 --- 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(null) const rightBtnRef = React.useRef(null)