default is hidden on icon (#176)

* bump ver * bump ver
mondaycom · Jul 25, 2021 · 5efd77d · 5efd77d
1 parent 0dbdc6b
commit 5efd77d
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "monday-ui-react-core",
-  "version": "0.3.63",
+  "version": "0.3.64",
   "description": "Official monday.com UI resources for application development in React.js",
   "main": "dist/main.js",
   "scripts": {
@@ -167,4 +167,4 @@
     "not and_qq > 0",
     "not and_uc > 0"
   ]
-}
+}
diff --git a/src/components/Avatar/AvatarContent.jsx b/src/components/Avatar/AvatarContent.jsx
@@ -14,7 +14,16 @@ export const AvatarContent = ({ type, src, icon, text, ariaLabel, role, size })
     case AVATAR_TYPES.IMG:
       return <img role={role} alt={ariaLabel} src={src} className={className} />;
     case AVATAR_TYPES.ICON:
-      return <Icon icon={icon} aria-label={ariaLabel} role={role} clickable={false} className={className} />;
+      return (
+        <Icon
+          icon={icon}
+          aria-label={ariaLabel}
+          role={role}
+          clickable={false}
+          className={className}
+          ariaHidden={false}
+        />
+      );
     case AVATAR_TYPES.TEXT:
       return (
         <span aria-label={ariaLabel} role={role} className={className}>

diff --git a/src/components/Icon/CustomSvgIcon.jsx b/src/components/Icon/CustomSvgIcon.jsx
@@ -33,7 +33,7 @@ CustomSvgIcon.propTypes = {
   className: "",
   src: "",
   ariaLabel: undefined,
-  ariaHidden: false
+  ariaHidden: undefined
 };
 
 export default CustomSvgIcon;
diff --git a/src/components/Icon/Icon.jsx b/src/components/Icon/Icon.jsx
@@ -95,7 +95,7 @@ Icon.defaultProps = {
   iconType: ICON_TYPES.SVG,
   iconSize: 16,
   ignoreFocusStyle: false,
-  ariaHidden: false
+  ariaHidden: undefined
 };
 
 export default Icon;
diff --git a/src/helpers/screenReaderAccessHelper.js b/src/helpers/screenReaderAccessHelper.js
@@ -1,8 +1,16 @@
+import isNil from "lodash/isNil";
+
 export function getIconScreenReaderAccessProps({ isClickable, isDecorationOnly, isKeyboardAccessible, label }) {
-  if (isClickable) return getClickableIconScreenReaderAccessProps({ label, isDecorationOnly, isKeyboardAccessible });
+  const overrideIsDecorationOnly = isNil(isDecorationOnly) ? !isClickable : isDecorationOnly;
+  if (isClickable)
+    return getClickableIconScreenReaderAccessProps({
+      label,
+      isDecorationOnly: overrideIsDecorationOnly,
+      isKeyboardAccessible
+    });
   return {
     role: "img",
-    "aria-hidden": isDecorationOnly,
+    "aria-hidden": overrideIsDecorationOnly,
     tabIndex: undefined,
     "aria-label": isDecorationOnly ? undefined : label
   };