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 {ariaLabel}; 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 };