fix: only use role="text" if mac is actually used on #step-indicator

dnbexperience · Jan 20, 2020 · 7cceebb · 7cceebb
1 parent 8861d50
commit 7cceebb
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 11 deletions.
diff --git a/packages/dnb-ui-lib/src/components/step-indicator/StepIndicatorItem.js b/packages/dnb-ui-lib/src/components/step-indicator/StepIndicatorItem.js
@@ -8,10 +8,13 @@ import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import {
   isTrue,
-  dispatchCustomElementEvent
+  dispatchCustomElementEvent,
+  isMac as isMacFunc
 } from '../../shared/component-helper'
 import { Dummy } from '../tabs/Tabs'
 
+let isMac = null
+
 export default class StepItem extends PureComponent {
   static propTypes = {
     activeItem: PropTypes.number.isRequired,
@@ -88,6 +91,10 @@ export default class StepItem extends PureComponent {
   }
 
   render() {
+    if (isMac === null) {
+      isMac = isMacFunc()
+    }
+
     const {
       activeItem,
       currentItem,
@@ -206,8 +213,11 @@ export default class StepItem extends PureComponent {
         </a>
       )
     } else {
-      // to screen readers read both the nr. and the text in one sentence
-      params.role = 'text'
+      // To screen readers read both the nr. and the text in one sentence
+      if (isMac) {
+        params.role = 'text'
+      }
+
       child = (
         <span
           className="dnb-step-indicator__item-content dnb-step-indicator__item-content--static"

diff --git a/packages/dnb-ui-lib/src/components/step-indicator/__tests__/StepIndicator.test.js b/packages/dnb-ui-lib/src/components/step-indicator/__tests__/StepIndicator.test.js
@@ -68,12 +68,15 @@ describe('StepIndicator component with urls', () => {
 
   it('should validate with ARIA rules', async () => {
     expect(
-      await axeComponent(Comp, {
-        rules: {
-          // because of the role="text", we disable this rule for now
-          'aria-roles': { enabled: false }
-        }
-      })
+      await axeComponent(Comp)
+      // We had this as the axeComponent option util v5
+      // Can be removed in later versions
+      // , {
+      //   rules: {
+      //     // because of the role="text", we disable this rule for now
+      //     'aria-roles': { enabled: false }
+      //   }
+      // }
     ).toHaveNoViolations()
   })
 })

diff --git a/...b-ui-lib/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.js.snap b/...b-ui-lib/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.js.snap
@@ -168,7 +168,6 @@ exports[`StepIndicator component with buttons have to match snapshot 1`] = `
           <span
             aria-disabled={true}
             className="dnb-step-indicator__item-content dnb-step-indicator__item-content--static"
-            role="text"
           >
             <StepItemWrapper>
               <span
@@ -369,7 +368,6 @@ exports[`StepIndicator component with urls have to match snapshot 1`] = `
         >
           <span
             className="dnb-step-indicator__item-content dnb-step-indicator__item-content--static"
-            role="text"
           >
             <StepItemWrapper>
               <span