- Completed Completed Keanu Reeves
Am I dead? Okey dokey... free my mind. Right, no problem, free my mind, free my mind, no problem, right...
- Completed Completed Lawrence Fishburne
We have a rule We never free a mind once it's reached a certain age. It's dangerous, the mind has trouble letting go.
- Completed Completed Carrie-Ann Moss
Was it the same cat? A déjà vu is usually a glitch in the Matrix. It happens when they change something.
- Completed Completed Joe Pantoliano
Ignorance is bliss Why oh why didn't I take the blue pill?
- Completed Completed Hugo Weaving
I'd like to share a revelation I need the codes, I have to get inside Zion and you have to tell me how. `](/docs/components/page/#styles) native styles and utilities
### Components
+
+- Removed `` in favor of the utility class
- ``: `mobile-breakpoint` now takes any CSS length, not just pixels
- Added `checked` and `disabled` custom states to `` and ``
- Added `disabled`, `expanded`, `indeterminate`, and `selected` custom states to ``
diff --git a/docs/docs/utilities/visually-hidden.md b/docs/docs/utilities/visually-hidden.md
new file mode 100644
index 000000000..f2f5533e9
--- /dev/null
+++ b/docs/docs/utilities/visually-hidden.md
@@ -0,0 +1,96 @@
+---
+title: Visually Hidden
+description: The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.
+noAlpha: true
+---
+
+`.wa-visually-hidden` `.wa-visually-hidden-force`
+
+> "there are real world situations where visually hiding content may be appropriate, while the content should remain available to assistive technologies, such as screen readers. For instance, hiding a search field's label as a common magnifying glass icon is used in its stead."
+> — [The A11Y Project](https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/)
+
+Since visually hidden content can receive focus when tabbing, the element will become visible when something inside receives focus.
+This behavior is intentional, as otherwise sighted keyboard users wouldn't be able to determine where the focus indicator is.
+
+```html {.example}
+
+```
+
+## Examples
+
+### Links That Open in New Windows
+
+In this example, the link will open a new window. Screen readers will announce "opens in a new window" even though the text content isn't visible to sighted users.
+
+```html {.example}
+
+ Visit External Page
+ opens in a new window
+
+```
+
+### Content Conveyed By Context
+
+Adding a label may seem redundant at times, but they're very helpful for unsighted users. Rather than omit them, you can provide context to unsighted users with visually hidden content that will be announced by assistive devices such as screen readers.
+
+```html {.example}
+
+
+
+```
+
+### Force visually hidden
+
+There are cases where you want to _always_ visually hide certain content, even when it's focused.
+For example when hiding a checkbox to render a custom one:
+
+```html {.example}
+
+
+
+ I have read the terms and conditions
+
+
+
+```
diff --git a/src/components/color-picker/color-picker.ts b/src/components/color-picker/color-picker.ts
index fe149b4df..4dfb99d7e 100644
--- a/src/components/color-picker/color-picker.ts
+++ b/src/components/color-picker/color-picker.ts
@@ -18,6 +18,7 @@ import { watch } from '../../internal/watch.js';
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
import formControlStyles from '../../styles/shadow/form-control.css';
import sizeStyles from '../../styles/utilities/size.css';
+import visuallyHidden from '../../styles/utilities/visually-hidden.css';
import { LocalizeController } from '../../utilities/localize.js';
import '../button-group/button-group.js';
import '../button/button.js';
@@ -26,7 +27,6 @@ import type WaDropdown from '../dropdown/dropdown.js';
import '../icon/icon.js';
import '../input/input.js';
import type WaInput from '../input/input.js';
-import '../visually-hidden/visually-hidden.js';
import styles from './color-picker.css';
interface EyeDropperConstructor {
@@ -106,7 +106,7 @@ declare const EyeDropper: EyeDropperConstructor;
*/
@customElement('wa-color-picker')
export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
- static shadowStyle = [sizeStyles, formControlStyles, styles];
+ static shadowStyle = [visuallyHidden, sizeStyles, formControlStyles, styles];
static shadowRootOptions = { ...WebAwesomeFormAssociatedElement.shadowRootOptions, delegatesFocus: true };
diff --git a/src/components/copy-button/copy-button.ts b/src/components/copy-button/copy-button.ts
index c2bb8f60b..324295dae 100644
--- a/src/components/copy-button/copy-button.ts
+++ b/src/components/copy-button/copy-button.ts
@@ -5,11 +5,11 @@ import { WaCopyEvent } from '../../events/copy.js';
import { WaErrorEvent } from '../../events/error.js';
import { animateWithClass } from '../../internal/animate.js';
import WebAwesomeElement from '../../internal/webawesome-element.js';
+import visuallyHidden from '../../styles/utilities/visually-hidden.css';
import { LocalizeController } from '../../utilities/localize.js';
import '../icon/icon.js';
import '../tooltip/tooltip.js';
import type WaTooltip from '../tooltip/tooltip.js';
-import '../visually-hidden/visually-hidden.js';
import styles from './copy-button.css';
/**
@@ -44,7 +44,7 @@ import styles from './copy-button.css';
*/
@customElement('wa-copy-button')
export default class WaCopyButton extends WebAwesomeElement {
- static shadowStyle = styles;
+ static shadowStyle = [visuallyHidden, styles];
private readonly localize = new LocalizeController(this);
@@ -201,7 +201,7 @@ export default class WaCopyButton extends WebAwesomeElement {
@click=${this.handleCopy}
>
- ${this.currentLabel}
+ ${this.currentLabel}
diff --git a/src/components/page/page.css b/src/components/page/page.css
index f3455e7de..928501763 100644
--- a/src/components/page/page.css
+++ b/src/components/page/page.css
@@ -195,19 +195,6 @@ slot:not([name]) {
grid-area: main-footer;
}
-/* Visually hidden */
-.skip-to-content:not(:focus-within) {
- position: absolute !important;
- width: 1px !important;
- height: 1px !important;
- clip: rect(0 0 0 0) !important;
- clip-path: inset(50%) !important;
- border: none !important;
- overflow: hidden !important;
- white-space: nowrap !important;
- padding: 0 !important;
-}
-
.skip-to-content {
position: absolute;
top: var(--wa-space-m);
diff --git a/src/components/page/page.ts b/src/components/page/page.ts
index 7dbaf6915..43e3795bc 100644
--- a/src/components/page/page.ts
+++ b/src/components/page/page.ts
@@ -4,6 +4,7 @@ import { live } from 'lit/directives/live.js';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import { toLength, toPx } from '../../internal/css-values.js';
import WebAwesomeElement from '../../internal/webawesome-element.js';
+import visuallyHidden from '../../styles/utilities/visually-hidden.css';
import styles from './page.css';
import mobileStyles from './page.mobile.styles.js';
@@ -78,7 +79,7 @@ if (typeof ResizeObserver === 'undefined') {
*/
@customElement('wa-page')
export default class WaPage extends WebAwesomeElement {
- static shadowStyle = styles;
+ static shadowStyle = [visuallyHidden, styles];
private headerResizeObserver = this.slotResizeObserver('header');
private subheaderResizeObserver = this.slotResizeObserver('subheader');
@@ -262,7 +263,7 @@ export default class WaPage extends WebAwesomeElement {
render() {
return html`
-
+
Skip to content
diff --git a/src/components/visually-hidden/visually-hidden.css b/src/components/visually-hidden/visually-hidden.css
deleted file mode 100644
index 82b5a99b7..000000000
--- a/src/components/visually-hidden/visually-hidden.css
+++ /dev/null
@@ -1,11 +0,0 @@
-:host(:not(:focus-within)) {
- position: absolute !important;
- width: 1px !important;
- height: 1px !important;
- clip: rect(0 0 0 0) !important;
- clip-path: inset(50%) !important;
- border: none !important;
- overflow: hidden !important;
- white-space: nowrap !important;
- padding: 0 !important;
-}
diff --git a/src/components/visually-hidden/visually-hidden.test.ts b/src/components/visually-hidden/visually-hidden.test.ts
deleted file mode 100644
index 27cfda2eb..000000000
--- a/src/components/visually-hidden/visually-hidden.test.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { expect } from '@open-wc/testing';
-import { html } from 'lit';
-import { fixtures } from '../../internal/test/fixture.js';
-
-describe('', () => {
- for (const fixture of fixtures) {
- describe(`with "${fixture.type}" rendering`, () => {
- it('should render but not display visually hidden content', async () => {
- const el = await fixture(html`
-
- Skip to main content
-
- `);
-
- const { width, height, overflow, clipPath } = getComputedStyle(el);
-
- expect(width).to.equal('1px');
- expect(height).to.equal('1px');
- expect(overflow).to.equal('hidden');
- expect(clipPath).to.equal('inset(50%)');
- });
-
- // should show visually hidden content when focused
- it('should show visually hidden content when focused', async () => {
- const el = await fixture(html`
-
- Skip to main content
-
- `);
-
- const a = el.querySelector('a')!;
- a.focus();
-
- const { width, height, overflow, clipPath } = getComputedStyle(el);
-
- expect(width).not.to.equal('1px');
- expect(height).not.to.equal('1px');
- expect(overflow).not.to.equal('hidden');
- expect(clipPath).not.to.equal('inset(50%)');
- });
- });
- }
-});
diff --git a/src/components/visually-hidden/visually-hidden.ts b/src/components/visually-hidden/visually-hidden.ts
deleted file mode 100644
index a0adb9ce7..000000000
--- a/src/components/visually-hidden/visually-hidden.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { html } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import WebAwesomeElement from '../../internal/webawesome-element.js';
-import styles from './visually-hidden.css';
-
-/**
- * @summary The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.
- * @documentation https://backers.webawesome.com/docs/components/visually-hidden
- * @status stable
- * @since 2.0
- *
- * @slot - The content to be visually hidden.
- */
-@customElement('wa-visually-hidden')
-export default class WaVisuallyHidden extends WebAwesomeElement {
- static shadowStyle = styles;
-
- render() {
- return html`