Table Column Resize via screen readers #3295

snowystinger · 2022-07-11T22:27:08Z

Splits the MenuTrigger from the Header. This makes for some better more reasonable styling and should improve screen reader announcements as well.

I've changed the role=separator to an input type=range, just changing to slider wasn't enough, TalkBack wouldn't fire onChange events with swipe gestures. This brings it more in line with SliderThumb. (See https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/slider/src/SliderThumb.tsx#L46 for rendering and https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/slider/src/useSliderThumb.ts#L179 for aria similarities)

As a result, I've been able to simplify the aria-* attributes on the input, some styling needed changes as well to compensate for the new structure.

I've included a new prop to useTableColumnHeader, optional so backwards compatible, non-breaking hasMenu which will help us in the future when we allow people to pass in their own menu items. It also removes knowledge of resizing from useTableColumnHeader.

I've hooked up all the id's for better screen reader announcements, the resizer will now be labelled by the column header. This helps with the entire table announcing again as well.

I've limited the max value of the width from Infinity to the max safe integer, that's all we can really support anyways, and a max value of Infinity causes TalkBack to stop firing onChange.

Open issues:
There is an issue where VO reads off a large negative number when focusing the resizer that I haven't been able to solve yet.
FF still doesn't display focus ring for mouse users

✅ Pull Request Checklist:

Included link to corresponding React Spectrum GitHub Issue.
Added/updated unit tests and storybook for this change (for new code or code which already has tests).
Filled out test instructions.
Updated documentation (if it already exists for this component).
Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

adobe-bot · 2022-07-11T22:49:56Z

Build successful! 🎉

packages/@react-aria/table/src/useTableColumnHeader.ts

adobe-bot · 2022-07-14T01:09:35Z

Build successful! 🎉

changed resizer to input w/ onChange since Android Talkback doesnt fire keyboad events when swiping up/down. aria-valuemax Infinitiy breaks android talkback slider interactions

adobe-bot · 2022-07-15T21:16:29Z

Build successful! 🎉

adobe-bot · 2022-07-15T21:19:18Z

Build successful! 🎉

adobe-bot · 2022-07-15T21:20:16Z

Build successful! 🎉

adobe-bot · 2022-07-15T21:44:39Z

Build successful! 🎉

# Conflicts: # packages/@react-aria/table/src/useTableColumnHeader.ts # packages/@react-aria/table/src/useTableColumnResize.ts # packages/@react-spectrum/table/src/Resizer.tsx # packages/@react-spectrum/table/src/TableView.tsx

# Conflicts: # packages/@react-aria/table/src/useTableColumnResize.ts

adobe-bot · 2022-07-27T00:01:19Z

Build successful! 🎉

adobe-bot · 2022-07-27T00:11:53Z

Build successful! 🎉

# Conflicts: # packages/@react-aria/table/src/useTableColumnResize.ts # packages/@react-spectrum/table/package.json # packages/@react-spectrum/table/src/TableView.tsx

adobe-bot · 2022-08-01T21:33:14Z

Build successful! 🎉

ktabors

I tested a few tables with OSX Chrome VO and this worked nicely.

packages/@react-aria/table/intl/en-US.json

packages/@react-aria/table/src/useTableColumnResize.ts

packages/@react-spectrum/table/src/TableView.tsx

adobe-bot · 2022-08-04T17:50:35Z

Build successful! 🎉

reidbarber

LGTM on VO. I did see the large number read off you mentioned

adobe-bot · 2022-08-09T21:00:46Z

Build successful! 🎉

LFDanLu

Some things I noted when testing:

The resize handles don’t appear after tapping the “Resize column” menu option in Android
- Only happen in the storybook iframe, works fine if it is outside the iframe
Pretty hard to drag the handles in mobile but that will be handled in followups
Unable to confirm a resize operation when double tapping in VoiceOver sometimes (happened with “File Name” column in the “some columns not allowed resizing story”). Other times double tapping will cause a shift in position before confirming the resize operation

packages/@react-aria/table/src/useTableColumnResize.ts

LFDanLu · 2022-08-10T19:15:57Z

packages/@react-aria/table/src/useTableColumnResize.ts

