From 20bb13a1645d1f6f561302a871c6e1cb934ff276 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tobias=20H=C3=B8egh?= Date: Fri, 8 Oct 2021 21:24:46 +0200 Subject: [PATCH] fix: fix FormLabel sr-only to be more robust --- .../__snapshots__/Autocomplete.test.js.snap | 12 ++++++------ .../__snapshots__/Checkbox.test.js.snap | 12 ++++++------ .../__snapshots__/DatePicker.test.js.snap | 12 ++++++------ .../__snapshots__/Dropdown.test.js.snap | 12 ++++++------ .../__snapshots__/FormLabel.test.js.snap | 12 ++++++------ .../form-label/style/_form-label.scss | 18 +++++++++++------- .../__snapshots__/FormRow.test.js.snap | 12 ++++++------ .../__snapshots__/InputMasked.test.js.snap | 12 ++++++------ .../__tests__/__snapshots__/Input.test.js.snap | 12 ++++++------ .../__tests__/__snapshots__/Radio.test.js.snap | 12 ++++++------ .../__snapshots__/Slider.test.js.snap | 12 ++++++------ .../__snapshots__/Switch.test.js.snap | 12 ++++++------ .../__snapshots__/Textarea.test.js.snap | 12 ++++++------ .../__snapshots__/ToggleButton.test.js.snap | 12 ++++++------ 14 files changed, 89 insertions(+), 85 deletions(-) diff --git a/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap index b452353042c..74b5ee2af07 100644 --- a/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap +++ b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap @@ -1773,12 +1773,12 @@ button.dnb-button::-moz-focus-inner { margin-right: 0; margin-bottom: 0.5rem; } .dnb-form-label--sr-only { - width: 1px; - margin: 0; - padding: 0; - margin-left: -1px; - overflow: hidden; - white-space: nowrap; } + width: 1px !important; + margin: 0 !important; + padding: 0 !important; + margin-left: -1px !important; + overflow: hidden !important; + white-space: nowrap !important; } .dnb-form-label[for]:not([disabled]) { user-select: none; -webkit-user-select: none; diff --git a/packages/dnb-eufemia/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap b/packages/dnb-eufemia/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap index 84e87687d92..6bc13bcefb0 100644 --- a/packages/dnb-eufemia/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap +++ b/packages/dnb-eufemia/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap @@ -360,12 +360,12 @@ exports[`Checkbox scss have to match snapshot 1`] = ` margin-right: 0; margin-bottom: 0.5rem; } .dnb-form-label--sr-only { - width: 1px; - margin: 0; - padding: 0; - margin-left: -1px; - overflow: hidden; - white-space: nowrap; } + width: 1px !important; + margin: 0 !important; + padding: 0 !important; + margin-left: -1px !important; + overflow: hidden !important; + white-space: nowrap !important; } .dnb-form-label[for]:not([disabled]) { user-select: none; -webkit-user-select: none; diff --git a/packages/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap b/packages/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap index 1e1e1e36c22..5bcd7672e1c 100644 --- a/packages/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap +++ b/packages/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap @@ -2113,12 +2113,12 @@ button.dnb-button::-moz-focus-inner { margin-right: 0; margin-bottom: 0.5rem; } .dnb-form-label--sr-only { - width: 1px; - margin: 0; - padding: 0; - margin-left: -1px; - overflow: hidden; - white-space: nowrap; } + width: 1px !important; + margin: 0 !important; + padding: 0 !important; + margin-left: -1px !important; + overflow: hidden !important; + white-space: nowrap !important; } .dnb-form-label[for]:not([disabled]) { user-select: none; -webkit-user-select: none; diff --git a/packages/dnb-eufemia/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap b/packages/dnb-eufemia/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap index 0b8ef4a9273..297f5c75ccf 100644 --- a/packages/dnb-eufemia/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap +++ b/packages/dnb-eufemia/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap @@ -1901,12 +1901,12 @@ button.dnb-button::-moz-focus-inner { margin-right: 0; margin-bottom: 0.5rem; } .dnb-form-label--sr-only { - width: 1px; - margin: 0; - padding: 0; - margin-left: -1px; - overflow: hidden; - white-space: nowrap; } + width: 1px !important; + margin: 0 !important; + padding: 0 !important; + margin-left: -1px !important; + overflow: hidden !important; + white-space: nowrap !important; } .dnb-form-label[for]:not([disabled]) { user-select: none; -webkit-user-select: none; diff --git a/packages/dnb-eufemia/src/components/form-label/__tests__/__snapshots__/FormLabel.test.js.snap b/packages/dnb-eufemia/src/components/form-label/__tests__/__snapshots__/FormLabel.test.js.snap index 555adad5e14..567731c76e7 100644 --- a/packages/dnb-eufemia/src/components/form-label/__tests__/__snapshots__/FormLabel.test.js.snap +++ b/packages/dnb-eufemia/src/components/form-label/__tests__/__snapshots__/FormLabel.test.js.snap @@ -126,12 +126,12 @@ exports[`FormLabel scss have to match snapshot 1`] = ` margin-right: 0; margin-bottom: 0.5rem; } .dnb-form-label--sr-only { - width: 1px; - margin: 0; - padding: 0; - margin-left: -1px; - overflow: hidden; - white-space: nowrap; } + width: 1px !important; + margin: 0 !important; + padding: 0 !important; + margin-left: -1px !important; + overflow: hidden !important; + white-space: nowrap !important; } .dnb-form-label[for]:not([disabled]) { user-select: none; -webkit-user-select: none; diff --git a/packages/dnb-eufemia/src/components/form-label/style/_form-label.scss b/packages/dnb-eufemia/src/components/form-label/style/_form-label.scss index bacbb86f2ee..90c2488d382 100644 --- a/packages/dnb-eufemia/src/components/form-label/style/_form-label.scss +++ b/packages/dnb-eufemia/src/components/form-label/style/_form-label.scss @@ -24,14 +24,18 @@ margin-right: 0; margin-bottom: 0.5rem; } + &--sr-only { - // could posssibly be 0, but has to be tested if sr still reads the text then - width: 1px; - margin: 0; - padding: 0; - margin-left: -1px; // because of 1px width - overflow: hidden; - white-space: nowrap; // so we don't get a large height because of wrapping in norrow space + // Could possibly be 0, but has to be tested if sr still reads the text then + // We make it custom here, because we need the height, + // therefore we don't use @mixin srOnly() + // also, we want !important here, because project styles, meant to adjust, can suddenly add a margin etc. + width: 1px !important; + margin: 0 !important; + padding: 0 !important; + margin-left: -1px !important; // because of 1px width + overflow: hidden !important; + white-space: nowrap !important; // so we don't get a large height because of wrapping in norrow space } // Is not in use diff --git a/packages/dnb-eufemia/src/components/form-row/__tests__/__snapshots__/FormRow.test.js.snap b/packages/dnb-eufemia/src/components/form-row/__tests__/__snapshots__/FormRow.test.js.snap index 4d15f2b8a0e..eb87161e50f 100644 --- a/packages/dnb-eufemia/src/components/form-row/__tests__/__snapshots__/FormRow.test.js.snap +++ b/packages/dnb-eufemia/src/components/form-row/__tests__/__snapshots__/FormRow.test.js.snap @@ -182,12 +182,12 @@ exports[`FormRow scss have to match snapshot 1`] = ` margin-right: 0; margin-bottom: 0.5rem; } .dnb-form-label--sr-only { - width: 1px; - margin: 0; - padding: 0; - margin-left: -1px; - overflow: hidden; - white-space: nowrap; } + width: 1px !important; + margin: 0 !important; + padding: 0 !important; + margin-left: -1px !important; + overflow: hidden !important; + white-space: nowrap !important; } .dnb-form-label[for]:not([disabled]) { user-select: none; -webkit-user-select: none; diff --git a/packages/dnb-eufemia/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap b/packages/dnb-eufemia/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap index 4386d56c707..26329d19bfe 100644 --- a/packages/dnb-eufemia/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap +++ b/packages/dnb-eufemia/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap @@ -730,12 +730,12 @@ button.dnb-button::-moz-focus-inner { margin-right: 0; margin-bottom: 0.5rem; } .dnb-form-label--sr-only { - width: 1px; - margin: 0; - padding: 0; - margin-left: -1px; - overflow: hidden; - white-space: nowrap; } + width: 1px !important; + margin: 0 !important; + padding: 0 !important; + margin-left: -1px !important; + overflow: hidden !important; + white-space: nowrap !important; } .dnb-form-label[for]:not([disabled]) { user-select: none; -webkit-user-select: none; diff --git a/packages/dnb-eufemia/src/components/input/__tests__/__snapshots__/Input.test.js.snap b/packages/dnb-eufemia/src/components/input/__tests__/__snapshots__/Input.test.js.snap index f6d22125274..86c5b22a9a2 100644 --- a/packages/dnb-eufemia/src/components/input/__tests__/__snapshots__/Input.test.js.snap +++ b/packages/dnb-eufemia/src/components/input/__tests__/__snapshots__/Input.test.js.snap @@ -1455,12 +1455,12 @@ button.dnb-button::-moz-focus-inner { margin-right: 0; margin-bottom: 0.5rem; } .dnb-form-label--sr-only { - width: 1px; - margin: 0; - padding: 0; - margin-left: -1px; - overflow: hidden; - white-space: nowrap; } + width: 1px !important; + margin: 0 !important; + padding: 0 !important; + margin-left: -1px !important; + overflow: hidden !important; + white-space: nowrap !important; } .dnb-form-label[for]:not([disabled]) { user-select: none; -webkit-user-select: none; diff --git a/packages/dnb-eufemia/src/components/radio/__tests__/__snapshots__/Radio.test.js.snap b/packages/dnb-eufemia/src/components/radio/__tests__/__snapshots__/Radio.test.js.snap index d6047a1f0b4..e44ffb38ff5 100644 --- a/packages/dnb-eufemia/src/components/radio/__tests__/__snapshots__/Radio.test.js.snap +++ b/packages/dnb-eufemia/src/components/radio/__tests__/__snapshots__/Radio.test.js.snap @@ -792,12 +792,12 @@ exports[`Radio scss have to match snapshot 1`] = ` margin-right: 0; margin-bottom: 0.5rem; } .dnb-form-label--sr-only { - width: 1px; - margin: 0; - padding: 0; - margin-left: -1px; - overflow: hidden; - white-space: nowrap; } + width: 1px !important; + margin: 0 !important; + padding: 0 !important; + margin-left: -1px !important; + overflow: hidden !important; + white-space: nowrap !important; } .dnb-form-label[for]:not([disabled]) { user-select: none; -webkit-user-select: none; diff --git a/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/Slider.test.js.snap b/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/Slider.test.js.snap index c05fa3103ae..8fa53fed21e 100644 --- a/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/Slider.test.js.snap +++ b/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/Slider.test.js.snap @@ -1139,12 +1139,12 @@ button.dnb-button::-moz-focus-inner { margin-right: 0; margin-bottom: 0.5rem; } .dnb-form-label--sr-only { - width: 1px; - margin: 0; - padding: 0; - margin-left: -1px; - overflow: hidden; - white-space: nowrap; } + width: 1px !important; + margin: 0 !important; + padding: 0 !important; + margin-left: -1px !important; + overflow: hidden !important; + white-space: nowrap !important; } .dnb-form-label[for]:not([disabled]) { user-select: none; -webkit-user-select: none; diff --git a/packages/dnb-eufemia/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap b/packages/dnb-eufemia/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap index b83bbb4c09f..7ea27968681 100644 --- a/packages/dnb-eufemia/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap +++ b/packages/dnb-eufemia/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap @@ -433,12 +433,12 @@ exports[`Switch scss have to match snapshot 1`] = ` margin-right: 0; margin-bottom: 0.5rem; } .dnb-form-label--sr-only { - width: 1px; - margin: 0; - padding: 0; - margin-left: -1px; - overflow: hidden; - white-space: nowrap; } + width: 1px !important; + margin: 0 !important; + padding: 0 !important; + margin-left: -1px !important; + overflow: hidden !important; + white-space: nowrap !important; } .dnb-form-label[for]:not([disabled]) { user-select: none; -webkit-user-select: none; diff --git a/packages/dnb-eufemia/src/components/textarea/__tests__/__snapshots__/Textarea.test.js.snap b/packages/dnb-eufemia/src/components/textarea/__tests__/__snapshots__/Textarea.test.js.snap index a02d251b1bb..491433eb36f 100644 --- a/packages/dnb-eufemia/src/components/textarea/__tests__/__snapshots__/Textarea.test.js.snap +++ b/packages/dnb-eufemia/src/components/textarea/__tests__/__snapshots__/Textarea.test.js.snap @@ -318,12 +318,12 @@ exports[`Textarea scss have to match snapshot 1`] = ` margin-right: 0; margin-bottom: 0.5rem; } .dnb-form-label--sr-only { - width: 1px; - margin: 0; - padding: 0; - margin-left: -1px; - overflow: hidden; - white-space: nowrap; } + width: 1px !important; + margin: 0 !important; + padding: 0 !important; + margin-left: -1px !important; + overflow: hidden !important; + white-space: nowrap !important; } .dnb-form-label[for]:not([disabled]) { user-select: none; -webkit-user-select: none; diff --git a/packages/dnb-eufemia/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.js.snap b/packages/dnb-eufemia/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.js.snap index 9ebee64b6d8..f37631ecf1d 100644 --- a/packages/dnb-eufemia/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.js.snap +++ b/packages/dnb-eufemia/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.js.snap @@ -1746,12 +1746,12 @@ exports[`ToggleButton scss have to match snapshot 1`] = ` margin-right: 0; margin-bottom: 0.5rem; } .dnb-form-label--sr-only { - width: 1px; - margin: 0; - padding: 0; - margin-left: -1px; - overflow: hidden; - white-space: nowrap; } + width: 1px !important; + margin: 0 !important; + padding: 0 !important; + margin-left: -1px !important; + overflow: hidden !important; + white-space: nowrap !important; } .dnb-form-label[for]:not([disabled]) { user-select: none; -webkit-user-select: none;