feat(visually-hidden): implement a utility component to visually hide…

… content

fix(pagination): add a visually hidden label for the page input field

refactor(breadcrumb): use visually hidden element

src/components/breadcrumb/Breadcrumb.js

@@ -7,6 +7,7 @@ import { Icon } from "../icon/icon.js"
 import "../menu/leu-menu.js"
 import "../menu/leu-menu-item.js"
 import "../popup/leu-popup.js"
+import "../visually-hidden/leu-visually-hidden.js"
 import { debounce } from "../../lib/utils.js"
 
 /**
@@ -276,7 +277,7 @@ export class LeuBreadcrumb extends LitElement {
 
     return html`
       <nav class=${classMap(wrapperClasses)}>
-        <h2 class="visuallyhidden">Sie sind hier:</h2>
+        <leu-visually-hidden><h2>Sie sind hier:</h2></leu-visually-hidden>
         <ol class="breadcrumbs__list" ref=${ref(this._containerRef)}>
           ${showBackOnly
             ? html` <li class="breadcrumbs__item breadcrumbs__item--back">

src/components/breadcrumb/breadcrumb.css

@@ -74,17 +74,6 @@
   box-shadow: var(--leu-box-shadow-short);
 }
 
-.visuallyhidden {
-  clip: rect(0 0 0 0);
-  border: 0;
-  height: 1px;
-  margin: -1px !important;
-  overflow: hidden;
-  padding: 0 !important;
-  position: absolute;
-  width: 1px;
-}
-
 .breadcrumbs {
   font-size: 1rem;
 }

src/components/pagination/Pagination.js

@@ -4,6 +4,8 @@ import { live } from "lit/directives/live.js"
 import "../button/leu-button.js"
 import styles from "./pagination.css"
 
+import "../visually-hidden/leu-visually-hidden.js"
+
 const MIN_PAGE = 1
 
 /**
@@ -133,7 +135,11 @@ export class LeuPagination extends LitElement {
 
   render() {
     return html`
+      <leu-visually-hidden>
+        <label for="page-input">Aktuelle Seite</label>
+      </leu-visually-hidden>
       <input
+        id="page-input"
         class="input"
         min=${MIN_PAGE}
         max=${this._maxPage}

src/components/visually-hidden/VisuallyHidden.js

@@ -0,0 +1,13 @@
+import { html, LitElement } from "lit"
+import styles from "./visually-hidden.css"
+
+/**
+ * @tagname leu-visually-hidden
+ */
+export class LeuVisuallyHidden extends LitElement {
+  static styles = styles
+
+  render() {
+    return html`<slot></slot>`
+  }
+}

src/components/visually-hidden/leu-visually-hidden.js

@@ -0,0 +1,6 @@
+import { defineElement } from "../../lib/defineElement.js"
+import { LeuVisuallyHidden } from "./VisuallyHidden.js"
+
+export { LeuVisuallyHidden }
+
+defineElement("visually-hidden", LeuVisuallyHidden)

src/components/visually-hidden/stories/visually-hidden.stories.js

@@ -0,0 +1,22 @@
+import { html } from "lit"
+import "../leu-visually-hidden.js"
+
+export default {
+  title: "VisuallyHidden",
+  component: "leu-visually-hidden",
+  argTypes: {
+    content: {
+      control: "text",
+    },
+  },
+}
+
+function Template({ content }) {
+  return html` <leu-visually-hidden>${content}</leu-visually-hidden>`
+}
+
+export const Regular = Template.bind({})
+Regular.args = {
+  content:
+    "This is a text that isn't visible but still accessible for screenreaders.",
+}

src/components/visually-hidden/test/visually-hidden.test.js

@@ -0,0 +1,36 @@
+import { html } from "lit"
+import { fixture, expect } from "@open-wc/testing"
+
+import "../leu-visually-hidden.js"
+
+async function defaultFixture() {
+  return fixture(
+    html`
+      <leu-visually-hidden>
+        This is a text that shouldn't be visible but still accessible.
+      </leu-visually-hidden>
+    `
+  )
+}
+
+describe("LeuVisuallyHidden", () => {
+  it("is a defined element", async () => {
+    const el = await customElements.get("leu-visually-hidden")
+
+    await expect(el).not.to.be.undefined
+  })
+
+  it("passes the a11y audit", async () => {
+    const el = await defaultFixture()
+
+    await expect(el).to.be.accessible()
+  })
+
+  it("renders the default slot content", async () => {
+    const el = await defaultFixture()
+
+    expect(el).dom.to.equal(
+      "<leu-visually-hidden>This is a text that shouldn't be visible but still accessible.</leu-visually-hidden>"
+    )
+  })
+})

src/components/visually-hidden/visually-hidden.css

@@ -0,0 +1,10 @@
+:host {
+  clip: rect(0 0 0 0);
+  border: 0;
+  height: 1px;
+  margin: -1px !important;
+  overflow: hidden;
+  padding: 0 !important;
+  position: absolute;
+  width: 1px;
+}