Merge branch 'master' of github.com:mondaycom/monday-ui-react-core in…

…to ver/hadas/bump-ver-for-a11y � Conflicts: � package.json
mondaycom · Jul 25, 2021 · 4ffbec9 · 4ffbec9
2 parents 10cbdee + 6900183
commit 4ffbec9
Show file tree

Hide file tree

Showing 33 changed files with 944 additions and 250 deletions.
diff --git a/src/components/AttentionBox/__tests__/__snapshots__/attentionBox.jest.js.snap b/src/components/AttentionBox/__tests__/__snapshots__/attentionBox.jest.js.snap
@@ -9,14 +9,12 @@ exports[`AttentionBox Tests Snapshot Tests renders correctly 1`] = `
     className="monday-style-attention-box-component__title-container monday-style-attention-box-component--type-primary__title-container"
   >
     <svg
-      aria-hidden="true"
-      aria-label="attention"
+      aria-hidden={true}
       className="icon_component monday-style-attention-box-component__title-container__icon monday-style-attention-box-component--type-primary__title-container__icon icon_component--no-focus-style"
       fill="currentColor"
       height="24"
       onClick={[Function]}
-      role=""
-      tabIndex={-1}
+      role="img"
       viewBox="0 0 20 20"
       width="24"
     >
@@ -50,14 +48,12 @@ exports[`AttentionBox Tests Snapshot Tests renders correctly with empty props 1`
     className="monday-style-attention-box-component__title-container monday-style-attention-box-component--type-primary__title-container"
   >
     <svg
-      aria-hidden="true"
-      aria-label="attention"
+      aria-hidden={true}
       className="icon_component monday-style-attention-box-component__title-container__icon monday-style-attention-box-component--type-primary__title-container__icon icon_component--no-focus-style"
       fill="currentColor"
       height="24"
       onClick={[Function]}
-      role=""
-      tabIndex={-1}
+      role="img"
       viewBox="0 0 20 20"
       width="24"
     >

diff --git a/src/components/Checkbox/Checkbox.js b/src/components/Checkbox/Checkbox.js
@@ -69,9 +69,9 @@ export const Checkbox = ({
           className={`${BASE_CLASS_NAME}__icon`}
           iconType={Icon.type.SVG}
           icon={Check}
-          iconLabel="checkbox"
           ignoreFocusStyle
           clickable={false}
+          ariaHidden={true}
           iconSize="16"
         />
       </div>
@@ -96,7 +96,7 @@ Checkbox.propTypes = {
 Checkbox.defaultProps = {
   id: undefined,
   componentClassName: "",
-  label: "",
+  label: undefined,
   onChange: NOOP,
   disabled: false,
   name: "",

diff --git a/src/components/Checkbox/__tests__/__snapshots__/checkbox.jest.js.snap b/src/components/Checkbox/__tests__/__snapshots__/checkbox.jest.js.snap
@@ -19,14 +19,12 @@ exports[`Checkbox Tests Snapshot Tests renders correctly 1`] = `
     className="monday-style-checkbox__checkbox monday-style-checkbox__prevent-animation"
   >
     <svg
-      aria-hidden={false}
-      aria-label="checkbox"
-      className="icon_component monday-style-checkbox__icon icon_component--clickable icon_component--no-focus-style"
+      aria-hidden={true}
+      className="icon_component monday-style-checkbox__icon icon_component--no-focus-style"
       fill="currentColor"
       height="16"
       onClick={[Function]}
-      role="button"
-      tabIndex={0}
+      role="img"
       viewBox="0 0 20 20"
       width="16"
     >
@@ -52,7 +50,6 @@ exports[`Checkbox Tests Snapshot Tests renders correctly when checked 1`] = `
   onMouseUp={[Function]}
 >
   <input
-    aria-label=""
     checked={true}
     className="monday-style-checkbox__input"
     disabled={false}
@@ -65,14 +62,12 @@ exports[`Checkbox Tests Snapshot Tests renders correctly when checked 1`] = `
     className="monday-style-checkbox__checkbox monday-style-checkbox__prevent-animation"
   >
     <svg
-      aria-hidden={false}
-      aria-label="checkbox"
-      className="icon_component monday-style-checkbox__icon icon_component--clickable icon_component--no-focus-style"
+      aria-hidden={true}
+      className="icon_component monday-style-checkbox__icon icon_component--no-focus-style"
       fill="currentColor"
       height="16"
       onClick={[Function]}
-      role="button"
-      tabIndex={0}
+      role="img"
       viewBox="0 0 20 20"
       width="16"
     >
