[Enhancement][a11y] Доступность модальных окон и карточек

[eugpoloz]

Focus trap уже есть и работает, так что в рамках этой задачи есть смысл разобраться с версткой и документацией.

Аудит невизуальной доступности:

• [ ] проверить общую доступность всплывающих окон

  Ко всем модальным окнам, Layouts и подобным всплывающим объектам, в том числе не упомянутым в этом документе, относятся следующие рекомендации, сейчас не выполняемые:

  1. Содержимое модального окна должно быть обернуто в контейнер с ролью dialog, и этот контейнер должен иметь лейбл с названием модалки.
  2. Если крестик для закрытия доступен в верхней области модалки, а не только в самом конце, эта кнопка должна быть доступна для скринридера.
  3. Модалка должна закрываться и по нажатию на кнопку, и по нажатию на escape на клавиатуре.
  4. Важно проверить на бою модалку с мобильного устройства с включенным Voiceover/Talkback, возможно ли горизонтальными свайпами одним пальцем, перемещаясь по содержимому модалки, выйти за ее пределы, тем самым навигируясь по странице под модальным окном. Если возможно, нужно ограничить эту модалку.
  5. При нажатии на странице на кнопку, открывающую модальное окно, фокус должен устанавливаться на первый элемент модального окна - на заголовок или кнопку закрытия.
  6. При закрытии модального окна эскейпом, по нажатию на кнопку закрытия или при выборе одного из вариантов, предложенных модальным окном, фокус должен ставиться на кнопку, открывшую модальное окно. Если такой кнопки уже нет (удален пост/подгрузились новые данные/etc), фокус нужно ставить на появившееся на месте исчезнувшей кнопки контейнер (сообщение об успешном удалении поста с предложением восстановить) или на первый подгрузившийся элемент.

Компоненты:

• [ ] ModalRoot
  • [ ] документация по доступности (https://github.com/VKCOM/VKUI/issues/3035)
• [ ] ModalPage
  • [ ] проверить пример в Storybook

    Кроме пола и дополнительного ничего выбрать нельзя.

  • [ ] документация по доступности (https://github.com/VKCOM/VKUI/issues/3035)
• [ ] ModalPageHeader
  • [ ] документация по доступности (https://github.com/VKCOM/VKUI/issues/3035)
• [ ] ModalCard
  • [ ] документация по доступности (https://github.com/VKCOM/VKUI/issues/3035)
• [ ] ModalCardBase
  • [ ] документация по доступности (https://github.com/VKCOM/VKUI/issues/3035)
• [ ] ModalDismissButton
  • [ ] документация по доступности (https://github.com/VKCOM/VKUI/issues/3035)

[eugpoloz]

• связанная задача: https://github.com/VKCOM/VKUI/issues/4696

Аудит невизуальной доступности выявил много проблем с заголовками.