Use standard sr-only CSS class for hiding ARIA message areas

Author: aimeos

packages/he-tree-vue/src/components/BaseTree.vue

@@ -73,14 +73,14 @@
       <slot name="append" :tree="self"></slot>
       <div
         v-if="liveAnnouncement != null"
-        class="he-tree-sr-only"
+        class="sr-only"
         aria-live="polite"
         aria-atomic="true"
       >{{ liveAnnouncement }}</div>
       <div
         v-if="i18n?.instructions"
         :id="ariaInstructionsId"
-        class="he-tree-sr-only"
+        class="sr-only"
       >{{ i18n.instructions }}</div>
     </template>
   </VirtualList>
@@ -502,14 +502,15 @@ function reactiveFirstArg(func: any) {
   width: 100%;
 }
 
-.he-tree-sr-only {
+.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
   white-space: nowrap;
   border: 0;
 }