add aria-label type

Author: broccolinisoup

src/UnderlineNav2/UnderlineNav.test.tsx

@@ -54,7 +54,7 @@ const ResponsiveUnderlineNav = ({
     {navigation: 'Security', icon: ShieldLockIcon}
   ]
   return (
-    <UnderlineNav ariaLabel="Repository" loadingCounters={loadingCounters}>
+    <UnderlineNav aria-label="Repository" loadingCounters={loadingCounters}>
       {items.map(item => (
         <UnderlineNav.Item
           key={item.navigation}
@@ -91,7 +91,7 @@ describe('UnderlineNav', () => {
   it('fires 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>

src/UnderlineNav2/UnderlineNav.tsx

@@ -26,7 +26,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
@@ -157,7 +157,7 @@ export const UnderlineNav = forwardRef(
     {
       as = 'nav',
       align,
-      ariaLabel = 'Navigation',
+      'aria-label': ariaLabel = 'Navigation',
       sx: sxProp = {},
       afterSelect,
       variant = 'default',

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}