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):

• a11y: va-alert #3231
• a11y: va-avatar #3261
• a11y: va-badge #3254
• a11y: va-button
• a11y: va-button-dropdown
• a11y: va-button-group
• a11y: va-button-toggle
• a11y: va-carousel #3264
• a11y: va-chip #3257
• a11y: va-data-table
• a11y: va-icon #3236
• a11y: va-image #3286
• a11y: va-modal
• a11y: va-table
• a11y: va-checkbox
• a11y: va-color-input
• a11y: va-counter #3742
• a11y: va-date-input #3745
• a11y: va-date-picker #3744
• a11y: va-file-upload
• a11y: va-form
• a11y: va-input #3741
• a11y: va-option-list
• a11y: va-popover #3266
• a11y: va-radio #3585
• a11y: va-rating #3270
• a11y: va-select #3743
• a11y: va-slider #3228
• a11y: va-switch
• a11y: va-time-input
• a11y: va-time-picker
• a11y: va-accordion #3288
• a11y: va-aspect-ratio #3284
• a11y: va-card #3283
• a11y: va-collapse #3282
• a11y: va-divider #3227
• a11y: va-list
• a11y: va-scroll-container
• a11y: va-skeleton #3289
• a11y: va-split #3268
• a11y: va-breadcrumbs
• a11y: va-navbar
• a11y: va-pagination
• a11y: va-sidebar #3590
• a11y: va-sidebar-item
• a11y: va-stepper #3229
• a11y: va-tabs
• a11y: va-affix #3285
• a11y: va-app-bar #3290
• a11y: va-backtop #3267
• a11y: va-color-palette
• a11y: va-confirm
• a11y: va-dropdown
• a11y: va-hover
• a11y: va-infinite-scroll
• a11y: va-inner-loading #3226
• a11y: va-parallax #3249
• a11y: va-progress-bar #3255
• a11y: va-progress-circle #3256
• a11y: va-spacer #3251
• a11y: va-toast #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 #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.