From 66587042f3e7fd93dc0d3a6bec28b8e677812fc7 Mon Sep 17 00:00:00 2001
From: zanivan <victorzanivan@gmail.com>
Date: Wed, 29 May 2024 14:16:34 -0300
Subject: [PATCH] Danilo's feedback

---
 .../templates/dashboard/components/ChartUserByCountry.js    | 2 +-
 .../templates/dashboard/components/ChartUserByCountry.tsx   | 2 +-
 .../templates/dashboard/components/CustomizedTreeView.js    | 2 +-
 .../templates/dashboard/components/CustomizedTreeView.tsx   | 2 +-
 .../templates/dashboard/components/MenuButton.js            | 5 ++---
 .../templates/dashboard/components/MenuButton.tsx           | 4 +---
 .../templates/dashboard/components/Navbar.js                | 2 +-
 .../templates/dashboard/components/Navbar.tsx               | 2 +-
 .../templates/dashboard/components/OptionsMenu.js           | 2 +-
 .../templates/dashboard/components/OptionsMenu.tsx          | 2 +-
 .../templates/dashboard/components/PageViewsBarChart.js     | 2 +-
 .../templates/dashboard/components/PageViewsBarChart.tsx    | 2 +-
 .../templates/dashboard/components/PageViewsChart.js        | 2 +-
 .../templates/dashboard/components/PageViewsChart.tsx       | 2 +-
 .../templates/dashboard/components/ToggleColorMode.js       | 6 +-----
 .../templates/dashboard/components/ToggleColorMode.tsx      | 6 +-----
 16 files changed, 17 insertions(+), 28 deletions(-)

