Improve accessibility for screen readers #5774
Conversation
|
The URL of the deployed environment for this PR is https://argilla-quickstart-pr-5774-ki24f765kq-no.a.run.app |
|
The PR title is not formatted correctly. Ensure it starts with a capital letter and verify that it includes an issue number. The PR description lacks detail regarding the necessity of the change and expected outcomes. Additionally, comments in the code should be more descriptive and eliminate any trivial comments for better clarity. |
| @@ -16,8 +16,8 @@ | |||
| --> | |||
|
|
|||
| <template> | |||
| <div class="breadcrumbs"> | |||
There was a problem hiding this comment.
Consider adding a period at the end of comments if they form complete sentences.
| @@ -29,11 +29,12 @@ | |||
| v-else | |||
| class="breadcrumbs__item --action" | |||
| @click="onBreadcrumbAction(breadcrumb)" | |||
| :aria-current="breadcrumb.name" | |||
| >{{ breadcrumb.name }}</span | |||
| > | |||
| </li> | |||
| </ul> | |||
There was a problem hiding this comment.
Consider providing a more descriptive comment about this component's functionality.
| @@ -179,7 +184,11 @@ export default { | |||
| return "--focused-form"; | |||
| }, | |||
| formHasFocus() { | |||
| return this.autofocusPosition || this.autofocusPosition == 0; | |||
There was a problem hiding this comment.
Consider simplifying this conditional logic to reduce nesting. An early return could enhance readability.
|
The PR title does not start with a capital letter and lacks an issue number. The PR description needs more detail about the necessity of the change and expected outcomes. |
| @@ -16,8 +16,8 @@ | |||
| --> | |||
|
|
|||
| <template> | |||
| <div class="breadcrumbs"> | |||
There was a problem hiding this comment.
Change the div to a nav element for semantic correctness, as it contains navigation links.
| <div class="breadcrumbs"> | ||
| <ul role="navigation"> | ||
| <nav aria-label="Breadcrumb" class="breadcrumbs"> | ||
| <ul> |
There was a problem hiding this comment.
Ensure to include an aria-label for accessibility purposes.
| @click="toggle($event)" | ||
| :aria-label="`${name} ${checked ? 'on' : 'off'}`" | ||
| :aria-checked="checked ? 'true' : 'false'" | ||
| > | ||
| <div class="switch-thumb" :style="styles"> | ||
| <input |
There was a problem hiding this comment.
Consider changing the input element's tabindex to '0' for better accessibility.
| @@ -179,7 +184,11 @@ export default { | |||
| return "--focused-form"; | |||
| }, | |||
| formHasFocus() { | |||
| return this.autofocusPosition || this.autofocusPosition == 0; | |||
| if (!this.$platform.isMobile) { | |||
There was a problem hiding this comment.
The nested if condition can be simplified to improve readability. Consider using an early return pattern.
| @@ -1,10 +1,14 @@ | |||
| <template> | |||
| <div class="edition-user-info"> | |||
| <div class="form-group circle-and-role"> | |||
| <span v-circle="{ size: 'MEDIUM' }"> | |||
| <span aria-hidden="true" v-circle="{ size: 'MEDIUM' }"> | |||
There was a problem hiding this comment.
Add aria-hidden="true" for decorative elements to improve accessibility.
This PR includes some accessibility improvements and enhancements for small screens