chore: add examples for aria labels for Input #1365
Conversation
| @@ -21,6 +21,23 @@ Will become: | |||
| <label for="site">Ember Question</label> | |||
| <input id="site" type="text" value="How do text fields work?"/> | |||
| ``` | |||
| ### Naming with aria-label | |||
There was a problem hiding this comment.
I think maybe we want to remove this section and only show "naming with aria-labelledby. What do you think @MelSumner?
There was a problem hiding this comment.
fwiw, that is my understanding as well and I agree.
There was a problem hiding this comment.
I think it would be good to have "ways to associate labels" and then use/explain all of them.
There was a problem hiding this comment.
Little ping here for us to revisit this after we put up the Accessibility Spotlight blog posts perhaps. :)
There was a problem hiding this comment.
Thanks so much for your work on this @rajasegar! I've added some suggestions of my own, but suggest waiting to make changes until we hear from @MelSumner too.
Also, any time you use a technical property name like aria-labelledby outside of a code block, you can wrap it in backticks and the spellchecker will ignore it. The current test failures are just the spellchecker.
|
|
||
| ```handlebars | ||
| <span id="site-label">Ember Question</span> | ||
| <Input id="site" @value="How do text fields work?" aria-labelledby="site-label"/> |
There was a problem hiding this comment.
@MelSumner Would it make sense for this to have both a regular label and a labelledby or describedby?
There was a problem hiding this comment.
aria-labelledby is best used for search inputs. I'll suggest some changes to the example.
Co-Authored-By: Jen Weber <[email protected]>
Co-Authored-By: Jen Weber <[email protected]>
Co-Authored-By: Jen Weber <[email protected]>
|
Thanks a lot @jenweber for the suggestions. I didn't know about the spellchecker tests, I will keep that in mind next time. |
Co-Authored-By: Melanie Sumner <[email protected]>
Co-Authored-By: Melanie Sumner <[email protected]>
|
|
||
| You can pass the following standard `<input>` attributes within the input | ||
| helper: | ||
| The `aria-label` property enables developers to name an element with a string that is not visually rendered. |
There was a problem hiding this comment.
@rwjblue has some feedback on when to use property vs attribute in the prose. I mix them up all the time and I'm not sure which is correct in these examples.
Co-Authored-By: Jen Weber <[email protected]>
Co-Authored-By: Robert Jackson <[email protected]>
There was a problem hiding this comment.
Let's ship it and iterate more if we need to. @rajasegar can you move this out of draft status, please? Thanks for getting the ball rolling on this!
rajasegar
changed the title
|
Thanks Melanie, WIP status removed |
There was a problem hiding this comment.
I think we should add some additional prose around line 51 that clarifies that HTML attributes such as required, disabled and readonly only need to be present and do not require a true or false value. Since it's confusing in general and extra confusing to JS devs, the clarity would help.
Co-authored-by: Melanie Sumner <[email protected]>
Co-authored-by: Melanie Sumner <[email protected]>
Co-authored-by: Melanie Sumner <[email protected]>
|
I would like to merge this and ask that contributors put further improvements in other PRs. Is that ok with everyone? I added a commit to fix some missing code fencing. Thanks again y'all for your work on this! |
Co-authored-by: Isaac Lee <[email protected]>
|
Looks ok to me, re-requested @MelSumner and @jenweber for review from talking to Isaac / looking at the history of the PR. Let me know if I can help! |
|
Hi, everyone. I think this PR has sat out for too long. I read the changes once more to check that things read okay (good enough to allow further revisions if needed). I think this PR was opened when release was v3.18, so I'm not sure if merging this will correctly update the current release, which is v3.19. If there's a mistake, I'll open a PR to fix it. |
|
Page is live! 🎉 @rajasegar Thank you for your work and patience in getting this PR across! |
|
Thanks @ijlee2 |
Fixes #1353