From 9e798d8c92457e7599e2d36fbc55c352b9660725 Mon Sep 17 00:00:00 2001
From: kimia hajizadeh <41937928+Kimzify@users.noreply.github.com>
Date: Fri, 22 Dec 2023 06:40:20 -0500
Subject: [PATCH] [material-ui][docs] Add aria-current for nav tabs demo
 (#39594)

Co-authored-by: siriwatknp <siriwatkunaporn@gmail.com>
Co-authored-by: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
---
 docs/data/material/components/tabs/NavTabs.js       | 13 ++++++++++++-
 docs/data/material/components/tabs/NavTabs.tsx      |  9 ++++++++-
 .../material/components/tabs/NavTabs.tsx.preview    |  7 ++++++-
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/docs/data/material/components/tabs/NavTabs.js b/docs/data/material/components/tabs/NavTabs.js
index 6a5419209c4739..288b734b71318e 100644
--- 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
index a5f897d587df7a..525feabea0698a 100644
--- 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
index 6a6f7623c3adc4..586cccfc1bfee0 100644
--- 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" />