js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-11 20:08:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add Input-Based Visually Hidden Utilities (#1454)

Browse Source 
* adding input-based visually hidden utilities
* documenting input-based visually hidden utilities
This commit is contained in:
Brian Talbot
2025-09-16 09:17:07 -04:00
committed by GitHub
parent 4b2b72e822
commit fd4cded708
2 changed files with 60 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
packages/webawesome/docs/docs/utilities/visually-hidden.md
View File

@@ -43,6 +43,63 @@ Adding a label may seem redundant at times, but they're very helpful for unsight
</wa-card>
```
### Visually Hidden Input Parts
Sometimes you want a form control to have a cleaner, more minimal appearance by hiding the `label` or `hint` visually. However, removing these elements entirely would make the form inaccessible to users with assistive devices.
Instead, you can hide them visually while keeping them available to screen readers by adding the `wa-visually-hidden-label` or `wa-visually-hidden-hint` class.
```html {.example}
<wa-input
label="Search Articles"
type="search"
placeholder="Search for..."
class="wa-visually-hidden-label"
style="margin-block-end: 1rem;"
>
<wa-icon slot="start" name="magnifying-glass" variant="regular"></wa-icon>
</wa-input>
<wa-input
label="Phone Number"
type="tel"
hint="We'll send you a verification code"
placeholder="(555) 867-5309"
class="wa-visually-hidden-hint"
style="margin-block-end: 1rem;"
>
<wa-icon slot="start" name="phone" variant="regular"></wa-icon>
</wa-input>
<wa-select
label="Country"
hint="Select your country for shipping calculations"
class="wa-visually-hidden-hint"
style="margin-block-end: 1rem;"
>
<wa-option value="us">United States</wa-option>
<wa-option value="ca">Canada</wa-option>
<wa-option value="mx">Mexico</wa-option>
<wa-option value="uk">United Kingdom</wa-option>
<wa-option value="de">Germany</wa-option>
<wa-option value="fr">France</wa-option>
<wa-option value="wakanda">Wakanda</wa-option>
<wa-option value="genovia">Genovia</wa-option>
<wa-option value="elbonia">Elbonia</wa-option>
<wa-icon slot="start" name="globe" variant="regular"></wa-icon>
</wa-select>
<wa-input
label="Email Address"
type="email"
hint="We'll never share your email or secret identity"
placeholder="e.g. miles.morales@brooklynvisions.edu"
class="wa-visually-hidden-label wa-visually-hidden-hint"
>
<wa-icon slot="start" name="envelope" variant="regular"></wa-icon>
</wa-input>
```
### Force Visually Hidden
There are cases where you want to _always_ visually hide certain content, even when it's focused.

4
packages/webawesome/src/styles/utilities/visually-hidden.css
View File

@@ -1,6 +1,8 @@
@layer wa-utilities {
.wa-visually-hidden:not(:focus-within),
.wa-visually-hidden-force {
.wa-visually-hidden-force,
.wa-visually-hidden-hint::part(hint),
.wa-visually-hidden-label::part(label) {
position: absolute !important;
width: 1px !important;
height: 1px !important;