test(sbb-screen-reader-only): add visual tests (#2868)

src/elements/screen-reader-only/__snapshots__/screen-reader-only.snapshot.spec.snap.js

@@ -1,17 +1,17 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
 
-snapshots["sbb-screen-reader-only renders with Light DOM"] = 
+snapshots["sbb-screen-reader-only renders DOM"] = 
 `<sbb-screen-reader-only>
 </sbb-screen-reader-only>
 `;
-/* end snapshot sbb-screen-reader-only renders with Light DOM */
+/* end snapshot sbb-screen-reader-only renders DOM */
 
-snapshots["sbb-screen-reader-only renders with Shadow DOM"] = 
+snapshots["sbb-screen-reader-only renders Shadow DOM"] = 
 `<slot>
 </slot>
 `;
-/* end snapshot sbb-screen-reader-only renders with Shadow DOM */
+/* end snapshot sbb-screen-reader-only renders Shadow DOM */
 
 snapshots["sbb-screen-reader-only renders A11y tree Chrome"] = 
 `<p>

src/elements/screen-reader-only/screen-reader-only.snapshot.spec.ts

@@ -15,11 +15,11 @@ describe(`sbb-screen-reader-only`, () => {
       root = await fixture(html`<sbb-screen-reader-only></sbb-screen-reader-only>`);
     });
 
-    it('with Light DOM', async () => {
+    it('DOM', async () => {
       await expect(root).dom.to.be.equalSnapshot();
     });
 
-    it('with Shadow DOM', async () => {
+    it('Shadow DOM', async () => {
       await expect(root).shadowDom.to.be.equalSnapshot();
     });
 

src/elements/screen-reader-only/screen-reader-only.visual.spec.ts

@@ -0,0 +1,21 @@
+import { html } from 'lit';
+
+import { describeViewports, visualDiffDefault } from '../core/testing/private.js';
+
+import './screen-reader-only.js';
+
+describe(`sbb-screen-reader-only`, () => {
+  describeViewports({ viewports: ['medium'] }, () => {
+    it(
+      visualDiffDefault.name,
+      visualDiffDefault.with(async (setup) => {
+        await setup.withFixture(html`
+          There is a visually hidden text here:
+          <sbb-screen-reader-only>
+            I'm visually hidden, but read to screen reader.
+          </sbb-screen-reader-only>
+        `);
+      }),
+    );
+  });
+});