fix: hide toggle items text (#8307)

Author: sissbruecker

packages/side-nav/src/vaadin-side-nav-item.js

@@ -6,7 +6,6 @@
 import { html, LitElement } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { DisabledMixin } from '@vaadin/a11y-base/src/disabled-mixin.js';
-import { screenReaderOnly } from '@vaadin/a11y-base/src/styles/sr-only-styles.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
@@ -176,7 +175,7 @@ class SideNavItem extends SideNavChildrenMixin(DisabledMixin(ElementMixin(Themab
   }
 
   static get styles() {
-    return [screenReaderOnly, sideNavItemBaseStyles];
+    return [sideNavItemBaseStyles];
   }
 
   constructor() {
@@ -271,7 +270,7 @@ class SideNavItem extends SideNavChildrenMixin(DisabledMixin(ElementMixin(Themab
       <ul part="children" role="list" ?hidden="${!this.expanded}" aria-hidden="${this.expanded ? 'false' : 'true'}">
         <slot name="children"></slot>
       </ul>
-      <div class="sr-only" id="i18n">${this.i18n.toggle}</div>
+      <div hidden id="i18n">${this.i18n.toggle}</div>
     `;
   }
 

packages/side-nav/test/dom/__snapshots__/side-nav-item.test.snap.js

@@ -208,7 +208,7 @@ snapshots["vaadin-side-nav-item shadow default"] =
   </slot>
 </ul>
 <div
-  class="sr-only"
+  hidden=""
   id="i18n"
 >
   Toggle child items
@@ -248,7 +248,7 @@ snapshots["vaadin-side-nav-item shadow expanded"] =
   </slot>
 </ul>
 <div
-  class="sr-only"
+  hidden=""
   id="i18n"
 >
   Toggle child items
@@ -289,7 +289,7 @@ snapshots["vaadin-side-nav-item shadow current"] =
   </slot>
 </ul>
 <div
-  class="sr-only"
+  hidden=""
   id="i18n"
 >
   Toggle child items
@@ -331,7 +331,7 @@ snapshots["vaadin-side-nav-item shadow path"] =
   </slot>
 </ul>
 <div
-  class="sr-only"
+  hidden=""
   id="i18n"
 >
   Toggle child items
@@ -372,7 +372,7 @@ snapshots["vaadin-side-nav-item shadow null path"] =
   </slot>
 </ul>
 <div
-  class="sr-only"
+  hidden=""
   id="i18n"
 >
   Toggle child items
@@ -413,7 +413,7 @@ snapshots["vaadin-side-nav-item shadow i18n"] =
   </slot>
 </ul>
 <div
-  class="sr-only"
+  hidden=""
   id="i18n"
 >
   Toggle children