@@ -86,9 +81,7 @@ exports[`Checkbox Tests Snapshot Tests renders correctly when checked 1`] = `
   </div>
   <span
     className="monday-style-checkbox__label"
-  >
-    
-  </span>
+  />
 </label>
 `;
 
@@ -98,7 +91,6 @@ exports[`Checkbox Tests Snapshot Tests renders correctly when disabled 1`] = `
   onMouseUp={[Function]}
 >
   <input
-    aria-label=""
     className="monday-style-checkbox__input"
     defaultChecked={false}
     disabled={true}
@@ -111,14 +103,12 @@ exports[`Checkbox Tests Snapshot Tests renders correctly when disabled 1`] = `
     className="monday-style-checkbox__checkbox monday-style-checkbox__prevent-animation"
   >
     <svg
-      aria-hidden={false}
-      aria-label="checkbox"
-      className="icon_component monday-style-checkbox__icon icon_component--clickable icon_component--no-focus-style"
+      aria-hidden={true}
+      className="icon_component monday-style-checkbox__icon icon_component--no-focus-style"
       fill="currentColor"
       height="16"
       onClick={[Function]}
-      role="button"
-      tabIndex={0}
+      role="img"
       viewBox="0 0 20 20"
       width="16"
     >
@@ -132,9 +122,7 @@ exports[`Checkbox Tests Snapshot Tests renders correctly when disabled 1`] = `
   </div>
   <span
     className="monday-style-checkbox__label"
-  >
-    
-  </span>
+  />
 </label>
 `;
 
@@ -144,7 +132,6 @@ exports[`Checkbox Tests Snapshot Tests renders correctly with empty props 1`] =
   onMouseUp={[Function]}
 >
   <input
-    aria-label=""
     className="monday-style-checkbox__input"
     defaultChecked={false}
     disabled={false}
@@ -157,14 +144,12 @@ exports[`Checkbox Tests Snapshot Tests renders correctly with empty props 1`] =
     className="monday-style-checkbox__checkbox monday-style-checkbox__prevent-animation"
   >
     <svg
-      aria-hidden={false}
-      aria-label="checkbox"
-      className="icon_component monday-style-checkbox__icon icon_component--clickable icon_component--no-focus-style"
+      aria-hidden={true}
+      className="icon_component monday-style-checkbox__icon icon_component--no-focus-style"
       fill="currentColor"
       height="16"
       onClick={[Function]}
-      role="button"
-      tabIndex={0}
+      role="img"
       viewBox="0 0 20 20"
       width="16"
     >
@@ -178,8 +163,6 @@ exports[`Checkbox Tests Snapshot Tests renders correctly with empty props 1`] =
   </div>
   <span
     className="monday-style-checkbox__label"
-  >
-    
-  </span>
+  />
 </label>
 `;
diff --git a/src/components/Combobox/__tests__/__snapshots__/combobox.jest.js.snap b/src/components/Combobox/__tests__/__snapshots__/combobox.jest.js.snap
@@ -55,11 +55,11 @@ exports[`<Combobox /> renders correctly with empty props 1`] = `
           tabIndex="-1"
         >
           <span
+            aria-hidden={false}
             aria-label="Search"
             className="icon_component input-component__icon icon_component--no-focus-style fa fa-search"
             onClick={[Function]}
             role="img"
-            tabIndex={-1}
           />
         </div>
         <div
@@ -80,11 +80,11 @@ exports[`<Combobox /> renders correctly with empty props 1`] = `
           tabIndex="-1"
         >
           <span
+            aria-hidden={false}
             aria-label="Clear Search"
             className="icon_component input-component__icon icon_component--no-focus-style fa fa-close"
             onClick={[Function]}
             role="img"
-            tabIndex={-1}
           />
         </div>
       </div>
@@ -157,11 +157,11 @@ exports[`<Combobox /> renders correctly with one option 1`] = `
           tabIndex="-1"
         >
           <span
+            aria-hidden={false}
             aria-label="Search"
             className="icon_component input-component__icon icon_component--no-focus-style fa fa-search"
             onClick={[Function]}
             role="img"
-            tabIndex={-1}
           />
         </div>
         <div
@@ -182,11 +182,11 @@ exports[`<Combobox /> renders correctly with one option 1`] = `
           tabIndex="-1"
         >
           <span
+            aria-hidden={false}
             aria-label="Clear Search"
             className="icon_component input-component__icon icon_component--no-focus-style fa fa-close"
             onClick={[Function]}
             role="img"
-            tabIndex={-1}
           />
         </div>
       </div>
@@ -279,11 +279,11 @@ exports[`<Combobox /> renders correctly with options and categories 1`] = `
           tabIndex="-1"
         >
           <span