+        onMouseDown: (e: React.MouseEvent<HTMLElement>) => {
+          if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {
+            return;
+          }
+          onDown();


I'm guessing these are used instead of usePress because of the extra conditional early returns? Seems to be a pretty common pattern that is cropping up, might be something we could add to usePress as an option?

this is copied from the slider code
which is track listener code, so this may not be necessary? https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/slider/src/useSlider.ts#L198
I'll double check

sorry i linked the wrong one, ignore my previous comment, it's from slider thumb
https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/slider/src/useSliderThumb.ts#L212 which makes more sense
I've switched to usePress and it appears to work just fine. It may just be old code that needed altKey etc before that existed in the PressEvent and keyboard was already covered elsewhere and usePress would double that coverage

packages/@react-spectrum/table/src/TableView.tsx

LFDanLu · 2022-08-10T20:04:57Z

packages/@react-spectrum/table/src/TableView.tsx

+      // focusSafely won't actually focus because the focus moves from the menuitem to the body during the after transition wait
+      resizingRef.current.focus();


Maybe linked to the weird The resize handles don’t appear after tapping the “Resize column” menu option in Android in storybook iframe behavior I noted. I can try poking around

Looks like the issue goes away if I wrap this focus in a setTimeout,

hahaha, but in a RAF it was failing for me

adobe-bot · 2022-08-10T22:54:52Z

Build successful! 🎉

LFDanLu

I can't seem to confirm a resize operation via Voiceover now, not entirely sure how the changes broke that hrm

adobe-bot · 2022-08-10T23:53:30Z

Build successful! 🎉

LFDanLu · 2022-08-11T00:09:33Z

packages/@react-aria/table/src/useTableColumnResize.ts

+      if (e.pointerType === 'virtual' && columnState.currentlyResizingColumn != null) {
+        stateRef.current.onColumnResizeEnd(item);
+      }


Confirmed that double tapping to trigger a press on the visually hidden input via VO and Talkback now "confirm"/exit the resize operation, but there seems to be an issue in Android Chrome now where the focus is lost to the body upon triggering the press. VO is a bit better but it suffers from an issue where the press happens on the element under the visually hidden input which could be an entirely different column depending on how much resizing happened.

What if you have move focus to the column header in this case instead since the resize handles go away? I'm fine with handling this in a followup or after we confirm the overall behavior with accessibility if you'd like

Focus should be moving to the header on column resize end, so I'm not sure what you're seeing. Maybe we can hop on a call tomorrow and discuss it more.

adobe-bot · 2022-08-11T23:09:08Z

Build successful! 🎉

LFDanLu

Tested w/ Rob, Android Chrome and VoiceOver issues have been resolved

devongovett · 2022-08-12T17:25:26Z

packages/@react-aria/table/src/useTableColumnHeader.ts

    columnHeaderProps: {
-      ...mergeProps(gridCellProps, pressProps, focusableProps, descriptionProps),
+      ...mergeProps(gridCellProps, pressProps, focusableProps, descriptionProps, {
+        onPointerDown: (e) => console.log(e.target.outerHTML)


Assume this was not meant to go in.

devongovett · 2022-08-12T17:27:36Z

packages/@react-aria/table/src/useTableColumnHeader.ts

-  isVirtualized?: boolean
+  isVirtualized?: boolean,
+  /** Whether the column has a menu in the header, this changes interactions with the header. */
+  hasMenu?: boolean


Should this be less specific to menus? Should it be more like an override to disable the default sorting behavior?

Maybe, what are the use cases other than a menu where we'd want to disable the default sorting behavior?

Not sure, but I mainly wondered if menus were too spectrum-specific?

maybe, it was the ask for a future feature, custom menu options on columns. so that's where the name came from. I'm fine changing it though to disableDefaultSort or disableDefaultInteraction?

snowystinger added 2 commits July 11, 2022 15:26

Table Column Resize via screen readers

7f5bcaf

Merge branch 'main' into table-col-resize-voiceover

fd0df6a

snowystinger marked this pull request as ready for review July 11, 2022 22:29

Improve aria announcement

7246140

snowystinger mentioned this pull request Jul 11, 2022

Column Resizing Epic #3007

Closed

61 tasks

separate column header from trigger button

964bb5f

devongovett reviewed Jul 13, 2022

View reviewed changes

packages/@react-aria/table/src/useTableColumnHeader.ts Outdated Show resolved Hide resolved

Get VO working again

01b6f9e

snowystinger changed the title ~~Table Column Resize via screen readers~~ [WIP] - Table Column Resize via screen readers Jul 14, 2022

LFDanLu and others added 5 commits July 15, 2022 11:47

fixing Android Talkback table column resizing

5f4a54d

changed resizer to input w/ onChange since Android Talkback doesnt fire keyboad events when swiping up/down. aria-valuemax Infinitiy breaks android talkback slider interactions

mimic slider thumb

75fe702

fix tests and pointer interaction

7a521a3

Merge branch 'main' into table-col-resize-voiceover

5b94679

Can only support max integer width

2d942c9

snowystinger added 2 commits July 15, 2022 14:26

improve announcements

c58e258

remove extraneous story

218689e

snowystinger changed the title ~~[WIP] - Table Column Resize via screen readers~~ Table Column Resize via screen readers Jul 15, 2022

fix lint

9d1d5a4

snowystinger added 2 commits July 26, 2022 16:52

Merge branch 'main' into table-col-resize-voiceover

e6594be

# Conflicts: # packages/@react-aria/table/src/useTableColumnHeader.ts # packages/@react-aria/table/src/useTableColumnResize.ts # packages/@react-spectrum/table/src/Resizer.tsx # packages/@react-spectrum/table/src/TableView.tsx

Merge branch 'main' into table-col-resize-voiceover

11951b8

# Conflicts: # packages/@react-aria/table/src/useTableColumnResize.ts

fix types

b9b2043

Merge branch 'main' into table-col-resize-voiceover

eb4b860

# Conflicts: # packages/@react-aria/table/src/useTableColumnResize.ts # packages/@react-spectrum/table/package.json # packages/@react-spectrum/table/src/TableView.tsx

ktabors reviewed Aug 2, 2022

View reviewed changes

remove extra newline

48b09cb

ktabors previously approved these changes Aug 4, 2022

View reviewed changes

reidbarber previously approved these changes Aug 9, 2022

View reviewed changes

Merge branch 'main' into table-col-resize-voiceover

e6a531a

LFDanLu reviewed Aug 10, 2022

View reviewed changes

review comments

4825f50

snowystinger dismissed stale reviews from reidbarber and ktabors via 4825f50 August 10, 2022 22:17

snowystinger added 2 commits August 10, 2022 15:43

Fix Chrome Android

fdf1d1e

fix lint

6623a3c

LFDanLu reviewed Aug 10, 2022

View reviewed changes

clicking on resizer in AT should confirm size

b48aa5b

LFDanLu reviewed Aug 11, 2022

View reviewed changes

snowystinger added 2 commits August 11, 2022 15:18

Fix Android Talkback returning focus

ed01e29

Fix restore focus to trigger

fe73dee

LFDanLu approved these changes Aug 11, 2022

View reviewed changes

reidbarber approved these changes Aug 12, 2022

View reviewed changes

snowystinger merged commit f4c916e into main Aug 12, 2022

snowystinger deleted the table-col-resize-voiceover branch August 12, 2022 16:08

snowystinger added the needs testing label Aug 12, 2022

devongovett reviewed Aug 12, 2022

View reviewed changes

devongovett removed the needs testing label Aug 19, 2022

		// focusSafely won't actually focus because the focus moves from the menuitem to the body during the after transition wait
		resizingRef.current.focus();

Table Column Resize via screen readers #3295

Table Column Resize via screen readers #3295

Uh oh!

Conversation

snowystinger commented Jul 11, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

Uh oh!

adobe-bot commented Jul 11, 2022

Uh oh!

Uh oh!

adobe-bot commented Jul 14, 2022

Uh oh!

adobe-bot commented Jul 15, 2022

Uh oh!

adobe-bot commented Jul 15, 2022

Uh oh!

adobe-bot commented Jul 15, 2022

Uh oh!

adobe-bot commented Jul 15, 2022

Uh oh!

adobe-bot commented Jul 27, 2022

Uh oh!

adobe-bot commented Jul 27, 2022

Uh oh!

adobe-bot commented Aug 1, 2022

Uh oh!

ktabors left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

adobe-bot commented Aug 4, 2022

Uh oh!

reidbarber left a comment

Choose a reason for hiding this comment

Uh oh!

adobe-bot commented Aug 9, 2022

Uh oh!

LFDanLu left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

snowystinger Aug 10, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

adobe-bot commented Aug 10, 2022

Uh oh!

LFDanLu left a comment

Choose a reason for hiding this comment

Uh oh!

adobe-bot commented Aug 10, 2022

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

adobe-bot commented Aug 11, 2022

Uh oh!

LFDanLu left a comment

Choose a reason for hiding this comment

Uh oh!

snowystinger commented Jul 11, 2022 •

edited

Loading

LFDanLu left a comment •

edited

Loading

snowystinger Aug 10, 2022 •

edited

Loading