Closed elephantcatdog closed 2 years ago
There are extraneous changes shown in this PR right now because the main branch hasn't been merged into itwinui-css-v1 (how to do?), and I initially made this branch off of main. If you want to review it, the relevant changes are in Table.tsx, Table.test.tsx, and Table.stories.tsx.
I checked if Button
s were accessible with the keyboard within a table and they are. The issue with Anchor
s in a table doesn't seem to be a table issue.
I played with the tests, trying to get it to work (fail) for the filter test, but couldn't. I dunno if it helps someone help me to leave it like this, but the alternative is to remove the filter test because it'll pass even if it should fail.
The problems with Anchor
were further reaching than I thought I should go for this PR, so I made a new issue: https://github.com/iTwin/iTwinUI/issues/904
I removed the test for filtering navigation as I couldn't find a solution to make it fail/pass correctly.
Fixed sorting, filtering, and anchor navigation issues in the table.
Sorting:
tabIndex
andonKeyDown
to the div that contains the sort icon buttonFiltering
visibility: hidden
when not hovered on. Instead of usingvisibility
to control the look of the button, I changed it to useopacity
. This is done in the CSS repo and more info can be found at that PR: https://github.com/iTwin/iTwinUI/pull/752Anchors
tabIndex
andonKeyDown
props to the anchors found inTable.stories.tsx
. I also tried fiddling with the table'stabIndex={-1}
, but that wasn't affecting this issue.Added tests for sorting and filtering
userEvent.tab()
is a 'better' tab than that made by using the keyboard? Because it's able to correctly tab through the filtering menu even whenvisibility: hidden
.Closes iTwin/iTwinUI-react#488
Checklist