fix: a11y issues in files page #1512
Conversation
|
I'll look at E2E tests |
There was a problem hiding this comment.
Thank you so much @rafaelramalho19, this is very important work! 🙌
Really happy about build safeguards that will do a11y checks automatically going forward.
Some notes / asks before we merge this:
- I fixed E2E tests, should be green now :)
- Noticed that on narrow viewports the menu is moved to the bottom (it was at the top before a11y fixes). E2E tests now run in 1366x768 to ensure we test with navigation on the left.
- nit: when there are many files, and I navigate down the list with keyboard arrows, I get bit jittery animation (scrolling down a bit, and the jumping back to the top. Then I get to the the middle of the list, then it disappears – demo)
- @rafaelramalho19 is this something we can easily fix? if not, I don't think it should block this PR
- needs to be rebased on top of master to ensure the updated
LanguageModalalso gets fixes
|
@lidel thank you so much for checking that up and fixing it 😄 Related to your demo, it looks like you're using React-virtualized table arrow navigation, which I have no control over (you're using arrow down & up instead of tab). There's some fixes related with improving tab navigation on the webui as a whole that I want to do when I have the time 😓 |
rafaelramalho19
force-pushed
the
fix/files-a11y
branch
from
22b6b87
to
c1f4d7e
Compare
There was a problem hiding this comment.
@rafaelramalho19 I understand. If its a rabbit hole, the arrow navigation jitter should not block important work done in this PR.
Are you able to resolve conflict in FilesPage?
After that, ping me if you have any new issues with E2E.
rafaelramalho19
force-pushed
the
fix/files-a11y
branch
from
f51dbb2
to
37185e4
Compare
|
The arrow navigation is being handled on a separate branch, so don't worry about it 😄 |
|
@rafaelramalho19 is this ready for final review, or do you want to add anything? |
It's good for final review 👌 |
There was a problem hiding this comment.
Made another pass, glooks good, but found small visual regressions that would be good to address before merging:
(1) Button labels
... are now aligned to left:
Status on new install:
Settings:
Connection screen:
etc..
Is this on purpose? Before this PR, we centered them:
(2) Delete option is now too prominent
a11y changes highlight the very first item, which happens to be "delete" – could we change the order?
Something like (purely subjective order, the important piece is to have "share link" at the top)
- Share link
- Copy CID
- Inspect
- Pin
- Rename
- Delete
|
+1 on the menu order. Thank you so much for the careful review, @lidel. |
|
Nice catch @lidel , will fix it now 😄 |
|
@lidel @jessicaschilling you like this order? https://i.imgur.com/AZMDSWT.png Fixed uncentered buttons across the app, it was due to me forgetting to check all the buttons after removing the text-align: center property 😅 |
|
Should we swap download and pin? |
Here's how it looks: https://i.imgur.com/gpr4DEB.png |
|
I like that if @lidel is good with it. Thanks! |
There was a problem hiding this comment.
I resolved CI issues (see #1521 and #1523) and rebased this PR to take advantage of those fixes.
CI is green, and LGTM.
One more thing: when I select a single file, the action bar that slides in from the bottom gets this dotted highlight to indicate a11y context:
This is pretty common UI interaction and I worry some people not familiar with a11y may report this as a bug. At the same time not sure how to avoid this. Don't want this to block the PR, just mentioning it here in case there in case you already have thoughts on how to deal with this (but ok to fix in separate PR).
@rafaelramalho19 when you are back on Monday, feel free to merge.
fixes #1498
Impacted areas:
Any questions or concerns please raise them 😄