fix(IconBehavior): changing icon behavior as for some cases icon could be visible

CHANGELOG.md

@@ -21,6 +21,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add keyboard navigation and screen reader support for `Accordion` @silviuavram ([#1322](https://github.com/stardust-ui/react/pull/1322)) 
 - Add `expanded` prop to `Accordion` @silviuavram ([#1322](https://github.com/stardust-ui/react/pull/1322)) 
 
+### Fixes
+- Changing icon behavior as for some cases icon could be visible ([#1327](https://github.com/stardust-ui/react/pull/1327))
+
 <!--------------------------------[ v0.31.0 ]------------------------------- -->
 ## [v0.31.0](https://github.com/stardust-ui/react/tree/v0.31.0) (2019-05-21)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.30.0...v0.31.0)

packages/react/src/lib/accessibility/Behaviors/Icon/iconBehavior.ts

@@ -2,16 +2,19 @@ import { Accessibility } from '../../types'
 
 /**
  * @description
- * Icon is usually only visual representation and therefore is hidden from screen readers.
+ * Icon is usually only visual representation and therefore is hidden from screen readers, unless 'alt' or 'aria-label' property is provided.
  *
  * @specification
- * Adds attribute 'aria-hidden=true' to icon.
+ * Adds role='img'.
+ * Adds attribute 'aria-hidden=true', if there is no 'alt' property provided.
+ * Adds attribute 'aria-hidden=true', if there is no 'aria-label' property provided.
  */
 
 const iconBehavior: Accessibility = (props: any) => ({
   attributes: {
     root: {
-      'aria-hidden': 'true',
+      role: 'img',
+      'aria-hidden': props['alt'] || props['aria-label'] ? undefined : 'true',
     },
   },
 })

packages/react/src/lib/accessibility/Behaviors/Image/imageBehavior.ts

@@ -2,7 +2,7 @@ import { Accessibility } from '../../types'
 
 /**
  * @description
- * Image is usually only visual representation and therefore is hidden from screen readers.
+ * Image is usually only visual representation and therefore is hidden from screen readers, unless 'alt' property is provided.
  *
  * @specification
  * Adds attribute 'aria-hidden=true', if there is no 'alt' property provided.

packages/react/test/specs/behaviors/testDefinitions.ts

@@ -278,20 +278,19 @@ definitions.push({
 
 // Example: Adds attribute 'aria-hidden=true', if there is no 'alt' property provided.
 definitions.push({
-  regexp: /Adds attribute '([\w-]+)=(\w+)', if there is no 'alt' property provided\./g,
+  regexp: /Adds attribute '([\w-]+)=(\w+)', if there is no '([\w-]+)' property provided\./g,
   testMethod: (parameters: TestMethod) => {
-    const [attributeToBeAdded, attributeExpectedValue] = [...parameters.props]
+    const [attributeToBeAdded, attributeExpectedValue, propertyDependingOn] = [...parameters.props]
     const property = {}
     const expectedResult = parameters.behavior(property).attributes.root[attributeToBeAdded]
     expect(testHelper.convertToMatchingTypeIfApplicable(expectedResult)).toBe(
       testHelper.convertToMatchingTypeIfApplicable(attributeExpectedValue),
     )
 
-    const propertyWithAlt = { alt: 'mockText' }
-    const expectedResultWithAlt = parameters.behavior(propertyWithAlt).attributes.root[
-      attributeToBeAdded
-    ]
-    expect(testHelper.convertToMatchingTypeIfApplicable(expectedResultWithAlt)).toBe(
+    const dependingOnProperty = { [propertyDependingOn]: 'mockText' }
+    const expectedResultForPropertyDependingOn = parameters.behavior(dependingOnProperty).attributes
+      .root[attributeToBeAdded]
+    expect(testHelper.convertToMatchingTypeIfApplicable(expectedResultForPropertyDependingOn)).toBe(
       testHelper.convertToMatchingTypeIfApplicable(undefined),
     )
   },

packages/react/test/specs/components/Icon/Icon-test.tsx

@@ -10,7 +10,7 @@ describe('Icon', () => {
 
   describe('accessibility', () => {
     handlesAccessibility(Icon, {
-      defaultRootRole: undefined,
+      defaultRootRole: 'img',
     })
 
     describe('aria-hidden', () => {