Accessibility improvements Q2 2023

[kushich]

Why do we need this?

https://www.notion.so/epicmax/Accessibility-Improvements-v-1-7-Q2-7276524a28ae431db028a10d5d686dbd?pvs=4

Workflow

• Convert component from the list below list to a separate issue.
• Compare component with a11y patterns or (if there are no pattern for it) with other frameworks.
• Implement WAI-ARIA and keyboard navigation (if needed).
• Test functionality on screen readers.
• Create accessibility docs section in component's docs page.

List of covered components (WAI ARIA + keyboard navigation + a11y section in docs page):

• [x] #3231
• [x] #3261
• [x] #3254
• [ ] a11y: va-button
• [ ] a11y: va-button-dropdown
• [ ] a11y: va-button-group
• [ ] a11y: va-button-toggle
• [ ] #3264
• [ ] #3257
• [ ] a11y: va-data-table
• [x] #3236
• [ ] #3286
• [ ] a11y: va-modal
• [ ] a11y: va-table
• [ ] a11y: va-checkbox
• [ ] a11y: va-color-input
• [x] #3742
• [x] #3745
• [ ] #3744
• [ ] a11y: va-file-upload
• [ ] a11y: va-form
• [x] #3741
• [ ] a11y: va-option-list
• [ ] #3266
• [x] #3585
• [ ] #3270
• [x] #3743
• [x] #3228
• [ ] a11y: va-switch
• [ ] a11y: va-time-input
• [ ] a11y: va-time-picker
• [x] #3288
• [x] #3284
• [x] #3283
• [x] #3282
• [x] #3227
• [ ] a11y: va-list
• [ ] a11y: va-scroll-container
• [x] #3289
• [ ] #3268
• [ ] a11y: va-breadcrumbs
• [ ] a11y: va-navbar
• [ ] a11y: va-pagination
• [ ] #3590
• [ ] a11y: va-sidebar-item
• [x] #3229
• [ ] a11y: va-tabs
• [x] #3285
• [ ] #3290
• [x] #3267
• [ ] a11y: va-color-palette
• [ ] a11y: va-confirm
• [ ] a11y: va-dropdown
• [ ] a11y: va-hover
• [ ] a11y: va-infinite-scroll
• [x] #3226
• [x] #3249
• [x] #3255
• [x] #3256
• [x] #3251
• [x] #3287
• [ ] a11y: va-tree-view
• [ ] a11y: va-virtual-scroller

Refs

https://www.w3.org/WAI/ARIA/apg/patterns/ https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/ https://m3.material.io/ https://www.magentaa11y.com/web/ https://a11y-guidelines.orange.com/en/articles/?tag=web https://la-va11ydette.orange.com/?list=wcag-web&lang=en

[m0ksem]

Hey, @kushich. I like it. Can we add https://github.com/epicmaxco/vuestic-ui/pull/3175 to this scope?

If this PR looks good for you, feel free to merge.

[asvae]

Maybe we can also do some testing on screen readers to get a feel on our improvements.