feat(DateInput,DatePicker): add screenreader support to custom input #3602
+54
−13
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
sashachabin
force-pushed
the
input-like-text-screenreader
branch
2 times, most recently
from
b123aa0 to
8f5692b
Compare
sashachabin
changed the title
DateInput<InputLikeText>
sashachabin
force-pushed
the
input-like-text-screenreader
branch
2 times, most recently
from
bdd1827 to
47d907b
Compare
sashachabin
changed the title
<InputLikeText>
sashachabin
changed the title
sashachabin
force-pushed
the
input-like-text-screenreader
branch
from
47d907b to
8d84b9c
Compare
sashachabin
changed the title
sashachabin
force-pushed
the
input-like-text-screenreader
branch
from
645ffe1 to
ce11adb
Compare
sashachabin
force-pushed
the
input-like-text-screenreader
branch
from
5d97eb7 to
3d4915d
Compare
sashachabin
force-pushed
the
input-like-text-screenreader
branch
from
3d4915d to
4674f77
Compare
sashachabin
force-pushed
the
input-like-text-screenreader
branch
from
4674f77 to
d5f5c51
Compare
sashachabin
commented
Feb 19, 2025
| @@ -214,21 +216,20 @@ export class InputLikeText extends React.Component<InputLikeTextProps, InputLike | |||
| {...rest} | |||
| className={className} | |||
| style={{ width, textAlign: align }} | |||
| tabIndex={disabled ? undefined : 0} | |||
| tabIndex={disabled ? -1 : 0} | |||
There was a problem hiding this comment.
При disabled указал -1 вместо undefined из-за ошибки ESLint: jsx-a11y/interactive-supports-focus. Правило требует обязательно задавать tabIndex вместе с role="textbox"
zhzz
approved these changes
Feb 20, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Проблема
<DateInput>Проблемы связаны с тем, что кастомный ипнут состоит из
<span tabindex="0" onKeyDown>+<input type="hidden">.Решение
Изменения затрагивают компонент
<DateInput>и тесты<Combobox>, которые используют<InputLikeText>.1. Доступность <DateInput> и <InputLikeText>
spanатрибутrole="textbox"2. Починка тестов <ComboBox>
<ComboBox>использует<InputLikeText>только для внешнего вида и получения фокуса.После получения фокуса поле
<InputLikeText>заменяется на обычный<Input>— проверки на это появились в тестах на focus/blur в PR #3133.Ранее через
queryByRole('textbox').not.toBeInTheDocument()мы проверяли отсутствие<Input>, но теперь<InputLikeText>тоже имеет правильную рольtextbox.getByRole('textbox')→queryByTestId(InputDataTids.root)Ссылки
Демо
Исправленный ввод в скринридере
__.__.____— Не работал ввод вместе со скринридером — в NVDA цифры на клавиатуре "1", "2" тригерят навигацию к заголовкам 1 и 2 уровня
edit— Работает ввод и произносятся цифры
— Значения не читаются целиком из-за маски (стало лучше, но не идеально — обходится через aria-атрибуты)
Чек-лист перед запросом ревью
Добавлены тесты на все изменения
✅ unit-тесты для логики
⬜ скриншоты для верстки и кросс-браузерности
⬜ нерелевантно
Добавлена (обновлена) документация
⬜ styleguidist для пропов и примеров использования компонентов
⬜ jsdoc для утилит и хелперов
⬜ комментарии для неочевидных мест в коде
⬜ прочие инструкции (
README.md,contributing.mdи др.)✅ нерелевантно
Изменения корректно типизированы
✅ без использования
any(см. PR2856)⬜ нерелевантно
Прочее
✅ все тесты и линтеры на CI проходят
✅ в коде нет лишних изменений
✅ заголовок PR кратко и доступно отражает суть изменений (он попадет в changelog)