fix: enhance NVDA support for #dropdown #button #checkbox #dropdown #…

…input #radio #switch #slider #textarea #date-picker #globa-status
dnbexperience · Sep 19, 2019 · 1fb638b · 1fb638b
1 parent ce33a01
commit 1fb638b
Show file tree

Hide file tree

Showing 32 changed files with 481 additions and 408 deletions.
diff --git a/.../dnb-design-system-portal/src/docs/uilib/components/slider/slider-properties.md b/.../dnb-design-system-portal/src/docs/uilib/components/slider/slider-properties.md
@@ -15,8 +15,8 @@ draft: true
 | `hide_buttons`                                  | _(optional)_ removes the helper buttons. Defaults to `false`.                                                        |
 | `use_scrollwheel`                               | _(optional)_ enable mouse scroll-wheel support. Defaults to `false`.                                                 |
 | `thump_title`                                   | _(optional)_ give the slider thump button a title for accessibility reason. Defaults to `null`.                      |
-| `subtract_title`                                | _(optional)_ give the subtract button a title for accessibility reason. Defaults to `null`.                          |
-| `add_title`                                     | _(optional)_ give the add button a title for accessibility reason. Defaults to `null`.                               |
+| `subtract_title`                                | _(optional)_ give the subtract button a title for accessibility reason. Defaults to `−`.                             |
+| `add_title`                                     | _(optional)_ give the add button a title for accessibility reason. Defaults to `+`.                                  |
 | `label`                                         | _(optional)_ prepends the Form Label component. If no ID is provided, a random ID is created.                        |
 | `status`                                        | _(optional)_ text with a status message. The style defaults to an error message.                                     |
 | `status_state`                                  | _(optional)_ defines the state of the status. Currently there are two statuses `[error, info]`. Defaults to `error`. |

diff --git a/packages/dnb-ui-lib/src/components/button/Button.js b/packages/dnb-ui-lib/src/components/button/Button.js
@@ -216,9 +216,6 @@ export default class Button extends PureComponent {
       onMouseOut: this.onMouseOutHandler, // for resetting the button to the default state
       onClick: this.onClickHandler
     }
-    if (!params['aria-label'] && !text && title) {
-      params['aria-label'] = title
-    }
 
     // also used for code markup simulation
     validateDOMAttributes(this.props, params)
@@ -303,15 +300,13 @@ class Content extends PureComponent {
     }
 
     if (icon) {
-      const alt = title || text
       ret.push(
         <IconPrimary
           key="button-icon"
           className="dnb-button__icon"
           icon={icon}
           size={icon_size}
-          alt={alt}
-          aria-hidden={isIconOnly ? false : Boolean(alt)}
+          aria-hidden={isIconOnly && !title ? false : true}
         />
       )
     }

diff --git a/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap b/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap
@@ -65,7 +65,7 @@ exports[`Button component have to match default button snapshot 1`] = `
         text
       </span>
       <IconPrimary
-        alt="This is a button title"
+        alt={null}
         aria-hidden={true}
         attributes={null}
         class={null}
@@ -80,7 +80,7 @@ exports[`Button component have to match default button snapshot 1`] = `
         width={null}
       >
         <span
-          alt="This is a button title"
+          alt="question"
           aria-hidden={true}
           className="dnb-icon dnb-button__icon"
           role="img"
@@ -177,7 +177,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
         text
       </span>
       <IconPrimary
-        alt="This is a button title"
+        alt={null}
         aria-hidden={true}
         attributes={null}
         class={null}
@@ -192,7 +192,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
         width={null}
       >
         <span
-          alt="This is a button title"
+          alt="question"
           aria-hidden={true}
           className="dnb-icon dnb-button__icon"
           role="img"

diff --git a/packages/dnb-ui-lib/src/components/checkbox/Checkbox.js b/packages/dnb-ui-lib/src/components/checkbox/Checkbox.js
@@ -234,9 +234,6 @@ export default class Checkbox extends Component {
     if (showStatus) {
       inputParams['aria-describedby'] = id + '-status'
     }
-    if (label) {
-      inputParams['aria-labelledby'] = id + '-label'
-    }
     if (readOnly) {
       inputParams['aria-readonly'] = inputParams.readOnly = true
     }

diff --git a/packages/dnb-ui-lib/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap b/packages/dnb-ui-lib/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap
@@ -100,7 +100,6 @@ exports[`Checkbox component have to match snapshot 1`] = `
         >
           <input
             aria-checked={false}
-            aria-labelledby="checkbox-label"
             checked={false}
             className="dnb-checkbox__input"
             disabled={false}

diff --git a/packages/dnb-ui-lib/src/components/date-picker/DatePickerCalendar.js b/packages/dnb-ui-lib/src/components/date-picker/DatePickerCalendar.js
@@ -283,13 +283,12 @@ export default class DatePickerCalendar extends PureComponent {
                       size="medium"
                       variant="secondary"
                       text={format(day.date, 'd', { locale })}
-                      title={title}
                       bounding={true}
                       disabled={isDisabled}
-                      tabIndex="-1"
+                      tabIndex={isDisabled ? '0' : '-1'} // fix for NVDA
                       aria-hidden={isInactive}
-                      aria-label={title}
                       aria-disabled={isDisabled}
+                      aria-label={title}
                       {...paramsButton}
                       onClick={({ event }) =>
                         !day.isLastMonth &&
@@ -346,7 +345,6 @@ const PrevButton = ({
       icon="chevron-left"
       size="small"
       aria-label={title}
-      title={title}
       onClick={onClick}
       onKeyDown={onKeyDown}
     />
@@ -390,7 +388,6 @@ const NextButton = ({
         icon="chevron-right"
         size="small"
         aria-label={title}
-        title={title}
         onClick={onClick}
         onKeyDown={onKeyDown}
       />