feat(Helpers): deprecate .dnb-sr-only--inline & .dnb-not-sr-only (#1865)

dnbexperience · Feb 23, 2023 · 8d73d6f · 8d73d6f
1 parent a4e0032
commit 8d73d6f
Show file tree

Hide file tree

Showing 7 changed files with 0 additions and 87 deletions.
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
@@ -93,23 +93,6 @@ export function ScreenReaderOnlyExample() {
   )
 }
 
-export function NoScreenReaderExample() {
-  return (
-    <Wrapper className="dnb-spacing">
-      <ComponentBox hideCode data-visual-test="helper-not-sr-only">
-        {
-          /* jsx */ `
-<p className="dnb-p dnb-sr-only dnb-not-sr-only">
-  I'm the opposite of .dnb-sr-only, so you should be able to see
-  me.
-</p>
-        `
-        }
-      </ComponentBox>
-    </Wrapper>
-  )
-}
-
 export function SelectionExample() {
   return (
     <Wrapper className="dnb-spacing">

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
@@ -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
 
 <ScreenReaderOnlyExample />
 
-### 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 `<p>`) 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
-<p>text <span class="dnb-sr-only--inline">sr-only</span> text</p>
-```
-
-<NoScreenReaderExample />
-
 ## 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
@@ -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() {
       <TabFocusExample />
       <UnstyledListExample />
       <ScreenReaderOnlyExample />
-      <NoScreenReaderExample />
       <SelectionExample />
     </>
   )

diff --git a/...ages/dnb-eufemia/src/style/core/helper-classes/__tests__/HelperClasses.screenshot.test.js b/...ages/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/...ot-test-js-helper-classes-screenshot-have-to-match-not-sr-only-1-a1ff0.snap.png b/...ot-test-js-helper-classes-screenshot-have-to-match-not-sr-only-1-a1ff0.snap.png
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
@@ -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
@@ -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);