[material-ui][docs] Add aria-current for nav tabs demo (mui#39594)

Co-authored-by: siriwatknp <[email protected]> Co-authored-by: Danilo Leal <[email protected]>
mnajdova · Dec 22, 2023 · 9e798d8 · 9e798d8
1 parent 5d2efe9
commit 9e798d8
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 3 deletions.
diff --git a/docs/data/material/components/tabs/NavTabs.js b/docs/data/material/components/tabs/NavTabs.js
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import Box from '@mui/material/Box';
 import Tabs from '@mui/material/Tabs';
 import Tab from '@mui/material/Tab';
@@ -27,11 +28,16 @@ function LinkTab(props) {
           event.preventDefault();
         }
       }}
+      aria-current={props.selected && 'page'}
       {...props}
     />
   );
 }
 
+LinkTab.propTypes = {
+  selected: PropTypes.bool,
+};
+
 export default function NavTabs() {
   const [value, setValue] = React.useState(0);
 
@@ -47,7 +53,12 @@ export default function NavTabs() {
 
   return (
     <Box sx={{ width: '100%' }}>
-      <Tabs value={value} onChange={handleChange} aria-label="nav tabs example">
+      <Tabs
+        value={value}
+        onChange={handleChange}
+        aria-label="nav tabs example"
+        role="navigation"
+      >
         <LinkTab label="Page One" href="/drafts" />
         <LinkTab label="Page Two" href="/trash" />
         <LinkTab label="Page Three" href="/spam" />

diff --git a/docs/data/material/components/tabs/NavTabs.tsx b/docs/data/material/components/tabs/NavTabs.tsx
@@ -22,6 +22,7 @@ function samePageLinkNavigation(
 interface LinkTabProps {
   label?: string;
   href?: string;
+  selected?: boolean;
 }
 
 function LinkTab(props: LinkTabProps) {
@@ -34,6 +35,7 @@ function LinkTab(props: LinkTabProps) {
           event.preventDefault();
         }
       }}
+      aria-current={props.selected && 'page'}
       {...props}
     />
   );
@@ -57,7 +59,12 @@ export default function NavTabs() {
 
   return (
     <Box sx={{ width: '100%' }}>
-      <Tabs value={value} onChange={handleChange} aria-label="nav tabs example">
+      <Tabs
+        value={value}
+        onChange={handleChange}
+        aria-label="nav tabs example"
+        role="navigation"
+      >
         <LinkTab label="Page One" href="/drafts" />
         <LinkTab label="Page Two" href="/trash" />
         <LinkTab label="Page Three" href="/spam" />

diff --git a/docs/data/material/components/tabs/NavTabs.tsx.preview b/docs/data/material/components/tabs/NavTabs.tsx.preview
@@ -1,4 +1,9 @@
-<Tabs value={value} onChange={handleChange} aria-label="nav tabs example">
+<Tabs
+  value={value}
+  onChange={handleChange}
+  aria-label="nav tabs example"
+  role="navigation"
+>
   <LinkTab label="Page One" href="/drafts" />
   <LinkTab label="Page Two" href="/trash" />
   <LinkTab label="Page Three" href="/spam" />