Improve accessibility for DatePicker #793

heisand · 2023-08-23T08:30:50Z

Background

There are some accessibility issues with the DatePicker (and consequently the DateRangePicker):

One cannot tab inside the calendars, which makes it impossible for keyboard users to change months/years using the arrow buttons.
One cannot navigate inside the calendars with screen reader at all (using ctrl+opt+arrow) in, e.g., Chrome.
When closing the calendars, the focus ends up in a totally different place than what is logical.
There is no visual focus when moving focus to today's date.
The language codes are not totally correct, which causes some screen reader text to be read in English while other in Norwegian.

Other issues:

It appears a little buggy that one cannot close the calendar using the button, which is possible in React Aria's example.

Solution

Make it possible to navigate with keyboard in the calendar:

First, study React Aria's example to see if there are any props we are missing:
- hidden={isOutsideVisibleRange} helps navigate in the calendar with tab.

Secondly, study Entur's DatePicker, who also use the same library as us:
- To be able to tab easily inside the DatePicker, we can use a FocusLock around the Calendar, since we here really do not want to end up outside of the calendar unexpectedly.
Raise this issue in the react-spectrum repo. They made a workaround we await release on, while the original bug is reported to Chrome.
Make sure focus is reset to the calendar button when closed. This way, the next focusable element will be the next logical element. The way this is achieved, is wrapping the CalendarTriggerButton in a PopoverTrigger, which handles this for us. When using a PopoverTrigger, the focusable child must have a forwarded ref. The button then also needs the date picker ref instead of the input.
Add visual focus to today's date in the calendar when it is focused.
Correct the language codes used in React Aria's useState so that everything announced by the screen reader is in the same and correct language.
For the bugginess around closing the calendar with the button:
This is a little hard nut because we here are using the Popover from Chakra and not from React Aria. If we simply had used the Popover from React Aria, the open-close would handle itself the correct way. We use this Popover because we use the PopoverAnchor, PopoverPopoverArrow, an so on from Chakra, which must be wrapped in the Chakra Popover.

