add aria-label type

primer · Oct 6, 2022 · fbd37fd · fbd37fd
1 parent 0661502
commit fbd37fd
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 13 deletions.
diff --git a/src/UnderlineNav2/UnderlineNav.test.tsx b/src/UnderlineNav2/UnderlineNav.test.tsx
@@ -28,7 +28,7 @@ Object.defineProperty(window.Element.prototype, 'scrollTo', {
 describe('UnderlineNav', () => {
   test('selected nav', () => {
     const {getByText} = render(
-      <UnderlineNav ariaLabel="Test Navigation">
+      <UnderlineNav aria-label="Test Navigation">
         <UnderlineNav.Item selected>Item 1</UnderlineNav.Item>
         <UnderlineNav.Item>Item 2</UnderlineNav.Item>
         <UnderlineNav.Item>Item 3</UnderlineNav.Item>
@@ -40,7 +40,7 @@ describe('UnderlineNav', () => {
   })
   test('basic nav functionality', () => {
     const {container} = render(
-      <UnderlineNav ariaLabel="Test Navigation">
+      <UnderlineNav aria-label="Test Navigation">
         <UnderlineNav.Item selected>Item 1</UnderlineNav.Item>
         <UnderlineNav.Item>Item 2</UnderlineNav.Item>
         <UnderlineNav.Item>Item 3</UnderlineNav.Item>
@@ -53,7 +53,7 @@ describe('UnderlineNav', () => {
   })
   test('with icons', () => {
     const {container} = render(
-      <UnderlineNav ariaLabel="Test Navigation">
+      <UnderlineNav aria-label="Test Navigation">
         <UnderlineNav.Item icon={CodeIcon}>Code</UnderlineNav.Item>
         <UnderlineNav.Item icon={EyeIcon} counter={6}>
           Issues
@@ -67,7 +67,7 @@ describe('UnderlineNav', () => {
   test('should fire onSelect on click and keypress', async () => {
     const onSelect = jest.fn()
     const {getByText} = render(
-      <UnderlineNav ariaLabel="Test Navigation">
+      <UnderlineNav aria-label="Test Navigation">
         <UnderlineNav.Item onSelect={onSelect}>Item 1</UnderlineNav.Item>
         <UnderlineNav.Item onSelect={onSelect}>Item 2</UnderlineNav.Item>
         <UnderlineNav.Item onSelect={onSelect}>Item 3</UnderlineNav.Item>
@@ -81,7 +81,7 @@ describe('UnderlineNav', () => {
   })
   test('respect counter prop', () => {
     const {getByText} = render(
-      <UnderlineNav ariaLabel="Test Navigation" align="right">
+      <UnderlineNav aria-label="Test Navigation" align="right">
         <UnderlineNav.Item counter={8} selected>
           Item 1
         </UnderlineNav.Item>
@@ -96,7 +96,7 @@ describe('UnderlineNav', () => {
   })
   test('respect loadingCounters prop', () => {
     const {getByText} = render(
-      <UnderlineNav ariaLabel="Test Navigation" loadingCounters={true}>
+      <UnderlineNav aria-label="Test Navigation" loadingCounters={true}>
         <UnderlineNav.Item selected counter={4}>
           Item 1
         </UnderlineNav.Item>

diff --git a/src/UnderlineNav2/UnderlineNav.tsx b/src/UnderlineNav2/UnderlineNav.tsx
@@ -18,7 +18,7 @@ import styled from 'styled-components'
 import {LoadingCounter} from './LoadingCounter'
 
 export type UnderlineNavProps = {
-  ariaLabel?: string
+  'aria-label'?: React.AriaAttributes['aria-label']
   as?: React.ElementType
   align?: 'right'
   sx?: SxProp
@@ -149,7 +149,7 @@ export const UnderlineNav = forwardRef(
     {
       as = 'nav',
       align,
-      ariaLabel = 'Navigation',
+      'aria-label': ariaLabel = 'Navigation',
       sx: sxProp = {},
       afterSelect,
       variant = 'default',

diff --git a/src/UnderlineNav2/examples.stories.tsx b/src/UnderlineNav2/examples.stories.tsx
@@ -33,7 +33,7 @@ export default {
 
 export const DefaultNav = () => {
   return (
-    <UnderlineNav ariaLabel="Repository">
+    <UnderlineNav aria-label="Repository">
       <UnderlineNav.Item selected>Code</UnderlineNav.Item>
       <UnderlineNav.Item>Issues</UnderlineNav.Item>
       <UnderlineNav.Item>Pull Requests</UnderlineNav.Item>
@@ -43,7 +43,7 @@ export const DefaultNav = () => {
 
 export const withIcons = () => {
   return (
-    <UnderlineNav ariaLabel="Repository with icons">
+    <UnderlineNav aria-label="Repository with icons">
       <UnderlineNav.Item icon={CodeIcon}>Code</UnderlineNav.Item>
       <UnderlineNav.Item icon={EyeIcon} counter={6}>
         Issues
@@ -61,7 +61,7 @@ export const withIcons = () => {
 
 export const withCounterLabels = () => {
   return (
-    <UnderlineNav ariaLabel="Repository with counters">
+    <UnderlineNav aria-label="Repository with counters">
       <UnderlineNav.Item selected icon={CodeIcon}>
         Code
       </UnderlineNav.Item>
@@ -88,7 +88,7 @@ export const InternalResponsiveNav = () => {
   const [selectedIndex, setSelectedIndex] = React.useState<number | null>(1)
 
   return (
-    <UnderlineNav ariaLabel="Repository">
+    <UnderlineNav aria-label="Repository">
       {items.map((item, index) => (
         <UnderlineNav.Item
           key={item.navigation}
@@ -108,7 +108,7 @@ export const CountersLoadingState = () => {
   const [selectedIndex, setSelectedIndex] = React.useState<number | null>(1)
 
   return (
-    <UnderlineNav ariaLabel="Repository with loading counters" loadingCounters={true}>
+    <UnderlineNav aria-label="Repository with loading counters" loadingCounters={true}>
       {items.map((item, index) => (
         <UnderlineNav.Item
           key={item.navigation}