From 77897787183dba721a85d2b3ba0929b0c659c7b4 Mon Sep 17 00:00:00 2001 From: Anders Date: Mon, 9 Jan 2023 13:02:49 +0100 Subject: [PATCH] feat(Helpers): deprecate .dnb-sr-only--inline & .dnb-not-sr-only (#1865) --- .../src/docs/uilib/helpers/Examples.js | 17 ---------- .../src/docs/uilib/helpers/classes.md | 21 ------------ .../uilib/helpers/classes/visual-tests.js | 2 -- .../HelperClasses.screenshot.test.js | 8 ----- ...have-to-match-not-sr-only-1-a1ff0.snap.png | Bin 6649 -> 0 bytes .../core/helper-classes/helper-classes.scss | 8 ----- .../dnb-eufemia/src/style/core/utilities.scss | 31 ------------------ 7 files changed, 87 deletions(-) delete mode 100644 packages/dnb-eufemia/src/style/core/helper-classes/__tests__/__snapshots__/helper-classes-screenshot-test-js-helper-classes-screenshot-have-to-match-not-sr-only-1-a1ff0.snap.png diff --git a/packages/dnb-design-system-portal/src/docs/uilib/helpers/Examples.js b/packages/dnb-design-system-portal/src/docs/uilib/helpers/Examples.js index fb5c48d8c6f..103477f181c 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/helpers/Examples.js +++ b/packages/dnb-design-system-portal/src/docs/uilib/helpers/Examples.js @@ -93,23 +93,6 @@ export function ScreenReaderOnlyExample() { ) } -export function NoScreenReaderExample() { - return ( - - - { - /* jsx */ ` -

- I'm the opposite of .dnb-sr-only, so you should be able to see - me. -

- ` - } - - - ) -} - export function SelectionExample() { return ( diff --git a/packages/dnb-design-system-portal/src/docs/uilib/helpers/classes.md b/packages/dnb-design-system-portal/src/docs/uilib/helpers/classes.md index 8458804dd48..58cfc96fcce 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/helpers/classes.md +++ b/packages/dnb-design-system-portal/src/docs/uilib/helpers/classes.md @@ -7,7 +7,6 @@ CoreStyleExample, TabFocusExample, UnstyledListExample, ScreenReaderOnlyExample, -NoScreenReaderExample, SelectionExample } from 'Docs/uilib/helpers/Examples' import SkipLinkExample from 'Docs/uilib/usage/accessibility/examples/skip-link-example.js' @@ -105,24 +104,6 @@ Visually hides an element, but is still reachable by screen readers. (_sr_ stand -### Screen Reader only: inline - -`dnb-sr-only--inline` (deprecated in v10) - -Like `dnb-sr-only` - but with flow elements in mind. This enables a set of text (in a paragraph `

`) to be enhanced with spans inside without NVDA to split up reading the text. - -### Not Screen Reader only - -`dnb-not-sr-only` (deprecated in v10) - -The opposite of `dnb-sr-only`, so not visible to screen readers. - -```html -

text sr-only text

-``` - - - ## Drop shadow `dnb-drop-shadow` @@ -212,8 +193,6 @@ You can import Eufemia _mixins_ directly into your SCSS styles: /** Screen Reader Only */ @include srOnly() { } // .dnb-sr-only -@include srOnlyInline() { -} // .dnb-sr-only--inline /** Browser Checks */ @include IS_EDGE { diff --git a/packages/dnb-design-system-portal/src/docs/uilib/helpers/classes/visual-tests.js b/packages/dnb-design-system-portal/src/docs/uilib/helpers/classes/visual-tests.js index 11a7f2ab3b1..d211c8be483 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/helpers/classes/visual-tests.js +++ b/packages/dnb-design-system-portal/src/docs/uilib/helpers/classes/visual-tests.js @@ -4,7 +4,6 @@ import { TabFocusExample, UnstyledListExample, ScreenReaderOnlyExample, - NoScreenReaderExample, SelectionExample, } from '../Examples' import { warn } from '@dnb/eufemia/src/shared/component-helper' @@ -36,7 +35,6 @@ export default function VisualTests() { - ) diff --git a/packages/dnb-eufemia/src/style/core/helper-classes/__tests__/HelperClasses.screenshot.test.js b/packages/dnb-eufemia/src/style/core/helper-classes/__tests__/HelperClasses.screenshot.test.js index 84d93fb640f..4a9ff981643 100644 --- a/packages/dnb-eufemia/src/style/core/helper-classes/__tests__/HelperClasses.screenshot.test.js +++ b/packages/dnb-eufemia/src/style/core/helper-classes/__tests__/HelperClasses.screenshot.test.js @@ -45,14 +45,6 @@ describe('HelperClasses screenshot', () => { expect(screenshot).toMatchImageSnapshot() }) - it('have to match not-sr-only', async () => { - const screenshot = await testPageScreenshot({ - addWrapper: false, - selector: '[data-visual-test="helper-not-sr-only"]', - }) - expect(screenshot).toMatchImageSnapshot() - }) - it('have to match selection', async () => { const screenshot = await testPageScreenshot({ addWrapper: false, diff --git a/packages/dnb-eufemia/src/style/core/helper-classes/__tests__/__snapshots__/helper-classes-screenshot-test-js-helper-classes-screenshot-have-to-match-not-sr-only-1-a1ff0.snap.png b/packages/dnb-eufemia/src/style/core/helper-classes/__tests__/__snapshots__/helper-classes-screenshot-test-js-helper-classes-screenshot-have-to-match-not-sr-only-1-a1ff0.snap.png deleted file mode 100644 index 2868be36fad20c2b9d23c3b97c4afd458267dd8c..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 6649 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 diff --git a/packages/dnb-eufemia/src/style/core/helper-classes/helper-classes.scss b/packages/dnb-eufemia/src/style/core/helper-classes/helper-classes.scss index abeae44157e..0f26b606b11 100644 --- a/packages/dnb-eufemia/src/style/core/helper-classes/helper-classes.scss +++ b/packages/dnb-eufemia/src/style/core/helper-classes/helper-classes.scss @@ -38,14 +38,6 @@ @include srOnly(); } -// deprecated and can be removed in v10 -.dnb-sr-only--inline { - @include srOnlyInline(); -} -// deprecated and can be removed in v10 -.dnb-not-sr-only { - @include notSrOnly(); -} .dnb-suffix { padding-left: 0.5rem; diff --git a/packages/dnb-eufemia/src/style/core/utilities.scss b/packages/dnb-eufemia/src/style/core/utilities.scss index bb8192fba00..a1bf977adc4 100644 --- a/packages/dnb-eufemia/src/style/core/utilities.scss +++ b/packages/dnb-eufemia/src/style/core/utilities.scss @@ -319,37 +319,6 @@ $breakpoints: ( border: 0; } -// deprecated and can be removed in v10 -// Visual test and docs should be removed as well! -@mixin srOnlyInline() { - @include srOnly(); - - // since we do use it also as positioning helper - // we then do not want it absolute positioned - position: static; - display: inline-block; - - visibility: visible; // should not be hidden! - - font-size: 0; - line-height: 0; -} - -// deprecated and can be removed in v10 -// Visual test and docs should be removed as well! -@mixin notSrOnly() { - position: initial; - max-width: initial; - max-height: initial; - - clip-path: initial; - overflow: auto; - - font-size: initial; - line-height: initial; - white-space: initial; -} - @function str-replace($string, $search, $replace: '') { $index: str-index($string, $search);