Marcelo Paiva
|
a3109c6332
|
Add ARIA labels to icon-only buttons across the application
Fixed 12 icon-only buttons that lacked accessible names for screen readers:
Vue Components (8 buttons):
- template_builder/controls.vue: Move up/down/remove document buttons
- template_builder/area.vue: Remove field button
- template_builder/custom_field.vue: Settings/save/remove field buttons
- submission_form/attachment_step.vue: Remove attachment button
Rails Views (4 buttons):
- shared/_navbar.html.erb: User menu dropdown trigger
* Added role="button" and aria-haspopup for proper semantics
- shared/_turbo_modal.html.erb: Modal close button
- shared/_turbo_modal_large.html.erb: Modal close button
- shared/_html_modal.html.erb: Modal close button
All aria-labels use i18n translation keys (t()) for proper localization.
This satisfies WCAG 2.2 Success Criterion 4.1.2 (Name, Role, Value, Level A).
Screen reader users can now:
- Identify the purpose of icon-only buttons
- Navigate modals with proper announcements
- Use template builder controls effectively
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
|
1 month ago |