ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #1648 from ing-bank/chore/add-doc-label-sr-only

Browse source 
chore: add eg for label-sr-only attribute on input element
This commit is contained in:
Knorgias 2022-04-04 17:29:21 +02:00 committed by GitHub
commit c29d622c92
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 13 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
docs/components/input/use-cases.md
View file

@ -13,6 +13,19 @@ Can be provided via the `label` attribute or via the `slot="label"`.
export const label = () => html` <lion-input label="Input" name="input"></lion-input> `; export const label = () => html` <lion-input label="Input" name="input"></lion-input> `;
``` ```
## Label sr-only (a11y)
Can be provided via the `label-sr-only` boolean attribute.
The label will be hidden, but still readable by screen readers.
```js preview-story
export const labelSrOnly = () =>
html` <lion-input label-sr-only label="Input" name="input"></lion-input> `;
```
> Note: Once we support the ElementInternals API, the equivalent will be `<lion-input aria-label="Input" name="input"></lion-input>`
## Help-text ## Help-text
A helper text shown below the label to give extra clarification. A helper text shown below the label to give extra clarification.