@fluid-topics/ft-wc-utils 1.2.67 → 1.2.68

package/build/accessibility.styles.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Invisible Content Just for Screen Reader Users
+ * See more:
+ * - https://webaim.org/techniques/css/invisiblecontent/
+ * - https://webaim.org/techniques/skipnav/
+ *
+ * The following are the recommended styles for visually hiding content
+ * that will be read by a screen reader.
+ *
+ * The .sr-only CSS class should then be referenced in the tag of the
+ * element being hidden, as shown:
+ * <div class="sr-only">This text is hidden.</div>
+ *
+ * Sighted users will not see the hidden content at all—it will be hidden well
+ * to the left of the visible browser window. Because it is still part of the
+ * page content, screen readers will read it.
+ *
+ * Skip navigation links are useful to give screen reader and keyboard users the
+ * capability of navigating directly to the main content.
+ *
+ * To address the concerns that a visible skip link can be intrusive, but
+ * still create a skip link that is useful for sighted keyboard users, we
+ * recommend creating a link that is hidden until to the user navigates to it
+ * with a keyboard.
+ *
+ * This technique uses two style definitions—one to visually hide the link, and
+ * another using the a:focus pseudo-class to visually reveal the link while it has focus.
+ *
+ * These styles should then be applied to the "skip" link:
+ * <div id="skip"><a href="#content">Skip to Main Content</a></div>
+ */
+export declare const screenReaderStyles: import("lit").CSSResult;

package/build/accessibility.styles.js

@@ -0,0 +1,57 @@
+import { css } from "lit";
+/**
+ * Invisible Content Just for Screen Reader Users
+ * See more:
+ * - https://webaim.org/techniques/css/invisiblecontent/
+ * - https://webaim.org/techniques/skipnav/
+ *
+ * The following are the recommended styles for visually hiding content
+ * that will be read by a screen reader.
+ *
+ * The .sr-only CSS class should then be referenced in the tag of the
+ * element being hidden, as shown:
+ * <div class="sr-only">This text is hidden.</div>
+ *
+ * Sighted users will not see the hidden content at all—it will be hidden well
+ * to the left of the visible browser window. Because it is still part of the
+ * page content, screen readers will read it.
+ *
+ * Skip navigation links are useful to give screen reader and keyboard users the
+ * capability of navigating directly to the main content.
+ *
+ * To address the concerns that a visible skip link can be intrusive, but
+ * still create a skip link that is useful for sighted keyboard users, we
+ * recommend creating a link that is hidden until to the user navigates to it
+ * with a keyboard.
+ *
+ * This technique uses two style definitions—one to visually hide the link, and
+ * another using the a:focus pseudo-class to visually reveal the link while it has focus.
+ *
+ * These styles should then be applied to the "skip" link:
+ * <div id="skip"><a href="#content">Skip to Main Content</a></div>
+ */
+export const screenReaderStyles = css `
+    .sr-only {
+        position:absolute;
+        left:-10000px;
+        top:auto;
+        width:1px;
+        height:1px;
+        overflow:hidden;
+    }
+
+    #skip a {
+        position:absolute;
+        left:-10000px;
+        top:auto;
+        width:1px;
+        height:1px;
+        overflow:hidden;
+    }
+
+    #skip a:focus {
+        position:static;
+        width:auto;
+        height:auto;
+    }
+`;