Skip to content

Commit

Permalink
Merge pull request #1981 from ember-learn/ef4-patch-1
Browse files Browse the repository at this point in the history
Demonstrating unique-id helper
  • Loading branch information
mansona committed Dec 8, 2023
2 parents 3a69cfa + f2e9a50 commit b8b4697
Showing 1 changed file with 5 additions and 3 deletions.
8 changes: 5 additions & 3 deletions guides/release/accessibility/components.md
Original file line number Diff line number Diff line change
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 b8b4697

Please sign in to comment.