diff --git a/docs/data/material/getting-started/templates/dashboard/components/ChartUserByCountry.js b/docs/data/material/getting-started/templates/dashboard/components/ChartUserByCountry.js
index 5f26494310a1b8..74faf1e5f5059b 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/ChartUserByCountry.js
+++ b/docs/data/material/getting-started/templates/dashboard/components/ChartUserByCountry.js
@@ -100,7 +100,7 @@ export default function ChartUserByCountry() {
   return (
     <Card variant="outlined" sx={{ pb: '8px' }}>
       <CardContent>
-        <Typography variant="subtitle2" component="p">
+        <Typography component="h2" variant="subtitle2">
           Users by country
         </Typography>
         <Box sx={{ display: 'flex', alignItems: 'center' }}>
diff --git a/docs/data/material/getting-started/templates/dashboard/components/ChartUserByCountry.tsx b/docs/data/material/getting-started/templates/dashboard/components/ChartUserByCountry.tsx
index 772e8eb53c0d84..c4e26d798478e2 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/ChartUserByCountry.tsx
+++ b/docs/data/material/getting-started/templates/dashboard/components/ChartUserByCountry.tsx
@@ -103,7 +103,7 @@ export default function ChartUserByCountry() {
   return (
     <Card variant="outlined" sx={{ pb: '8px' }}>
       <CardContent>
-        <Typography variant="subtitle2" component="p">
+        <Typography component="h2" variant="subtitle2">
           Users by country
         </Typography>
         <Box sx={{ display: 'flex', alignItems: 'center' }}>
diff --git a/docs/data/material/getting-started/templates/dashboard/components/CustomizedTreeView.js b/docs/data/material/getting-started/templates/dashboard/components/CustomizedTreeView.js
index 3e0ae69ba1f242..6b6bf4b7c60e23 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/CustomizedTreeView.js
+++ b/docs/data/material/getting-started/templates/dashboard/components/CustomizedTreeView.js
@@ -206,7 +206,7 @@ export default function CustomizedTreeView() {
       sx={{ display: 'flex', flexDirection: 'column', gap: '8px' }}
     >
       <CardContent>
-        <Typography variant="subtitle2" component="p">
+        <Typography component="h2" variant="subtitle2">
           Product tree
         </Typography>
         <RichTreeView
diff --git a/docs/data/material/getting-started/templates/dashboard/components/CustomizedTreeView.tsx b/docs/data/material/getting-started/templates/dashboard/components/CustomizedTreeView.tsx
index a6b21bf6da9831..c01901603348ea 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/CustomizedTreeView.tsx
+++ b/docs/data/material/getting-started/templates/dashboard/components/CustomizedTreeView.tsx
@@ -187,7 +187,7 @@ export default function CustomizedTreeView() {
       sx={{ display: 'flex', flexDirection: 'column', gap: '8px' }}
     >
       <CardContent>
-        <Typography variant="subtitle2" component="p">
+        <Typography component="h2" variant="subtitle2">
           Product tree
         </Typography>
         <RichTreeView
diff --git a/docs/data/material/getting-started/templates/dashboard/components/MenuButton.js b/docs/data/material/getting-started/templates/dashboard/components/MenuButton.js
index 9ad4fd17ecdd94..d324b3ba822816 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/MenuButton.js
+++ b/docs/data/material/getting-started/templates/dashboard/components/MenuButton.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import Badge from '@mui/material/Badge';
 import IconButton from '@mui/material/IconButton';
 
-function MenuButton({ showBadge = false, ariaLabel, ...props }) {
+function MenuButton({ showBadge = false, ...props }) {
   return (
     <Badge
       color="error"
@@ -13,13 +13,12 @@ function MenuButton({ showBadge = false, ariaLabel, ...props }) {
         '& .MuiBadge-badge': { right: 2, top: 2 },
       }}
     >
-      <IconButton size="small" aria-label={ariaLabel} {...props} />
+      <IconButton size="small" {...props} />
     </Badge>
   );
 }
 
 MenuButton.propTypes = {
-  ariaLabel: PropTypes.string,
   showBadge: PropTypes.bool,
 };
 
diff --git a/docs/data/material/getting-started/templates/dashboard/components/MenuButton.tsx b/docs/data/material/getting-started/templates/dashboard/components/MenuButton.tsx
index 7dc9eb70bfb6c5..35453496a9181a 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/MenuButton.tsx
+++ b/docs/data/material/getting-started/templates/dashboard/components/MenuButton.tsx
@@ -4,12 +4,10 @@ import IconButton, { IconButtonProps } from '@mui/material/IconButton';
 
 interface StyledMenuButtonProps extends IconButtonProps {
   showBadge?: boolean;
-  ariaLabel?: string;
 }
 
 export default function MenuButton({
   showBadge = false,
-  ariaLabel,
   ...props
 }: StyledMenuButtonProps) {
   return (
@@ -21,7 +19,7 @@ export default function MenuButton({
         '& .MuiBadge-badge': { right: 2, top: 2 },
       }}
     >
-      <IconButton size="small" aria-label={ariaLabel} {...props} />
+      <IconButton size="small" {...props} />
     </Badge>
   );
 }
diff --git a/docs/data/material/getting-started/templates/dashboard/components/Navbar.js b/docs/data/material/getting-started/templates/dashboard/components/Navbar.js
index 873b4bb35bc8d1..00beeeb128875f 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/Navbar.js
+++ b/docs/data/material/getting-started/templates/dashboard/components/Navbar.js
@@ -100,7 +100,7 @@ function Navbar({ mode, toggleColorMode }) {
         >
           <NavbarBreadcrumbs />
           <Stack direction="row" gap={1}>
-            <MenuButton showBadge ariaLabel="Notification menu button">
+            <MenuButton showBadge aria-label="Open notifications">
               <NotificationsRoundedIcon />
             </MenuButton>
             <OptionsMenu />
diff --git a/docs/data/material/getting-started/templates/dashboard/components/Navbar.tsx b/docs/data/material/getting-started/templates/dashboard/components/Navbar.tsx
index d5c7d2e55223c7..30daae98fb04e3 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/Navbar.tsx
+++ b/docs/data/material/getting-started/templates/dashboard/components/Navbar.tsx
@@ -102,7 +102,7 @@ export default function Navbar({ mode, toggleColorMode }: NavBarProps) {
         >
           <NavbarBreadcrumbs />
           <Stack direction="row" gap={1}>
-            <MenuButton showBadge ariaLabel="Notification menu button">
+            <MenuButton showBadge aria-label="Open notifications">
               <NotificationsRoundedIcon />
             </MenuButton>
             <OptionsMenu />
diff --git a/docs/data/material/getting-started/templates/dashboard/components/OptionsMenu.js b/docs/data/material/getting-started/templates/dashboard/components/OptionsMenu.js
index 4546f9e041cef1..292b4dcdc0f6fa 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/OptionsMenu.js
+++ b/docs/data/material/getting-started/templates/dashboard/components/OptionsMenu.js
@@ -18,7 +18,7 @@ export default function OptionsMenu() {
   };
   return (
     <React.Fragment>
-      <MenuButton ariaLabel="Options menu button" onClick={handleClick}>
+      <MenuButton aria-label="Open menu" onClick={handleClick}>
         <MoreVertRoundedIcon />
       </MenuButton>
       <Menu
diff --git a/docs/data/material/getting-started/templates/dashboard/components/OptionsMenu.tsx b/docs/data/material/getting-started/templates/dashboard/components/OptionsMenu.tsx
index af1d2500baf6e5..a80d7f5dd04402 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/OptionsMenu.tsx
+++ b/docs/data/material/getting-started/templates/dashboard/components/OptionsMenu.tsx
@@ -18,7 +18,7 @@ export default function OptionsMenu() {
   };
   return (
     <React.Fragment>
-      <MenuButton ariaLabel="Options menu button" onClick={handleClick}>
+      <MenuButton aria-label="Open menu" onClick={handleClick}>
         <MoreVertRoundedIcon />
       </MenuButton>
       <Menu
diff --git a/docs/data/material/getting-started/templates/dashboard/components/PageViewsBarChart.js b/docs/data/material/getting-started/templates/dashboard/components/PageViewsBarChart.js
index 3d0102a5014cbd..4da29c58d5532b 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/PageViewsBarChart.js
+++ b/docs/data/material/getting-started/templates/dashboard/components/PageViewsBarChart.js
@@ -13,7 +13,7 @@ export default function PageViewsBarChart() {
   return (
     <Card variant="outlined" sx={{ width: '100%' }}>
       <CardContent>
-        <Typography variant="subtitle2" component="h2" gutterBottom>
+        <Typography component="h2" variant="subtitle2" gutterBottom>
           Page views and downloads
         </Typography>
         <BarChart
diff --git a/docs/data/material/getting-started/templates/dashboard/components/PageViewsBarChart.tsx b/docs/data/material/getting-started/templates/dashboard/components/PageViewsBarChart.tsx
index 6edaf4e6e98b8a..cb1713bc089a1e 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/PageViewsBarChart.tsx
+++ b/docs/data/material/getting-started/templates/dashboard/components/PageViewsBarChart.tsx
@@ -13,7 +13,7 @@ export default function PageViewsBarChart() {
   return (
     <Card variant="outlined" sx={{ width: '100%' }}>
       <CardContent>
-        <Typography variant="subtitle2" component="h2" gutterBottom>
+        <Typography component="h2" variant="subtitle2" gutterBottom>
           Page views and downloads
         </Typography>
         <BarChart
diff --git a/docs/data/material/getting-started/templates/dashboard/components/PageViewsChart.js b/docs/data/material/getting-started/templates/dashboard/components/PageViewsChart.js
index 9dd9afff94d35e..33327a80536d04 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/PageViewsChart.js
+++ b/docs/data/material/getting-started/templates/dashboard/components/PageViewsChart.js
@@ -59,7 +59,7 @@ export default function PageViewsChart() {
   return (
     <Card variant="outlined" sx={{ height: 400, width: '100%' }}>
       <CardContent>
-        <Typography variant="subtitle2" component="p" gutterBottom>
+        <Typography component="h2" variant="subtitle2" gutterBottom>
           Sessions
         </Typography>
         <LineChart
diff --git a/docs/data/material/getting-started/templates/dashboard/components/PageViewsChart.tsx b/docs/data/material/getting-started/templates/dashboard/components/PageViewsChart.tsx
index 0f3342a8e5a86b..c49434c8b7dcfe 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/PageViewsChart.tsx
+++ b/docs/data/material/getting-started/templates/dashboard/components/PageViewsChart.tsx
@@ -51,7 +51,7 @@ export default function PageViewsChart() {
   return (
     <Card variant="outlined" sx={{ height: 400, width: '100%' }}>
       <CardContent>
-        <Typography variant="subtitle2" component="p" gutterBottom>
+        <Typography component="h2" variant="subtitle2" gutterBottom>
           Sessions
         </Typography>
         <LineChart
diff --git a/docs/data/material/getting-started/templates/dashboard/components/ToggleColorMode.js b/docs/data/material/getting-started/templates/dashboard/components/ToggleColorMode.js
index a3844a8caeb616..9fb88f2c5f7ab9 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/ToggleColorMode.js
+++ b/docs/data/material/getting-started/templates/dashboard/components/ToggleColorMode.js
@@ -7,11 +7,7 @@ import MenuButton from './MenuButton';
 
 function ToggleColorMode({ mode, toggleColorMode }) {
   return (
-    <MenuButton
-      onClick={toggleColorMode}
-      size="small"
-      aria-label="Button to toggle theme"
-    >
+    <MenuButton onClick={toggleColorMode} size="small" aria-label="Toggle theme">
       {mode === 'dark' ? (
         <WbSunnyRoundedIcon fontSize="small" />
       ) : (
diff --git a/docs/data/material/getting-started/templates/dashboard/components/ToggleColorMode.tsx b/docs/data/material/getting-started/templates/dashboard/components/ToggleColorMode.tsx
index 20e58ac1ce25a0..bc14e7dd3ec3a7 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/ToggleColorMode.tsx
+++ b/docs/data/material/getting-started/templates/dashboard/components/ToggleColorMode.tsx
@@ -14,11 +14,7 @@ export default function ToggleColorMode({
   toggleColorMode,
 }: ToggleColorModeProps) {
   return (
-    <MenuButton
-      onClick={toggleColorMode}
-      size="small"
-      aria-label="Button to toggle theme"
-    >
+    <MenuButton onClick={toggleColorMode} size="small" aria-label="Toggle theme">
       {mode === 'dark' ? (
         <WbSunnyRoundedIcon fontSize="small" />
       ) : (