+            aria-hidden={false}
             aria-label="Search"
             className="icon_component input-component__icon icon_component--no-focus-style fa fa-search"
             onClick={[Function]}
             role="img"
-            tabIndex={-1}
           />
         </div>
         <div
@@ -304,11 +304,11 @@ exports[`<Combobox /> renders correctly with options and categories 1`] = `
           tabIndex="-1"
         >
           <span
+            aria-hidden={false}
             aria-label="Clear Search"
             className="icon_component input-component__icon icon_component--no-focus-style fa fa-close"
             onClick={[Function]}
             role="img"
-            tabIndex={-1}
           />
         </div>
       </div>

diff --git a/src/components/Dropdown/__tests__/__snapshots__/dropdown.jest.js.snap b/src/components/Dropdown/__tests__/__snapshots__/dropdown.jest.js.snap
@@ -69,7 +69,6 @@ exports[`Dropdown should open menu on click if set 1`] = `
         >
           <svg
             aria-hidden="false"
-            aria-label=""
             class="icon_component icon_component--clickable"
             fill="currentColor"
             height="20px"
@@ -209,7 +208,6 @@ exports[`Dropdown should open menu on focus if set 1`] = `
         >
           <svg
             aria-hidden="false"
-            aria-label=""
             class="icon_component icon_component--clickable"
             fill="currentColor"
             height="20px"
@@ -373,7 +371,6 @@ exports[`Dropdown should render correctly for the different sizes 1`] = `
       >
         <svg
           aria-hidden={false}
-          aria-label=""
           className="icon_component icon_component--clickable"
           fill="currentColor"
           height="20px"
@@ -487,7 +484,6 @@ exports[`Dropdown should render correctly for the different sizes 2`] = `
       >
         <svg
           aria-hidden={false}
-          aria-label=""
           className="icon_component icon_component--clickable"
           fill="currentColor"
           height="20px"
@@ -601,7 +597,6 @@ exports[`Dropdown should render correctly for the different sizes 3`] = `
       >
         <svg
           aria-hidden={false}
-          aria-label=""
           className="icon_component icon_component--clickable"
           fill="currentColor"
           height="16px"
@@ -715,7 +710,6 @@ exports[`Dropdown should render correctly with empty props 1`] = `
       >
         <svg
           aria-hidden={false}
-          aria-label=""
           className="icon_component icon_component--clickable"
           fill="currentColor"
           height="20px"
@@ -819,7 +813,6 @@ exports[`Dropdown should use async if set 1`] = `
         >
           <svg
             aria-hidden="false"
-            aria-label=""
             class="icon_component icon_component--clickable"
             fill="currentColor"
             height="20px"
@@ -909,7 +902,6 @@ exports[`Dropdown should use virtualization if set 1`] = `
         >
           <svg
             aria-hidden="false"
-            aria-label=""
             class="icon_component icon_component--clickable"
             fill="currentColor"
             height="20px"

diff --git a/src/components/Icon/CustomSvgIcon.jsx b/src/components/Icon/CustomSvgIcon.jsx
@@ -1,15 +1,20 @@
 /* eslint-disable react/jsx-props-no-spreading */
-import React from "react";
+import React, { useMemo } from "react";
 import PropTypes from "prop-types";
 import cx from "classnames";
 import SVG from "react-inlinesvg";
 import "./CustomSvgIcon.scss";
+import useIconScreenReaderAccessProps from "../../hooks/useIconScreenReaderAccessProps";
 
-const CustomSvgIcon = ({ className, src, onClick, clickable, ...props }) => {
-  const tabIndex = clickable ? 0 : -1;
+const CustomSvgIcon = ({ className, src, onClick, clickable, ariaLabel, ariaHidden, ...props }) => {
+  const screenReaderAccessProps = useIconScreenReaderAccessProps({
+    isClickable: clickable,
+    label: ariaLabel,
+    isDecorationOnly: ariaHidden
+  });
   return (
     <SVG
-      tabIndex={tabIndex}
+      {...screenReaderAccessProps}
       onClick={onClick}
       src={src}
       className={cx("monday-style-custom-svg-icon--wrapper", className)}
@@ -20,11 +25,15 @@ const CustomSvgIcon = ({ className, src, onClick, clickable, ...props }) => {
 
 CustomSvgIcon.defaultProps = {
   className: PropTypes.string,
-  src: PropTypes.string
+  src: PropTypes.string,
+  ariaLabel: PropTypes.string,
+  ariaHidden: PropTypes.bool
 };
 CustomSvgIcon.propTypes = {
   className: "",
-  src: ""
+  src: "",
+  ariaLabel: undefined,
+  ariaHidden: false
 };
 
 export default CustomSvgIcon;