From f2e9a50353cf4f64902fcde5510b66157413220d Mon Sep 17 00:00:00 2001
From: Edward Faulkner <edward@eaf4.com>
Date: Fri, 1 Dec 2023 14:28:06 -0500
Subject: [PATCH] Demonstrating unique-id helper

Adding unique-id to the guides is a blocker for finally making it Recommended: https://github.com/emberjs/rfcs/pull/865
---
 guides/release/accessibility/components.md | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/guides/release/accessibility/components.md b/guides/release/accessibility/components.md
index 2253b1bdd1..6e0e2a99d2 100644
--- a/guides/release/accessibility/components.md
+++ b/guides/release/accessibility/components.md
@@ -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: