fix(Alert): Move dismiss button before actions to focus on it first

[andrey-medvedev-vk]

• close [Enhancement][a11y] Доступность Alert #3042

---

• Release notes

Описание

В задаче #3042 указаны две явные проблемы:

• фокус должен попадать на заголовок, а он не попадает
  Исходя из рекоммендаций W3C спецификации и других ресурсов ([1], [2]) выходит, что лучше всего иммено фокус на интерактивном элементе, редко когда встречается совет фокусироваться на начале текста, и то, только если текста много.
  Наш Alert требование фокуса выполняет. В это PR я лишь передвинул кнопку закрытия алерта выше в дереве, чтобы при её наличии фокус был на ней, и пользователь не мог случайно согласиться на какое-то действие.
  Пожелание из [Enhancement][a11y] Доступность Alert #3042 от том, что нужен фокус на заголовке обусловлен тем, что нужно, чтобы скринридер прочитал текст в Alert при его появлении. NVDA и VoiceOver читают текст, так как мы используем внутри связь алерта с заголовком и содержимым чере aria-labelledby и area-describedby.

• Кнопки выполняют одинаковые действия, но называются по разному.

  Кажется, что первая и третья кнопки выполняют одно и то же действие, и по смыслу дублируют друг друга:
  Отмена
  Удалить
  Закрыть предупреждение

  Долго думал как бы спрятать или предоставить пользователям библиотеки возможность прятать лишние дублирующие кнопки, но после общения со специалистом по доступности понял, что проблема не в дублировании, а в том, что кнопки называются по разному и могут сбивать с толку, если выполняют одно и то же действие.
  Решением тут вижу только исправление примера в Storybook и доке и указание в доке о том, что если кнопка закрытия алерта и кнопка действия по сути выполняют одно и то же действие, то имена у них в дереве доступности должны быть одинаковыми.
  Решение: если кнопка действия и кнопка закрытия выполняют одинаковые действия их имена в дереве доступности должный быть одинаковыми. В частности кнопка закрытия через свойство dismissLabel должно повторять имя одной из кнопок действия.

  Были мысли проверять есть ли action у кнопки с режимом 'cancel` и тогда кнопку закрытия прятать от скринридера, чтобы избежать дублирования, но пришел к выводу, что тут можно только хуже сделать и усложнить.
  Примера должно быть достаточно. Варианты использования могут быть разными и не зависеть от action mode.

Release notes

Исправления

• Alert: улучшена доступность компонента
  Кнопка закрытия, при наличии, первой получает фокус при открытии алерта
  В документацию по доступности компонента добавлен пункт по поводу имен кнопок с одинаковыми действиями

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[github-actions]

size-limit report 📦

Path	Size
JS	397.06 KB (0%)
JS (gzip)	120.59 KB (0%)
JS (brotli)	99.11 KB (-0.02% 🔽)
JS import Div (tree shaking)	1.56 KB (0%)
CSS	348.14 KB (0%)
CSS (gzip)	43.1 KB (0%)
CSS (brotli)	34.44 KB (0%)

[github-actions]

e2e tests

Playwright Report

[github-actions]

👀 Docs deployed

• ✅ Styleguide
• ✅ Storybook
• ✅ Docs beta

Commit 7115297

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 95.54%. Comparing base (67b998d) to head (7115297).
Report is 20 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #8266      +/-   ##
==========================================
- Coverage   95.58%   95.54%   -0.05%     
==========================================
  Files         404      404              
  Lines       11612    11641      +29     
  Branches     3857     3859       +2     
==========================================
+ Hits        11099    11122      +23     
- Misses        513      519       +6     

Flag	Coverage Δ
unittests	95.54% <100.00%> (-0.05%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[inomdzhon]

🥇

[vkcom-publisher]

❌ Patch

Не удалось автоматически применить исправление на ветке 7.1-stable.

Дальнейшие действия выполняют контрибьютеры из группы @VKCOM/vkui-core

Чтобы изменение попало в ветку 7.1-stable, выполните следующие действия:

1. Создайте новую ветку от 7.1-stable и примените изменения используя cherry-pick

git stash # опционально
git fetch origin 7.1-stable
git checkout -b patch/pr8266 origin/7.1-stable

git cherry-pick --no-commit c708d030cc1095c4a5fcdbc6e4399ea06a85cd19
git checkout HEAD **/__image_snapshots__/*.png
git diff --quiet HEAD || git commit --no-verify --no-edit

2. Исправьте конфликты, следуя инструкциям из терминала
3. Отправьте ветку на GitHub и создайте новый PR с веткой 7.1-stable (установка лейбла не требуется!)

git push --set-upstream origin patch/pr8266
gh pr create --base 7.1-stable --title "patch: pr8266" --body "- patch #8266"