Skip to content

Commit

Permalink
Demonstrating unique-id helper
Browse files Browse the repository at this point in the history
Adding unique-id to the guides is a blocker for finally making it Recommended: emberjs/rfcs#865
  • Loading branch information
ef4 committed Dec 1, 2023
1 parent b946818 commit f2e9a50
Showing 1 changed file with 5 additions and 3 deletions.
8 changes: 5 additions & 3 deletions guides/release/accessibility/components.md
Expand Up @@ -57,13 +57,15 @@ However, the most common methods for providing accessible names can be reviewed

### Adding a label to an input element

Every `<input>` element should have an associated `<label>` element. To do this, the `<input>` element's `id` attribute value should be the same as the `for` attribute value on the `<label>`, like this:
Every `<input>` element should have an associated `<label>` element. To do this, the `<input>` element's `id` attribute value should be the same as the `for` attribute value on the `<label>`. Ember has a built-in `unique-id` helper that can generate unique ids that you can use like this:

![Separate input and label elements with a connection established by matching for and id attributes](/images/accessibility/component-considerations/input-for-id.png)

```html
<label for="input-name">Name:</label>
<input id="input-name" name="name" value="" type="text" />
{{#let (unique-id) as |id|}}
<label for={{id}}>Name:</label>
<input id={{id}} name="name" value="" type="text" />
{{/let}}
```

It is also valid to wrap the `<label>` element around the `<input />` element:
Expand Down

0 comments on commit f2e9a50

Please sign in to comment.