Update todo-list-example for a11y #1630
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Looks good @chipit24! Would consider more verbose "Add"/"Remove" button text on a real-world implementation, but this is sufficient for the sample context :) |
sdras
suggested changes
May 16, 2018
src/v2/guide/list.md
Outdated
| > | ||
| <form v-on:submit.prevent="addNewTodo"> | ||
| <input | ||
| aria-label="Write a new todo item" |
There was a problem hiding this comment.
After speaking with an accessibility expert, my understanding is that if we're going to include a placeholder, it would be obscured by this aria-label. It would probably be better to use a label element: <label for="new-todo">Add a todo</label> and add an id on the input, that way the placeholder will still be accessible.
There was a problem hiding this comment.
I agree with using a label. I also think a label element would be more familiar (and therefor less distracting) for readers than an aria-label attribute.
For the sake of my own understanding, would you know how the placeholder is obscured by aria-label?
src/v2/guide/list.md
Outdated
| <input | ||
| aria-label="Write a new todo item" | ||
| placeholder="E.g. Feed the cat" | ||
| v-model="newTodoText" |
There was a problem hiding this comment.
I believe that we should keep the v-model as the first attribute, as that's what we're teaching here and it reduces the need for scanning on the part of the reader trying to learn.
* Use explicit label instead of aria-label * Move v-model directive to top for improved readability
sdras
approved these changes
May 17, 2018
|
Awesome work, thank you! |
MachinisteWeb
added a commit
to vuejs-fr/v2.vuejs.org
that referenced
this pull request
Jun 14, 2018
* Update unit-testing-vue-components.md (vuejs#1623) * Fixed a typo (vuejs#1625) Removed an extra 's' to fix a grammatical mistake * fix a typo (vuejs#1627) * Update v-for list example (vuejs#1628) * Add presentation role to style-only li item * fix: code snippet language (close vuejs#1617) (vuejs#1626) * Update todo-list-example for a11y (vuejs#1630) * Update todo-list-example for a11y * Implement review suggestions * Use explicit label instead of aria-label * Move v-model directive to top for improved readability * change NODE_ENV to follow recommendations from webpack (vuejs#1622) * change NODE_ENV to follow recommendations from weback * Update deployment.md * note that modes are not available in transition groups, fixes vuejs#1619 * add examples for in API doc * add comparison note about react-like libraries * Update components.md (vuejs#1632) * Update components.md * Update components.md * improve flow of single root component section * cookbook entry for storage (vuejs#1550) * cookbook entry for storage * minor tweak * updates to article * updates to article * maybe the last tweak * the honest to god really last mod * Update index.md (vuejs#1634) * docs(guide/comparison): correct size stat of Angular CLI project (vuejs#1638) * Update client-side-storage.md (vuejs#1640) * Update creating-custom-scroll-directives.md (vuejs#1639) * chore: update ad code * remove unnecessary word 'know' (vuejs#1641) * Updated broken links for the Vue Test Utils documentation. (vuejs#1643) * Reorganize component props to introduce prop types earlier, fixes vuejs#1644 (vuejs#1646) @BlitZz96 brought up a good point in [this issue](vuejs#1644) about users lacking the necessary background knowledge to fully understand Passing Static and Dynamic Props, at least as it relates to booleans and potentially other types in the future. To fix this, I added a new Prop Types section right before it. * First stab at SFC to npm documentation (vuejs#1558) * First stab at SFC to npm documentation * Clean up sample code, clarify .vue usage with SSR builds * Run build tasks in parallel, fix dependency order * Backtick all instances of .vue, minor edits for clarity * Fix typo on link * Update url to vue-sfc-rollup utility in acknowledgements * Fix order, other edits suggested by @sdras * Additional explanation about sfc-to-npm recipe package.json * Rename packaing-sfc-for-npm.md to packaging-sfc-for-npm.md (vuejs#1652) * Update link in comparison guide (vuejs#1653) The phrase "These state management patterns and even Redux itself can be easily integrated into Vue applications" has a link to a deprecated project. Instead I link to a yarnpkg.com search I saw used in https://vuejs.org/v2/guide/state-management.html, which links all "redux vue" projects (so it's always up to date) * chore: update vue version * Fix link to docs on custom inputs (vuejs#1660) The old link redirected me to https://vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components which was unexpected. I think the correct link is https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components as per this change. * correct wrong link (vuejs#1661) * Update events.md correct wrong link * Update events.md correct wrong link * Feature/vuemeetups (vuejs#1665) * feature: Add link to VueMeetups * feature: Add section on becoming a community leader * minor tweaks to meetup section * Added details about Lifecycle Hooks (vuejs#1664) * Added details about Lifecycle Hooks Mostly a clarification for beginners without prior knowledge about what Lifecycle hooks are. Makes it easier to understand when perhaps only knowing that the developer has a `mounted()` hook. I left out the function syntax because of generality. Add if it makes more sense to add. I am not fully knowledgable in Vue yet. * add (de)activated to lifecycle hooks list in style guide * improve comparisons react scaling down section * add text versions of image code examples * remove extra comma in components * TypeScript project generation in @vue/cli 3.0 (vuejs#1668) * TypeScript project generation in @vue/cli 3.0 update information about generating TypeScript project using new @vue/cli 3.0 * tweaks to Vue CLI 3 TypeScript support docs * chore: update sponsors * Sylvain and Forresst feedbacks Signed-off-by: MachinisteWeb <[email protected]> * @ForrestT and @raisonblue feedback Signed-off-by: MachinisteWeb <[email protected]> * Feedback of @rspt Signed-off-by: MachinisteWeb <[email protected]>
MachinisteWeb
added a commit
to vuejs-fr/v2.vuejs.org
that referenced
this pull request
Jun 30, 2018
* Update unit-testing-vue-components.md (vuejs#1623) * Fixed a typo (vuejs#1625) Removed an extra 's' to fix a grammatical mistake * fix a typo (vuejs#1627) * Update v-for list example (vuejs#1628) * Add presentation role to style-only li item * fix: code snippet language (close vuejs#1617) (vuejs#1626) * Update todo-list-example for a11y (vuejs#1630) * Update todo-list-example for a11y * Implement review suggestions * Use explicit label instead of aria-label * Move v-model directive to top for improved readability * change NODE_ENV to follow recommendations from webpack (vuejs#1622) * change NODE_ENV to follow recommendations from weback * Update deployment.md * note that modes are not available in transition groups, fixes vuejs#1619 * add examples for in API doc * add comparison note about react-like libraries * Update components.md (vuejs#1632) * Update components.md * Update components.md * improve flow of single root component section * cookbook entry for storage (vuejs#1550) * cookbook entry for storage * minor tweak * updates to article * updates to article * maybe the last tweak * the honest to god really last mod * Update index.md (vuejs#1634) * docs(guide/comparison): correct size stat of Angular CLI project (vuejs#1638) * Update client-side-storage.md (vuejs#1640) * Update creating-custom-scroll-directives.md (vuejs#1639) * chore: update ad code * remove unnecessary word 'know' (vuejs#1641) * Updated broken links for the Vue Test Utils documentation. (vuejs#1643) * Reorganize component props to introduce prop types earlier, fixes vuejs#1644 (vuejs#1646) @BlitZz96 brought up a good point in [this issue](vuejs#1644) about users lacking the necessary background knowledge to fully understand Passing Static and Dynamic Props, at least as it relates to booleans and potentially other types in the future. To fix this, I added a new Prop Types section right before it. * First stab at SFC to npm documentation (vuejs#1558) * First stab at SFC to npm documentation * Clean up sample code, clarify .vue usage with SSR builds * Run build tasks in parallel, fix dependency order * Backtick all instances of .vue, minor edits for clarity * Fix typo on link * Update url to vue-sfc-rollup utility in acknowledgements * Fix order, other edits suggested by @sdras * Additional explanation about sfc-to-npm recipe package.json * Rename packaing-sfc-for-npm.md to packaging-sfc-for-npm.md (vuejs#1652) * Update link in comparison guide (vuejs#1653) The phrase "These state management patterns and even Redux itself can be easily integrated into Vue applications" has a link to a deprecated project. Instead I link to a yarnpkg.com search I saw used in https://vuejs.org/v2/guide/state-management.html, which links all "redux vue" projects (so it's always up to date) * chore: update vue version * Fix link to docs on custom inputs (vuejs#1660) The old link redirected me to https://vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components which was unexpected. I think the correct link is https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components as per this change. * correct wrong link (vuejs#1661) * Update events.md correct wrong link * Update events.md correct wrong link * Feature/vuemeetups (vuejs#1665) * feature: Add link to VueMeetups * feature: Add section on becoming a community leader * minor tweaks to meetup section * Added details about Lifecycle Hooks (vuejs#1664) * Added details about Lifecycle Hooks Mostly a clarification for beginners without prior knowledge about what Lifecycle hooks are. Makes it easier to understand when perhaps only knowing that the developer has a `mounted()` hook. I left out the function syntax because of generality. Add if it makes more sense to add. I am not fully knowledgable in Vue yet. * add (de)activated to lifecycle hooks list in style guide * improve comparisons react scaling down section * add text versions of image code examples * remove extra comma in components * TypeScript project generation in @vue/cli 3.0 (vuejs#1668) * TypeScript project generation in @vue/cli 3.0 update information about generating TypeScript project using new @vue/cli 3.0 * tweaks to Vue CLI 3 TypeScript support docs * chore: update sponsors * Sylvain and Forresst feedbacks Signed-off-by: MachinisteWeb <[email protected]> * chore: update sponsors * update CLI docs link * add Scrimba links for preview * @ForrestT and @raisonblue feedback Signed-off-by: MachinisteWeb <[email protected]> * Feedback of @rspt Signed-off-by: MachinisteWeb <[email protected]> * Fix example indentation in the Unit Testing Vue Components recipe (vuejs#1683) * Update debugging-in-vscode.md (vuejs#1662) * Added link to vuemeetups.org to the ecosystem drop-down menu on website. (vuejs#1685) * Correct mistake of Migration from Vue 1.x (vuejs#1686) * Fix code style in Form Validation recipe (vuejs#1682) * Fix code style in Form Validation recipe * More style code slight improvement in Form Validation recipe * Fix code style in Client-Side Storage recipe (vuejs#1690) * [Doc EN]: `typescript.md` (vuejs#1679) * New in with + symbol Signed-off-by: Bruno Lesieur <[email protected]> * Review of 2.5.0 doc Signed-off-by: Bruno Lesieur <[email protected]> * Review Signed-off-by: Bruno Lesieur <[email protected]> * Fix syntax typo Signed-off-by: Bruno Lesieur <[email protected]> * Add space between new line of documentation Signed-off-by: MachinisteWeb <[email protected]> * Add @posva review Signed-off-by: MachinisteWeb <[email protected]> * Add french str Signed-off-by: MachinisteWeb <[email protected]> * Change directeur to director Signed-off-by: MachinisteWeb <[email protected]> * Fix EN doc Signed-off-by: MachinisteWeb <[email protected]> * Subtitle for typescript.md Signed-off-by: MachinisteWeb <[email protected]> * Revert instance.md Signed-off-by: MachinisteWeb <[email protected]> * [cookbook] Dockerize Vue.js App (vuejs#1483) * First draft with 'Simple Example' section * Fix typo on Docker 'build' command * Fix copy of multiple files * Remove unnecessary whitespace * Fix typo in webpack template link * First draft of 'Real-World Example' * Update 'Real-World Example' with multi-stage build * Add 'Why Dockerize a Vue.js App?' section * Rename 'Why Dockerize a Vue.js App?' as 'Additinal Context' * Add 'Alternative Patterns' section * Minor fix on 'Alternative Patterns' * Fixed typo * Update order to avoid collision with other cookbooks * Clarify why NGINX in real-world example * Update debugging-in-vscode.md (vuejs#1663) * remove outdated information about polymer from comparison * update React comparison status * Remove extra part Signed-off-by: Haeresis <[email protected]> * Remove extra content from api/index.md Signed-off-by: Haeresis <[email protected]> * Remove extra merge Signed-off-by: Haeresis <[email protected]>
MachinisteWeb
added a commit
to vuejs-fr/v2.vuejs.org
that referenced
this pull request
Jul 16, 2018
* Update unit-testing-vue-components.md (vuejs#1623) * Fixed a typo (vuejs#1625) Removed an extra 's' to fix a grammatical mistake * fix a typo (vuejs#1627) * Update v-for list example (vuejs#1628) * Add presentation role to style-only li item * fix: code snippet language (close vuejs#1617) (vuejs#1626) * Update todo-list-example for a11y (vuejs#1630) * Update todo-list-example for a11y * Implement review suggestions * Use explicit label instead of aria-label * Move v-model directive to top for improved readability * change NODE_ENV to follow recommendations from webpack (vuejs#1622) * change NODE_ENV to follow recommendations from weback * Update deployment.md * note that modes are not available in transition groups, fixes vuejs#1619 * add examples for in API doc * add comparison note about react-like libraries * Update components.md (vuejs#1632) * Update components.md * Update components.md * improve flow of single root component section * cookbook entry for storage (vuejs#1550) * cookbook entry for storage * minor tweak * updates to article * updates to article * maybe the last tweak * the honest to god really last mod * Update index.md (vuejs#1634) * docs(guide/comparison): correct size stat of Angular CLI project (vuejs#1638) * Update client-side-storage.md (vuejs#1640) * Update creating-custom-scroll-directives.md (vuejs#1639) * chore: update ad code * remove unnecessary word 'know' (vuejs#1641) * Updated broken links for the Vue Test Utils documentation. (vuejs#1643) * Reorganize component props to introduce prop types earlier, fixes vuejs#1644 (vuejs#1646) @BlitZz96 brought up a good point in [this issue](vuejs#1644) about users lacking the necessary background knowledge to fully understand Passing Static and Dynamic Props, at least as it relates to booleans and potentially other types in the future. To fix this, I added a new Prop Types section right before it. * First stab at SFC to npm documentation (vuejs#1558) * First stab at SFC to npm documentation * Clean up sample code, clarify .vue usage with SSR builds * Run build tasks in parallel, fix dependency order * Backtick all instances of .vue, minor edits for clarity * Fix typo on link * Update url to vue-sfc-rollup utility in acknowledgements * Fix order, other edits suggested by @sdras * Additional explanation about sfc-to-npm recipe package.json * Rename packaing-sfc-for-npm.md to packaging-sfc-for-npm.md (vuejs#1652) * Update link in comparison guide (vuejs#1653) The phrase "These state management patterns and even Redux itself can be easily integrated into Vue applications" has a link to a deprecated project. Instead I link to a yarnpkg.com search I saw used in https://vuejs.org/v2/guide/state-management.html, which links all "redux vue" projects (so it's always up to date) * chore: update vue version * Fix link to docs on custom inputs (vuejs#1660) The old link redirected me to https://vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components which was unexpected. I think the correct link is https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components as per this change. * correct wrong link (vuejs#1661) * Update events.md correct wrong link * Update events.md correct wrong link * Feature/vuemeetups (vuejs#1665) * feature: Add link to VueMeetups * feature: Add section on becoming a community leader * minor tweaks to meetup section * Added details about Lifecycle Hooks (vuejs#1664) * Added details about Lifecycle Hooks Mostly a clarification for beginners without prior knowledge about what Lifecycle hooks are. Makes it easier to understand when perhaps only knowing that the developer has a `mounted()` hook. I left out the function syntax because of generality. Add if it makes more sense to add. I am not fully knowledgable in Vue yet. * add (de)activated to lifecycle hooks list in style guide * improve comparisons react scaling down section * add text versions of image code examples * remove extra comma in components * TypeScript project generation in @vue/cli 3.0 (vuejs#1668) * TypeScript project generation in @vue/cli 3.0 update information about generating TypeScript project using new @vue/cli 3.0 * tweaks to Vue CLI 3 TypeScript support docs * chore: update sponsors * chore: update sponsors * update CLI docs link * add Scrimba links for preview * Fix example indentation in the Unit Testing Vue Components recipe (vuejs#1683) * Update debugging-in-vscode.md (vuejs#1662) * Added link to vuemeetups.org to the ecosystem drop-down menu on website. (vuejs#1685) * Correct mistake of Migration from Vue 1.x (vuejs#1686) * Fix code style in Form Validation recipe (vuejs#1682) * Fix code style in Form Validation recipe * More style code slight improvement in Form Validation recipe * Fix code style in Client-Side Storage recipe (vuejs#1690) * [Doc EN]: `typescript.md` (vuejs#1679) * New in with + symbol Signed-off-by: Bruno Lesieur <[email protected]> * Review of 2.5.0 doc Signed-off-by: Bruno Lesieur <[email protected]> * Review Signed-off-by: Bruno Lesieur <[email protected]> * Fix syntax typo Signed-off-by: Bruno Lesieur <[email protected]> * Add space between new line of documentation Signed-off-by: MachinisteWeb <[email protected]> * Add @posva review Signed-off-by: MachinisteWeb <[email protected]> * Add french str Signed-off-by: MachinisteWeb <[email protected]> * Change directeur to director Signed-off-by: MachinisteWeb <[email protected]> * Fix EN doc Signed-off-by: MachinisteWeb <[email protected]> * Subtitle for typescript.md Signed-off-by: MachinisteWeb <[email protected]> * Revert instance.md Signed-off-by: MachinisteWeb <[email protected]> * [cookbook] Dockerize Vue.js App (vuejs#1483) * First draft with 'Simple Example' section * Fix typo on Docker 'build' command * Fix copy of multiple files * Remove unnecessary whitespace * Fix typo in webpack template link * First draft of 'Real-World Example' * Update 'Real-World Example' with multi-stage build * Add 'Why Dockerize a Vue.js App?' section * Rename 'Why Dockerize a Vue.js App?' as 'Additinal Context' * Add 'Alternative Patterns' section * Minor fix on 'Alternative Patterns' * Fixed typo * Update order to avoid collision with other cookbooks * Clarify why NGINX in real-world example * Update debugging-in-vscode.md (vuejs#1663) * remove outdated information about polymer from comparison * update React comparison status * chore: adjust sponsor placement * chore: sponsor meta * adjust sponsor naming on pages * Add alt text to images to help with screen reader accessibility (vuejs#1676) * chore: update sponsors * chore: add tidelift
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Continuation of #1628. This PR improves the accessibility of the todo list example. Again, the point of this PR is not to modify the original intent of the example, but to ensure it promotes good a11y practises.
The following article, which uses Vue.js in its examples, includes useful information about creating an a11y todo list component: https://inclusive-components.design/a-todo-list/.