fix: refactor of form components to ensure that aria-describedby do…

…es not get an leading white-space
dnbexperience · Sep 23, 2020 · 3d08959 · 3d08959
1 parent 449f9f4
commit 3d08959
Show file tree

Hide file tree

Showing 15 changed files with 68 additions and 40 deletions.
diff --git a/packages/dnb-ui-lib/src/components/checkbox/Checkbox.js b/packages/dnb-ui-lib/src/components/checkbox/Checkbox.js
@@ -240,9 +240,12 @@ export default class Checkbox extends React.PureComponent {
     }
 
     if (showStatus || suffix) {
-      inputParams['aria-describedby'] = `${
-        showStatus ? id + '-status' : ''
-      } ${suffix ? id + '-suffix' : ''}`
+      inputParams['aria-describedby'] = [
+        showStatus ? id + '-status' : null,
+        suffix ? id + '-suffix' : null
+      ]
+        .filter(Boolean)
+        .join(' ')
     }
     if (readOnly) {
       inputParams['aria-readonly'] = inputParams.readOnly = true

diff --git a/packages/dnb-ui-lib/src/components/date-picker/DatePicker.js b/packages/dnb-ui-lib/src/components/date-picker/DatePicker.js
@@ -744,9 +744,12 @@ export default class DatePicker extends React.PureComponent {
 
     const pickerParams = {}
     if (showStatus || suffix) {
-      pickerParams['aria-describedby'] = `${
-        showStatus ? id + '-status' : ''
-      } ${suffix ? id + '-suffix' : ''}`
+      pickerParams['aria-describedby'] = [
+        showStatus ? id + '-status' : null,
+        suffix ? id + '-suffix' : null
+      ]
+        .filter(Boolean)
+        .join(' ')
     }
     if (label) {
       pickerParams['aria-labelledby'] = id + '-label'

diff --git a/...ges/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap b/...ges/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap
@@ -94,7 +94,7 @@ exports[`DatePicker component have to match snapshot 1`] = `
     lang="nb"
   >
     <span
-      aria-describedby="date-picker-id-status "
+      aria-describedby="date-picker-id-status"
       className="dnb-date-picker__inner"
     >
       <AlignmentHelper

diff --git a/packages/dnb-ui-lib/src/components/dropdown/Dropdown.js b/packages/dnb-ui-lib/src/components/dropdown/Dropdown.js
@@ -504,9 +504,12 @@ class DropdownInstance extends React.PureComponent {
       triggerParams['aria-label'] = title
     }
     if (showStatus || suffix) {
-      triggerParams['aria-describedby'] = `${
-        showStatus ? id + '-status' : ''
-      } ${suffix ? id + '-suffix' : ''}`
+      triggerParams['aria-describedby'] = [
+        showStatus ? id + '-status' : null,
+        suffix ? id + '-suffix' : null
+      ]
+        .filter(Boolean)
+        .join(' ')
     }
 
     // also used for code markup simulation

diff --git a/packages/dnb-ui-lib/src/components/radio/Radio.js b/packages/dnb-ui-lib/src/components/radio/Radio.js
@@ -333,9 +333,12 @@ export default class Radio extends React.PureComponent {
           }
 
           if (showStatus || suffix) {
-            inputParams['aria-describedby'] = `${
-              showStatus ? id + '-status' : ''
-            } ${suffix ? id + '-suffix' : ''}`
+            inputParams['aria-describedby'] = [
+              showStatus ? id + '-status' : null,
+              suffix ? id + '-suffix' : null
+            ]
+              .filter(Boolean)
+              .join(' ')
           }
           if (readOnly) {
             inputParams['aria-readonly'] = inputParams.readOnly = true

diff --git a/packages/dnb-ui-lib/src/components/radio/RadioGroup.js b/packages/dnb-ui-lib/src/components/radio/RadioGroup.js
@@ -211,9 +211,12 @@ export default class RadioGroup extends React.PureComponent {
     }
 
     if (showStatus || suffix) {
-      params['aria-describedby'] = `${showStatus ? id + '-status' : ''} ${
-        suffix ? id + '-suffix' : ''
-      }`
+      params['aria-describedby'] = [
+        showStatus ? id + '-status' : null,
+        suffix ? id + '-suffix' : null
+      ]
+        .filter(Boolean)
+        .join(' ')
     }
     if (label) {
       params['aria-labelledby'] = id + '-label'

diff --git a/packages/dnb-ui-lib/src/components/radio/__tests__/__snapshots__/Radio.test.js.snap b/packages/dnb-ui-lib/src/components/radio/__tests__/__snapshots__/Radio.test.js.snap
@@ -83,7 +83,7 @@ exports[`Radio component have to match snapshot 1`] = `
           >
             <input
               aria-checked={false}
-              aria-describedby=" radio-suffix"
+              aria-describedby="radio-suffix"
               checked={false}
               className="dnb-radio__input"
               direction="horizontal"

diff --git a/packages/dnb-ui-lib/src/components/slider/Slider.js b/packages/dnb-ui-lib/src/components/slider/Slider.js
@@ -577,13 +577,14 @@ export default class Slider extends React.PureComponent {
       }
     }
     if (showStatus || suffix) {
-      rangeParams['aria-describedby'] = `${
-        showStatus ? id + '-status' : ''
-      } ${suffix ? id + '-suffix' : ''}`
+      rangeParams['aria-describedby'] = [
+        showStatus ? id + '-status' : null,
+        suffix ? id + '-suffix' : null
+      ]
+        .filter(Boolean)
+        .join(' ')
       if (isTouchDevice()) {
-        trackParams['aria-describedby'] = `${
-          showStatus ? id + '-status' : ''
-        } ${suffix ? id + '-suffix' : ''}`
+        trackParams['aria-describedby'] = rangeParams['aria-describedby']
       }
     }
 

diff --git a/packages/dnb-ui-lib/src/components/slider/__tests__/__snapshots__/Slider.test.js.snap b/packages/dnb-ui-lib/src/components/slider/__tests__/__snapshots__/Slider.test.js.snap
@@ -207,7 +207,7 @@ exports[`Slider component have to match snapshot 1`] = `
             }
           >
             <input
-              aria-describedby=" id-suffix"
+              aria-describedby="id-suffix"
               aria-labelledby="id-label"
               className="dnb-slider__button-helper"
               disabled={false}

diff --git a/packages/dnb-ui-lib/src/components/switch/Switch.js b/packages/dnb-ui-lib/src/components/switch/Switch.js
@@ -261,9 +261,12 @@ export default class Switch extends React.PureComponent {
     }
 
     if (showStatus || suffix) {
-      inputParams['aria-describedby'] = `${
-        showStatus ? id + '-status' : ''
-      } ${suffix ? id + '-suffix' : ''}`
+      inputParams['aria-describedby'] = [
+        showStatus ? id + '-status' : null,
+        suffix ? id + '-suffix' : null
+      ]
+        .filter(Boolean)
+        .join(' ')
     }
     if (readOnly) {
       inputParams['aria-readonly'] = inputParams.readOnly = true

diff --git a/packages/dnb-ui-lib/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap b/packages/dnb-ui-lib/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap
@@ -84,7 +84,7 @@ exports[`Switch component have to match snapshot 1`] = `
           >
             <input
               aria-checked={false}
-              aria-describedby=" id-suffix"
+              aria-describedby="id-suffix"
               checked={false}
               className="dnb-switch__input"
               disabled={false}

diff --git a/packages/dnb-ui-lib/src/components/textarea/Textarea.js b/packages/dnb-ui-lib/src/components/textarea/Textarea.js
@@ -288,9 +288,12 @@ export default class Textarea extends React.PureComponent {
 
     // we may considder using: aria-details
     if (showStatus || suffix) {
-      textareaParams['aria-describedby'] = `${
-        showStatus ? id + '-status' : ''
-      } ${suffix ? id + '-suffix' : ''}`
+      textareaParams['aria-describedby'] = [
+        showStatus ? id + '-status' : null,
+        suffix ? id + '-suffix' : null
+      ]
+        .filter(Boolean)
+        .join(' ')
     }
     if (readOnly) {
       textareaParams['aria-readonly'] = textareaParams.readOnly = true

diff --git a/packages/dnb-ui-lib/src/components/toggle-button/ToggleButton.js b/packages/dnb-ui-lib/src/components/toggle-button/ToggleButton.js
@@ -391,9 +391,12 @@ export default class ToggleButton extends React.PureComponent {
           }
 
           if (showStatus || suffix) {
-            buttonParams['aria-describedby'] = `${
-              showStatus ? id + '-status' : ''
-            } ${suffix ? id + '-suffix' : ''}`
+            buttonParams['aria-describedby'] = [
+              showStatus ? id + '-status' : null,
+              suffix ? id + '-suffix' : null
+            ]
+              .filter(Boolean)
+              .join(' ')
           }
           if (readOnly) {
             buttonParams['aria-readonly'] = buttonParams.readOnly = true

diff --git a/packages/dnb-ui-lib/src/components/toggle-button/ToggleButtonGroup.js b/packages/dnb-ui-lib/src/components/toggle-button/ToggleButtonGroup.js
@@ -255,9 +255,12 @@ export default class ToggleButtonGroup extends React.PureComponent {
     }
 
     if (showStatus || suffix) {
-      params['aria-describedby'] = `${showStatus ? id + '-status' : ''} ${
-        suffix ? id + '-suffix' : ''
-      }`
+      params['aria-describedby'] = [
+        showStatus ? id + '-status' : null,
+        suffix ? id + '-suffix' : null
+      ]
+        .filter(Boolean)
+        .join(' ')
     }
     if (label) {
       params['aria-labelledby'] = id + '-label'

diff --git a/...dnb-ui-lib/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.js.snap b/...dnb-ui-lib/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.js.snap
@@ -80,7 +80,7 @@ exports[`ToggleButton component have to match snapshot 1`] = `
           />
         </AlignmentHelper>
         <Button
-          aria-describedby=" toggle-button-suffix"
+          aria-describedby="toggle-button-suffix"
           aria-pressed="false"
           bounding={false}
           class={null}
@@ -111,7 +111,7 @@ exports[`ToggleButton component have to match snapshot 1`] = `
           wrap={false}
         >
           <button
-            aria-describedby=" toggle-button-suffix"
+            aria-describedby="toggle-button-suffix"
             aria-pressed="false"
             className="dnb-button dnb-button--secondary dnb-button--has-text dnb-toggle-button__button dnb-button--icon-position-left dnb-button--has-icon dnb-button--icon-size-icon_size"
             disabled={false}
@@ -123,7 +123,7 @@ exports[`ToggleButton component have to match snapshot 1`] = `
             type="button"
           >
             <Content
-              aria-describedby=" toggle-button-suffix"
+              aria-describedby="toggle-button-suffix"
               aria-pressed="false"
               bounding={false}
               class={null}