Then, we basically have two states, one for the Popover and another for the DatePicker (via useDatePicker's state). The Popover listens to outside clicks, escape clicks and so on, and the Popover can fire onOpen and onClose callbacks based on this. Here, we update the DatePicker's state to open and closed. If we did not do it this way, the first focusable element within the calendar is not set correctly (the first one should be today's date).

The reason why the calendar closes and opens right away when clicking the trigger button while the calendar is open, is then because the Popover notices we press outside the calendar and closes the state, while the trigger button then opens it again since the state just got closed.

This is also fixed by using the PopoverTrigger. The other props, returnFocusOnClose etc., specified for the Popover is really then not needed since they did not work as intended anyway.
In addition to this:
Since we had problems with portals for the ComboBox, add withPortal as an optional prop so that using a Portal or not is optional.

Will then also solve #731.

changeset-bot · 2023-08-23T08:30:57Z

🦋 Changeset detected

Latest commit: 7f99fd8

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@vygruppen/spor-react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

heisand · 2023-08-23T09:48:01Z

packages/spor-react/src/datepicker/Calendar.tsx

+  const calendarAriaLabel = calendarProps["aria-label"];
+
+  const ariaLabel =
+    t(texts.calendar) + (calendarAriaLabel ? ` ${calendarAriaLabel}` : "");


Add a slightly better aria-label than just, e.g, "august 2023". The result will be "Calendar august 2023". The August 2023 part comes from the React Aria calendarProps

heisand · 2023-08-23T09:50:06Z

packages/spor-react/src/datepicker/DatePicker.tsx

-      ) {
-        // Don't submit the form
-        e.stopPropagation();
-        state.setOpen(true);


I struggled finding that this code is really doing anything, other than creating confusion... I tried using Enter within the input field, but the calendar does not open...

Hm that's unfortunate. Without this code, there isn't really any way a screen reader can trigger the calendar.

Not much of a difference since it didn't work anyways, but we should probably find a way to trigger the calendar for the simple variant, right?

The normal way to open stuff when navigating with a screen reader is in fact by using space, not enter - and that works in the simple variant when I focus at the label. But keyboard users will not be able to focus on this element.. I do not know what has been discussed about the simple variant, but maybe rather it should open automatically when receiving focus as there is no actual indication that the user should press either space or enter in the input field to open it.

But I will leave it as is until now and this can be discussed separately 👍

heisand · 2023-08-23T09:53:46Z

packages/spor-react/src/datepicker/DateTimeSegment.tsx

@@ -38,7 +38,6 @@ export const DateTimeSegment = forwardRef<HTMLDivElement, DateTimeSegmentProps>(
          ...segmentProps.style,
          fontVariantNumeric: "tabular-nums",
          boxSizing: "content-box",
-          color: colors.darkGrey,


This unfortunately overwrote the focused style as well, so moved it to dateTimeSegment: instead

AnamaP · 2023-08-23T12:26:44Z

packages/spor-react/src/datepicker/DatePicker.tsx

                    {...fieldProps}
                  />
                </StyledField>
              </PopoverAnchor>
-              {hasTrigger && <CalendarTriggerButton {...buttonProps} />}
+              {hasTrigger && (
+                <PopoverTrigger>


AnamaP

I have to say that this is really an impressive piece of work and not least the effort you have put in to solve the challenges 💪🌟 Well described and comprehensive summary!

selbekk

+1 on what Ana Maria said. Great job here Heidi! 🙌

selbekk · 2023-08-23T13:35:09Z

packages/spor-react/src/datepicker/DatePicker.tsx

-      ) {
-        // Don't submit the form
-        e.stopPropagation();
-        state.setOpen(true);


Hm that's unfortunate. Without this code, there isn't really any way a screen reader can trigger the calendar.

Not much of a difference since it didn't work anyways, but we should probably find a way to trigger the calendar for the simple variant, right?

packages/spor-react/src/datepicker/utils.ts

packages/spor-react/src/theme/components/datepicker.ts

heisand added 23 commits August 21, 2023 08:20

Remove unused functionality

00f70b7

Test some more..

8c02a19

Make the datepicker work the Entur way

f9c5c0d

Make DatePicker tabbable at least

9a0be3d

Use darkGrey the correct place

7883b32

Add a better aria label to calendar

53dee9e

Format files

cc015d7

Close DatePicker with button when already open

955da59

Remove downlevelIteration

34d816d

Set focus back to trigger button on Escape

5c49239

Re-add dialogProps and buttonProps

d6deb63

Add visible focus to today's date

306a437

Use the correct language codes for all languages

dafb6ad

Refactor and simplify code a little bit

818f4a7

Add changeset

ac86914

Test popover trigger

6fc900e

Test more with popover

54ea538

Clean up

3004cb7

Make sure the trigger button has the ref

9ad58cf

Clean up more

12b64cf

Make sure both simple and trigger variant works

9a52857

Make DateRangePicker work

c46770a

Be able to specify using Portal or not

cd624a3

heisand added 2 commits August 23, 2023 10:34

Use the from calendarProps until further

96c7947

Make sure calendar does not appear twice

3cd8e06

heisand requested review from a team, selbekk and emildohlenhansen and removed request for a team August 23, 2023 09:47

heisand requested review from cecilmkl and AnamaP August 23, 2023 09:47

heisand commented Aug 23, 2023

View reviewed changes

heisand marked this pull request as ready for review August 23, 2023 09:50

heisand commented Aug 23, 2023

View reviewed changes

AnamaP reviewed Aug 23, 2023

View reviewed changes

AnamaP approved these changes Aug 23, 2023

View reviewed changes

selbekk approved these changes Aug 23, 2023

View reviewed changes

heisand added 2 commits August 24, 2023 08:48

Correct language code

8e2cb90

Simplify code

7f99fd8

heisand merged commit 160c056 into main Aug 24, 2023
1 check passed

heisand deleted the hmm-popover branch August 24, 2023 06:54

heisand mentioned this pull request Aug 30, 2023

UU for DatePicker #731

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve accessibility for DatePicker #793

Improve accessibility for DatePicker #793

heisand commented Aug 23, 2023 •

edited

Loading

changeset-bot bot commented Aug 23, 2023 •

edited

Loading

heisand Aug 23, 2023 •

edited

Loading

heisand Aug 23, 2023

selbekk Aug 23, 2023

heisand Aug 24, 2023 •

edited

Loading

heisand Aug 23, 2023

AnamaP Aug 23, 2023

AnamaP left a comment

selbekk left a comment

selbekk Aug 23, 2023

Improve accessibility for DatePicker #793

Improve accessibility for DatePicker #793

Conversation

heisand commented Aug 23, 2023 • edited Loading

Background

Solution

changeset-bot bot commented Aug 23, 2023 • edited Loading

🦋 Changeset detected

heisand Aug 23, 2023 • edited Loading

Choose a reason for hiding this comment

heisand Aug 23, 2023

Choose a reason for hiding this comment

selbekk Aug 23, 2023

Choose a reason for hiding this comment

heisand Aug 24, 2023 • edited Loading

Choose a reason for hiding this comment

heisand Aug 23, 2023

Choose a reason for hiding this comment

AnamaP Aug 23, 2023

Choose a reason for hiding this comment

AnamaP left a comment

Choose a reason for hiding this comment

selbekk left a comment

Choose a reason for hiding this comment

selbekk Aug 23, 2023

Choose a reason for hiding this comment

heisand commented Aug 23, 2023 •

edited

Loading

changeset-bot bot commented Aug 23, 2023 •

edited

Loading

heisand Aug 23, 2023 •

edited

Loading

heisand Aug 24, 2023 •

edited

Loading