Merge pull request #849 from quachtina96/ariahidden

Hide icons from screenreader

src/components/close-button/close-button.jsx

@@ -7,6 +7,7 @@ import closeIcon from './icon--close.svg';
 
 const CloseButton = props => (
     <div
+        aria-label="Close"
         className={classNames(
             styles.closeButton,
             props.className,
@@ -15,6 +16,7 @@ const CloseButton = props => (
                 [styles.large]: props.size === CloseButton.SIZE_LARGE
             }
         )}
+        role="button"
         onClick={props.onClick}
     >
         <img

src/components/icon-button/icon-button.jsx

@@ -11,6 +11,7 @@ const IconButton = ({
 }) => (
     <div
         className={classNames(styles.container, className)}
+        role="button"
         onClick={onClick}
     >
         <img

src/components/sprite-info/sprite-info.jsx

@@ -54,6 +54,7 @@ class SpriteInfo extends React.Component {
                         <MediaQuery minWidth={layout.fullSizeMinWidth}>
                             <div className={styles.iconWrapper}>
                                 <img
+                                    aria-hidden="true"
                                     className={classNames(styles.xIcon, styles.icon)}
                                     src={xIcon}
                                 />
@@ -76,6 +77,7 @@ class SpriteInfo extends React.Component {
                         <MediaQuery minWidth={layout.fullSizeMinWidth}>
                             <div className={styles.iconWrapper}>
                                 <img
+                                    aria-hidden="true"
                                     className={classNames(styles.yIcon, styles.icon)}
                                     src={yIcon}
                                 />

test/unit/components/__snapshots__/icon-button.test.jsx.snap

@@ -4,6 +4,7 @@ exports[`IconButtonComponent matches snapshot 1`] = `
 <div
   className="custom-class-name"
   onClick={[Function]}
+  role="button"
 >
   <img
     className={undefined}

test/unit/components/__snapshots__/sound-editor.test.jsx.snap

@@ -341,6 +341,7 @@ exports[`Sound Editor Component matches snapshot 1`] = `
     <div
       className=""
       onClick={[Function]}
+      role="button"
     >
       <img
         className={undefined}
@@ -357,6 +358,7 @@ exports[`Sound Editor Component matches snapshot 1`] = `
     <div
       className=""
       onClick={[Function]}
+      role="button"
     >
       <img
         className={undefined}
@@ -373,6 +375,7 @@ exports[`Sound Editor Component matches snapshot 1`] = `
     <div
       className=""
       onClick={[Function]}
+      role="button"
     >
       <img
         className={undefined}
@@ -389,6 +392,7 @@ exports[`Sound Editor Component matches snapshot 1`] = `
     <div
       className=""
       onClick={[Function]}
+      role="button"
     >
       <img
         className={undefined}
@@ -405,6 +409,7 @@ exports[`Sound Editor Component matches snapshot 1`] = `
     <div
       className=""
       onClick={[Function]}
+      role="button"
     >
       <img
         className={undefined}
@@ -421,6 +426,7 @@ exports[`Sound Editor Component matches snapshot 1`] = `
     <div
       className=""
       onClick={[Function]}
+      role="button"
     >
       <img
         className={undefined}
@@ -437,6 +443,7 @@ exports[`Sound Editor Component matches snapshot 1`] = `
     <div
       className=""
       onClick={[Function]}
+      role="button"
     >
       <img
         className={undefined}

test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap

@@ -12,8 +12,10 @@ exports[`SpriteSelectorItemComponent matches snapshot when selected 1`] = `
   onTouchStart={[Function]}
 >
   <div
+    aria-label="Close"
     className=""
     onClick={[Function]}
+    role="button"
   >
     <img
       className={undefined}