fix(CustomSelect): a11y allow NVDA to read selected option

[mendrew]

• close [Bug]: CustomSelect скринридером NVDA не зачитывается выбранное значение при переходе табом по элементам  #6974

---

• Unit-тесты
• e2e-тесты (обновил, был конфликт в режиме disabled, не доставало opacity, согласно дизайн системе)
• Дизайн-ревью
• QA - проверил специалист в области доступности (Тестировалось на этом примере)
• Документация фичи

Описание

Оказалось, что NVDA не зачитывает элементы расположенные рядом с input, если фокус есть на input, в отличии от VoiceOver.
Есть несколько решений.

1. Отказаться от использования input как основного элемента CustomSelect c ролью combobox.
   Не хотелось бы от него отказываться, чтобы продолжал работать нативный фокус на CustomSelect при клике на связанный с ним label.

Note

Но если проблемы продолжатся, и это будет причиной, то стоит пожертвовать нативным фокусом.

2. Переделать input так, чтобы он всегда хранил label выбранной опции, тогда NVDA сможет его зачитывать.
   Тут проблема в том, чтоoption.labelможет быть не только строкой, но и react-компонентом, поэтому нельзя option.label выбранной в данный момент опции, просто так передать в input..
   

   VKUI/packages/vkui/src/components/CustomSelect/CustomSelect.tsx

   Line 126 in 1662eea

   label: React.ReactElement | string;

   
   Про такой вариант даже немножка в доке про combobox на MDN сказано

   If the combobox element is an element, the value of the combobox is the input's value. Otherwise, the value of the combobox comes from its descendant elements.

Изменения

В качестве решения выбран второй вариант с передачей в input.value option.label. Для того, что мы могли передать туда и текстовое представление react-компонента используем утилитарную функцию getTextFromChildren
Чтобы минимизировать различия с дизайном, в том числе когда option.label это реакт-компонент, мы продолжаем input рендерить скрыто, с opacity: 0, а поверх рендерим контейнер для option.label, где спокойно может лежать react-компонент.

В обычном режиме CustomSelect (не searchable) input не виден даже при фокусе.
В режиме searchable мы продолжаем рендерить контейнер поверх input, но при фокусе на CustomSelect (а значит на input) мы input показываем, чтобы пользователь мог взаимодействовать с ним для ввода текста и поиска опций.
Если в CustomSelect уже выбрана какая-то опция, при фокусе мы оставляем текст инпута на месте, чтобы пользователи скринридера могли прочитать выбранное в данный момент значение.

• Отрефакторил классы CustomSelectInput чтобы было понятнее к чему они относятся.
• Убрал из CustomSelect отдельный скрытый текст лэйбла, добавленный ранее для скринридеров, так как он никак не помогает NVDA и его теперь заменяет значение value у CustomSelectInput.
• На blur мы устанавливаем значение input.value равным option.label, если есть выбранная опция, либо ''.
• Также стараемся реагировать на изменения значения select.value, чтобы input.value всегда обновлялось в соответствии с текущей выбранной опцией. Это особенно актуально, когда CustomSelect value устанавливается снаружи.
• Изменился способ передачи в CustomSelectInput значения label текущей выбранной опции, раньше label передавался как children и было не понятно что в этом свойстве хранится, пока не посмотришь на то, как CustomSelectInput используется внутри CustomSelect. Теперьlabel мы передаем в свойстве selectedOptionLabel
• Убрал aria-owns из combobox так как аттрибут устарел и мешает NVDA в Firefox правильно зачитывать опции (c aria-owns вместо названия опции зачитывается "секция")

Видео

Поведение в режиме я searchable.
При фокусе выделяется текст выбранной опции.

Screen.Recording.2024-08-09.at.13.49.57.mov

[github-actions]

size-limit report 📦

Path	Size
JS	378.1 KB (+0.03% 🔺)
JS (gzip)	114.66 KB (+0.04% 🔺)
JS (brotli)	94.11 KB (-0.05% 🔽)
JS import Div (tree shaking)	1.39 KB (0%)
CSS	306.03 KB (+0.16% 🔺)
CSS (gzip)	39.26 KB (+0.14% 🔺)
CSS (brotli)	31.5 KB (+0.18% 🔺)

[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]

e2e tests

⚠️ Some screenshots were failed. See Playwright Report.

Playwright Report

[github-actions]

👀 Docs deployed

• ✅ Styleguide
• ✅ Storybook

Commit 2608468

[codecov]

Codecov Report

Attention: Patch coverage is 91.93548% with 5 lines in your changes missing coverage. Please review.

Project coverage is 92.76%. Comparing base (88727c8) to head (2608468).

Files	Patch %	Lines
...kages/vkui/src/components/CustomSelect/helpers.tsx	86.11%	5 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #7235      +/-   ##
==========================================
+ Coverage   92.74%   92.76%   +0.01%     
==========================================
  Files         374      375       +1     
  Lines       11103    11111       +8     
  Branches     3646     3643       -3     
==========================================
+ Hits        10298    10307       +9     
+ Misses        805      804       -1     

Flag	Coverage Δ
unittests	92.76% <91.93%> (+0.01%)	⬆️

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]

🤯🤯🤯.... кропотливая работёнка 🧑‍🔬

спасибо 🙏

---

Вопрос

Ничего что в скриншотах placeholder теперь ещё прозрачней?

[mendrew]

Вопрос

Ничего что в скриншотах placeholder теперь ещё прозрачней?

Это как раз хорошо, у нас такая opacity по умолчанию в FormField.

VKUI/packages/vkui/src/components/FormField/FormField.module.css

Lines 140 to 141 in 146ebc6

	.FormField--disabled {
	opacity: var(--vkui--opacity_disable_accessibility);

И теперь такая же в CustomSelect.

VKUI/packages/vkui/src/components/CustomSelect/CustomSelectInput.module.css

Lines 84 to 85 in 0f3d72b

	.CustomSelectInput__input:disabled ~ .CustomSelectInput__label-wrapper {
	opacity: var(--vkui--opacity_disable_accessibility);

У нас как раз такая прозрачность в дизайне

[inomdzhon]

👏

[BlackySoul]

VID_20240820172448.mp4

Понимаю, что это к NVDA не относится, но, кажется, на андроиде (talk back), че т совсем неважно себя чувствуют селекты, они почему-то все зачитываются как "disabled", и активировать их никак нельзя 🤔

[mendrew]

VID_20240820172448.mp4

Понимаю, что это к NVDA не относится, но, кажется, на андроиде (talk back), че т совсем неважно себя чувствуют селекты, они почему-то все зачитываются как "disabled", и активировать их никак нельзя 🤔

Да, дело в том, что CustomSelect предназначен только для десктопа. Для мобилок он недоступен. Для мобилок мы рекомендуем использовать нативный Select, либо наш NativeSelect, который визульно только выглядит как input VKUI, но не имеет множества кастомных свойств CustomSelect. По этой причине наш Select в зависимости от устройства использует под капотом либо NativeSelect либо CustomSelect.