Table column resizing aria docs (#3982)

* progress for making aria table resizing example

* styling updates and addition of menu button for resizing

* fixing it so user doesnt focus the resizer immediately when using left/right arrows

still a bit iffy, cant seem to get focus to move between the columns, def something with the menutrigger...

* making column resize actually get called if provided

* fixing bugs, testing various cases, adding description to useTableColumnResizeState

* Fix crash if onColumnResize is undef

* figure out break

* fix docs build break, add rest of code

* fix docs example render issues

* remove onColumnResize/Start/End from useTableColumnResizeState

these are unecessary since the state returns the resizing column already and we have onResize handlers in useTableColumnResize

* docs first draft

* remove local test story for now

* small cleanup

* updating resizer in docs

* fixing talkback and Safari aria resizer focus issues

* fixing checkbox rendering in iOS Safari

* editing/proofreading

* move useTableColumnResizeState to useTableState docs

* moving resizable table section and addressing smaller changes

* simplifying example

* collapsing some parts of the code and trying to display the code blocks as is

* addressing review comments

* add tailwind example

* forgot to add some additional comments

* override native focus ring for button

* update copy as per review and re-collapse code blocks

collapsed code blocks feel better on mobile so I changed it back to that

* uncollapsing code blocks

* Rough example of press header to start resizing

* Updating column resize to support mode where resizer is always visible

split out from #4061, see that PR for more details and alternative approaches

* update to match latest changes to api

* mimic docs example

* forgot to clean up some things

* pulling in code changes from docs PR

get rid of inline styles and fix case where there isnt a separate trigger for starting column resize

* Add separate mode for triggering resizing manually via Enter (#4061)

* adding separate mode for enabling resize

this make it so the user would have to hit Enter to start resizing. This allows us to have the resizers always be visible and still preserve grid navigation between columns.

* skip test for now so build works for testing

* wrap useMove so it doesnt trigger keyboard handlers when edit mode isnt enabled

* update tableview so that it enters edit mode when choosing to resize via menu

still one bug where manager.isFocused is set to false for somereason after confirming the resize

* fixing bugs

fixes bug where selection manager would stop tracking if the manager is focused or not if keyboard nav was disabled. This was a bug where the user wouldnt be able to move table focus after confirming a resize operation. Adds new prop to useTableColumnResize for triggering resizeStart if resizer if focused. This is needed for our table since we dont have a way to call resizeStart programmatically out side of useTableColumnResize and we dont want to call it on focus for the aria example since that should require a manual trigger of Enter to enter resize mode

* updating description and missing logic

* getting rid of shouldResizeOnFocus prop

* fix skipped test

turns out the simulated resize operation was blurring before pressEnd finished

* updated docs to move inline css into classnames

also updates copy and handles case where trigger ref isnt provided

* remove sorting story and cleanup

* starting resize on press for indicator

this unfortunately causes a difference in behavior between starting a drag on menu (no resizestart until move) and starting a drag via mouse/touch (resizestart immediately on press)

* using triggerRef existance to determine if behavior is resize on focus

one test is still breaking, debugging

* fixing test

test would blur on rerender causing a column width update even though resizing wasnt happening. Changed conditonal so calling endResize only causes value updates if we are resizing

* make resizer single line for focus

* nit reorganizing

* update docs example for resizer styling

* mimic docs example

remove selection from example to mirror docs

* adding description for keyboard users for Enter to start resizing

this is for the aria table example where resizing is entered manually via Enter while focused on the resizer

* fixing issue where tab wasnt exiting the table when focused on the reizer

* adding min width for columns to avoid weirdness with trying to collapse 0

* fix lint

* avoid weirdness with width 0 by setting a min width

* propagate all keydown events if we arent in resize mode and have always visible resizers

forgot that we also have other keyboard combos like cmd + a or escape that should also be handled by useSelectableCollection

* removing ref read in render

* add aria description to input for virtual modality too

if the user enters the table using control+option+arrow keys in voiceover, they will be virtual modality so we want the description for press enter to resize to be audible there

* addressing review comments

* fix some copy

* prevent extraneous scrolling when keyboard navigating to the resizer

margin applied on the visually hidden input makes scrollIntoView think it needs to scroll it

* fixing extraneous scrolling behavior

* address review comments

* fix logic

* removing margin style in favor of hook provided style

* fix typescript lint

* make resize handle larger

* fix resizer style on drag

* Simplify aria table resizing docs example (#4253)

* update example to match updated hooks

* remove VisuallyHidden from resizer in favor of styles from hook

* adding version badge

---------

Co-authored-by: Robert Snow <[email protected]>
Co-authored-by: Devon Govett <[email protected]>

Author: 3 people