diff --git a/package.json b/package.json
index 39fccab9b9..8342e37410 100644
--- 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"
]
-}
+}
\ No newline at end of file
diff --git a/src/components/Avatar/AvatarContent.jsx b/src/components/Avatar/AvatarContent.jsx
index 1e9f7fee36..612d36fa9d 100644
--- 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 ;
case AVATAR_TYPES.ICON:
- return ;
+ return (
+
+ );
case AVATAR_TYPES.TEXT:
return (
diff --git a/src/components/Icon/CustomSvgIcon.jsx b/src/components/Icon/CustomSvgIcon.jsx
index cca8e9a38e..8a5de8a4fa 100644
--- 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
index 9fd7c91a4d..a124e8a1e0 100644
--- 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
index 0e0e9d1fa4..ac18db4047 100644
--- 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
};