Merge pull request #1711 from ojafero/fix-accessibility-top

Fix accessibility issues on top page
Greenstand · Sep 5, 2023 · ce1f0ca · ce1f0ca
2 parents 6a5d486 + d02cc3e
commit ce1f0ca
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 4 deletions.
diff --git a/src/components/ChangeThemeButton.js b/src/components/ChangeThemeButton.js
@@ -1,13 +1,22 @@
 import DarkMode from '@mui/icons-material/DarkMode';
 import LightMode from '@mui/icons-material/LightMode';
 import IconButton from '@mui/material/IconButton';
-import { useCustomThemeContext } from '../hooks/contextHooks';
+import { useCustomThemeContext } from 'hooks/contextHooks';
 
 export default function ChangeThemeButton() {
   const { colorMode, theme } = useCustomThemeContext();
 
+  const alt =
+    theme.palette.mode === 'light'
+      ? 'Turn on dark mode (currently light mode)'
+      : 'Turn on light mode (currently dark mode)';
+
   return (
-    <IconButton aria-label="change theme" onClick={colorMode.toggleColorMode}>
+    <IconButton
+      aria-label={alt}
+      onClick={colorMode.toggleColorMode}
+      aria-live="polite"
+    >
       {theme.palette.mode === 'light' ? <DarkMode /> : <LightMode />}
     </IconButton>
   );

diff --git a/src/components/FeaturedPlantersSlider/index.js b/src/components/FeaturedPlantersSlider/index.js
@@ -84,6 +84,7 @@ function FeaturedPlantersSlider({
             opacity: 0.9,
           }}
           variant="contained"
+          aria-label="scroll left"
         >
           <ArrowBackIosIcon
             sx={{
@@ -135,7 +136,7 @@ function FeaturedPlantersSlider({
                 image={
                   planter.logo_url || planter.image_url || imagePlaceholder
                 }
-                alt="tree"
+                alt=""
                 sx={{
                   width: 136,
                   height: 136,
@@ -207,6 +208,7 @@ function FeaturedPlantersSlider({
             opacity: 0.9,
           }}
           variant="contained"
+          aria-label="scroll right"
         >
           <ArrowBackIosIcon
             sx={{

diff --git a/src/components/FeaturedTreesSlider/index.js b/src/components/FeaturedTreesSlider/index.js
@@ -64,6 +64,7 @@ function FeaturedTreesSlider({ trees, size = null, isMobile, link }) {
             opacity: 0.9,
           }}
           variant="contained"
+          aria-label="scroll left"
         >
           <ArrowBackIosIcon
             sx={{
@@ -99,7 +100,7 @@ function FeaturedTreesSlider({ trees, size = null, isMobile, link }) {
               <CardMedia
                 component="img"
                 image={getThumbnailImageUrls(tree.image_url, 208, 232)}
-                alt="tree"
+                alt=""
                 sx={{
                   borderRadius: '16px',
                   transition: 'transform .5s',
@@ -158,6 +159,7 @@ function FeaturedTreesSlider({ trees, size = null, isMobile, link }) {
             opacity: 0.9,
           }}
           variant="contained"
+          aria-label="scroll right"
         >
           <ArrowBackIosIcon
             sx={{

diff --git a/src/components/Ribbon.js b/src/components/Ribbon.js
@@ -20,6 +20,7 @@ function Ribbon(props) {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className={classes.root}
+      aria-hidden="true"
     >
       <path
         d="M23.8 59.7C24.4 59.9 25.2 60.6 26 61.3L17.4 79.5L11.2 71L0.6 71.5L10 51.7C10.3 51.8 10.5 52 10.7 52.2C11.2 52.7 11.6 53.9 12 55.1C12.6 56.9 13.2 59 15 60C15.7 60.4 16.5 60.6 17.5 60.6C18.6 60.6 19.7 60.3 20.8 60.1C21.7 59.9 22.6 59.7 23.4 59.7C23.4 59.7 23.7 59.7 23.8 59.7ZM52.1 52.1C51.6 52.6 51.2 53.8 50.8 55C50.2 56.8 49.6 58.9 47.8 59.9C47.1 60.3 46.3 60.5 45.3 60.5C44.2 60.5 43.1 60.2 42 60C41.1 59.8 40.2 59.6 39.4 59.6C39.2 59.6 39 59.6 38.8 59.7C38.2 59.9 37.4 60.6 36.6 61.3L45.4 79.5L51.6 71L62.2 71.5L52.8 51.7C52.5 51.8 52.3 52 52.1 52.1ZM58.5 47.1C57.2 49.3 52.7 49.2 50.9 51C49.1 52.8 49.2 57.3 47 58.6C44.8 59.9 41 57.5 38.5 58.2C36.1 58.8 34 62.8 31.4 62.8C28.8 62.8 26.7 58.8 24.2 58.2C21.7 57.5 17.9 59.9 15.7 58.6C13.5 57.3 13.6 52.8 11.8 51C10 49.2 5.5 49.3 4.2 47.1C2.9 44.9 5.3 41.1 4.6 38.6C3.9 36.2 0 34.1 0 31.4C0 28.8 4 26.7 4.6 24.2C5.3 21.7 2.9 17.9 4.2 15.7C5.5 13.5 10 13.6 11.8 11.8C13.6 10 13.5 5.5 15.7 4.2C17.9 2.9 21.7 5.3 24.2 4.6C26.6 3.9 28.7 0 31.4 0C34 0 36.1 4 38.6 4.6C41.1 5.3 44.9 2.9 47.1 4.2C49.3 5.5 49.2 10 51 11.8C52.8 13.6 57.3 13.5 58.6 15.7C59.9 17.9 57.5 21.7 58.2 24.2C58.9 26.6 62.8 28.7 62.8 31.4C62.8 34 58.8 36.1 58.2 38.6C57.4 41.1 59.8 44.9 58.5 47.1ZM52.5 31.5C52.5 19.8 43 10.4 31.4 10.4C19.8 10.4 10.3 19.8 10.3 31.5C10.3 43.2 19.7 52.6 31.4 52.6C43.1 52.6 52.5 43.1 52.5 31.5Z"