Hide icons for screen readers, use caption as aria-label for images with a fallback

Author: kudlajz

src/components/Rollover/Rollover.tsx

@@ -41,6 +41,7 @@ export function Rollover({
 
     return (
         <a
+            aria-label={caption || 'View image'}
             className={classNames('prezly-slate-image-rollover', className)}
             onClick={(event) => {
                 event.preventDefault();
@@ -59,7 +60,10 @@ export function Rollover({
                     })}
                 >
                     <span className="prezly-slate-image-rollover__caption-icon-container">
-                        <ArrowsAngleExpand className="prezly-slate-image-rollover__caption-icon" />
+                        <ArrowsAngleExpand
+                            aria-hidden="true"
+                            className="prezly-slate-image-rollover__caption-icon"
+                        />
                     </span>
 
                     <span className="prezly-slate-image-rollover__caption-text" ref={ref}>

src/elements/Contact/SocialField.tsx

@@ -20,7 +20,7 @@ export function SocialField({ children, className, href, Icon }: Props) {
                 rel="noreferrer noopener"
                 target="_blank"
             >
-                {Icon && <Icon className="prezly-slate-social-field__icon" />}
+                {Icon && <Icon aria-hidden="true" className="prezly-slate-social-field__icon" />}
                 {children && <span className="prezly-slate-social-field__value">{children}</span>}
             </a>
         </li>