-
-
Notifications
You must be signed in to change notification settings - Fork 765
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
7 changed files
with
107 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,47 @@ | ||
# Visually Hidden | ||
|
||
[component-header:sl-visually-hidden] | ||
|
||
The visually hidden utility makes content accessible to assistive devices without displaying it on the screen. | ||
|
||
According to [The A11Y Project](https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/), "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." | ||
|
||
Since visually hidden content can receive focus when tabbing, the element will become visible when something inside receives focus. This behavior is intentional, as sighted keyboards user won't be able to determine where the focus indicator is without it. | ||
|
||
```html preview | ||
<div style="min-height: 100px;"> | ||
<sl-visually-hidden> | ||
<a href="#">Skip to main content</a> | ||
</sl-visually-hidden> | ||
</div> | ||
``` | ||
|
||
## 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 preview | ||
<a href="https://example.com/" target="_blank"> | ||
Visit External Page | ||
<sl-icon name="box-arrow-up-right"></sl-icon> | ||
<sl-visually-hidden>opens in a new window</sl-visually-hidden> | ||
</a> | ||
``` | ||
|
||
### Content Conveyed By Context | ||
|
||
Adding a title or 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. | ||
|
||
```html preview | ||
<sl-card style="width: 100%; max-width: 360px;"> | ||
<header> | ||
<sl-visually-hidden>Personal Info</sl-visually-hidden> | ||
</header> | ||
<sl-input label="Name" style="margin-bottom: .5rem;"></sl-input> | ||
<sl-input label="Email" type="email"></sl-input> | ||
</sl-card> | ||
``` | ||
|
||
[component-metadata:sl-visually-hidden] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
import { css } from 'lit'; | ||
import componentStyles from '../../styles/component.styles'; | ||
|
||
export default css` | ||
${componentStyles} | ||
: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; | ||
} | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
import { expect, fixture, html, waitUntil } from '@open-wc/testing'; | ||
// import sinon from 'sinon'; | ||
|
||
import '../../../dist/shoelace.js'; | ||
import type SlVisuallyHidden from './visually-hidden'; | ||
|
||
describe('<sl-visually-hidden>', () => { | ||
it('should render a component', async () => { | ||
const el = await fixture(html` <sl-visually-hidden></sl-visually-hidden> `); | ||
|
||
expect(el).to.exist; | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
import { LitElement, html } from 'lit'; | ||
import { customElement } from 'lit/decorators.js'; | ||
import styles from './visually-hidden.styles'; | ||
|
||
/** | ||
* @since 2.0 | ||
* @status experimental | ||
* | ||
* @slot - The content you'd like to be visually hidden. | ||
*/ | ||
@customElement('sl-visually-hidden') | ||
export default class SlVisuallyHidden extends LitElement { | ||
static styles = styles; | ||
|
||
render() { | ||
return html` <slot></slot> `; | ||
} | ||
} | ||
|
||
declare global { | ||
interface HTMLElementTagNameMap { | ||
'sl-visually-hidden': SlVisuallyHidden; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters