feat(DateInput): make accessible for screen readers #8419
Closed
+965
−189
Conversation
This file contains hidden or 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
|
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. |
size-limit report 📦
|
e2e tests
|
👀 Docs deployed
📦 Package ✅yarn add @vkontakte/vkui@https://vkui-screenshot.hb.bizmrg.com/pull/8419/57d959bea1e6c3052c8aec98aa382885bbce7c9b/pkg/@vkontakte/vkui/_pkg.tgzCommit 57d959b |
andrey-medvedev-vk
force-pushed
the
mendrew/fix/DateInput/a11y
branch
4 times, most recently
from
d664f56 to
08b6122
Compare
andrey-medvedev-vk
force-pushed
the
mendrew/fix/DateInput/a11y
branch
from
08b6122 to
224b033
Compare
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #8419 +/- ##
==========================================
+ Coverage 95.57% 95.80% +0.23%
==========================================
Files 413 413
Lines 11766 11856 +90
Branches 3899 3930 +31
==========================================
+ Hits 11245 11359 +114
+ Misses 521 497 -24
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
andrey-medvedev-vk
force-pushed
the
mendrew/fix/DateInput/a11y
branch
from
ef8438c to
2e3b239
Compare
This role is not recommended to use by MDN Better to use native inputs, but it might be perfect fit for our case when the majority of input functionality is done by InputLike component. Fix focus with TAB/Shift + TAB Open calendar by <Space> and always show calendar icon Add FocusTrap to DateInput Add role dialog to DateInput calendar Add support for Home/End/PageUp/PageDown In Calendar days navigation Add grid role to Calendar Preserve focus state on focused day. It means when user uses Tab to move away from focused day on calendar we keep it's value, so, when user goes back to it we focus exactly that day. Fix navigation with keyaboard through days Allow to navigate to days using Tab and focusable day is current value in the input, or first day of the Month if month is changed, but input value is not. Allow NVDA to navigate via ctrl+alt+arrow Restore focus on active day Select date on Enter/Space key No label with date if there is no value Add day label without specific year, as it is too match info on calendar to listen Fix click outside logic When the calendar is opened we don't have selected value in the input Should we have one? Visually focus days when user clicks on label Delay range selection to fix Firefox behavior For some reason when we focus first or last element of DateInput from the outside using Tab, then we focus the first InputLike, but the content of it is not selected for some reason. The delay allows us to visually show the selection Fix position of Calendar in doc Readme It falls outside of iframe if we disable iframe. Add Panel and View and use iframe to keep render it properly inside the doc Add current month label to the table grid Remove aria-modal="true" Dialog is enough here. We allow to interact with other element before closing the Calendar Deprecate changeDayLabel in Calendar Since if follow MUI calendar we should show viewDate as label there We keep changeDayLabel in DateInput since it needs to be in the input Add label for Calendar in DateInput Fix attribute name Add accessible prop Add a11y section into DateInput doc Add calendar toggle on calendar icon click Open calendar on Click on text Don't show calendar icon if calendar show is off Open calendar when user click on input CalendarRange: Small fix for keyboard Enter/Space click behavior Allow to control restoreFocus of FocusTrap Move Calendar back inside FormField Add note that calendar is now can be opened by click on input
andrey-medvedev-vk
force-pushed
the
mendrew/fix/DateInput/a11y
branch
from
47412b1 to
a77ea65
Compare
Include in tab focus test hour/minutes inputs
secuense of <T> (jump into the closest table) and then <Ctrl>+<Alt>+ArrowKeys
Since Label goes out of grid structure
This was referenced Apr 18, 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иDateRangeInput#4932Описание
В данный момент DateInput является недоступным для скринридеров. Полный список проблем в #4932
Изменения
spintbutton(и соответствующие этой роли aria-аттрибуты) дляInputLikeкомпонентов, чтобы они не только были похожи на инпут, но и являлись для скринридеров чем-то вроде счётчиков, только тогда пользователям ассестивных технологий понятно как менять в них значение (с клавиатуры стрелочками)Теперь можно свободно перемещаться с помощью фокуса.
Календарь можно открыть только по клику на символ календаря. (Это повторяет логику нативного
input type="date"и DateInput из MaterialUI.modal.Release notes