fix: add aria-label and title to autoplay toggle buttons for accessibility (#1101)

* fix: add aria-label and title to autoplay toggle buttons for accessibility

* chore: unnecessary node version removed

* fix: added aria-hidden to icon

* fix: aria-hidden arrows

* fix: PrevArrow and NextArrow

* fix: hamburger menu button translation of aria-label (#1103)

* fix: aria-label fixed

* removed unnecessary string

* fix: title removed from buttons and icons

Author: Wagner3UB

src/components/ItaliaTheme/Blocks/Listing/Commons/NextArrow.jsx

@@ -4,7 +4,7 @@ export default function NextArrow(props) {
   const { className, style, onClick } = props;
   return (
     <div className={className} style={{ ...style }} onClick={onClick}>
-      <Icon icon="chevron-right" key="chevron-right" />
+      <Icon icon="chevron-right" key="chevron-right" aria-hidden={true} />
     </div>
   );
 }

src/components/ItaliaTheme/Blocks/Listing/Commons/PrevArrow.jsx

@@ -4,7 +4,7 @@ export default function PrevArrow(props) {
   const { className, style, onClick } = props;
   return (
     <div className={className} style={{ ...style }} onClick={onClick}>
-      <Icon icon="chevron-left" key="chevron-left-prev" />
+      <Icon icon="chevron-left" key="chevron-left-prev" aria-hidden={true} />
     </div>
   );
 }

src/components/ItaliaTheme/Blocks/Listing/PhotogalleryTemplate.jsx

@@ -116,7 +116,7 @@ const PhotogalleryTemplate = ({
         <div className="play-pause-wrapper">
           <button
             onClick={() => toggleAutoplay()}
-            title={
+            aria-label={
               autoplay
                 ? intl.formatMessage(messages.pause)
                 : intl.formatMessage(messages.play)
@@ -125,6 +125,7 @@ const PhotogalleryTemplate = ({
             <Icon
               key={autoplay ? 'pause' : 'play'}
               icon={autoplay ? 'pause' : 'play'}
+              aria-hidden={true}
             />
           </button>
         </div>

src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx

@@ -78,7 +78,7 @@ function NextArrow(props) {
       onKeyDown={handleKeyboardUsers}
       id="sliderNextArrow"
     >
-      <Icon icon="chevron-right" key="chevron-right" />
+      <Icon icon="chevron-right" key="chevron-right" aria-hidden={true} />
       <span class="sr-only">{intl.formatMessage(messages.successivo)}</span>
     </button>
   );
@@ -115,13 +115,12 @@ function PrevArrow(props) {
       className={className}
       style={{ ...style }}
       onClick={handleClick}
-      title={intl.formatMessage(messages.precedente)}
       aria-label={intl.formatMessage(messages.precedente)}
       aria-hidden={false}
       id="sliderPrevArrow"
       onKeyDown={handleKeyboardUsers}
     >
-      <Icon icon="chevron-left" key="chevron-left-prev" />
+      <Icon icon="chevron-left" key="chevron-left-prev" aria-hidden={true} />
       <span class="sr-only">{intl.formatMessage(messages.precedente)}</span>
     </button>
   );
@@ -329,7 +328,7 @@ const SliderTemplate = ({
               <div className="play-pause-wrapper">
                 <button
                   onClick={toggleAutoplay}
-                  title={
+                  aria-label={
                     userAutoplay
                       ? intl.formatMessage(messages.pause)
                       : intl.formatMessage(messages.play)
@@ -339,6 +338,7 @@ const SliderTemplate = ({
                   <Icon
                     key={userAutoplay ? 'pause' : 'play'}
                     icon={userAutoplay ? 'pause' : 'play'}
+                    aria-hidden={true}
                   />
                   <span>{userAutoplay ? 'pause' : 'play'}</span>
                 </button>