-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Switch tabs after successful upload of fonts #55975
base: trunk
Are you sure you want to change the base?
Conversation
Size Change: +41 B (0%) Total Size: 1.69 MB
ℹ️ View Unchanged
|
This definitely works as expected. Tab behavior is what I expected. 2 things to note: The 'success' notification isn't visible because of the switch. Which I believe is OK since the switch kind of demonstrates the success. Error message are seen and that's good. It might be nice to show the success on the Library Tab. The "Install Fonts" tab doesn't behave the same way and I believe it probably should. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I really don't like the accessibility situation here. It would be one thing if the upload page was separate but I am not sure switching tabs spells out success clearly enough for non-sighted users. Where would focus land? On the newly uploaded font or does it just get left out in the void? I need additional testing on this before this gets merged.
@jasmussen Could you share your thoughts on this? |
Thanks for the ping, thanks for exploring. To explain the fuller context, I'll rewind a bit. The fonts library tab should ideally be a silo of fonts, a bit like how the media library. Right now it's doing a bit of double duty, also defining whether a font is active or not. This is exacerbated a bit by the fact that when you upload a font, that font is inactive, it's simply added to the library. After upload, you have to actually go to the font in the library to activate it. Before discussing options, a quick review of what exists in trunk at the moment:
All of the above is shown in this GIF: A few issues with that:
Now, reviewing this branch, what happens when you upload a font file is that you are immediately taken to the library tab. But to Alex' point, there's no confirmation of what actually happened. I appreciate the PR, but the original intent was to take you to the font page, i.e. Library > [Just-uploaded font name]. The idea here being, that just uploading the font does little, you have to activate it too, that's the obvious next step. This is shown in the following GIF: Question: would that original intent be okay? Upon upload, redirect to the newly uploaded font so that you can activate it? |
5c53e02
to
740f895
Compare
Flaky tests detected in 740f895. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7208714375
|
@jasmussen Thanks for reviewing. I have addressed the suggested feedback.
Enabled Notices to be dismissible. They stay in the UI until dismissed by the user.
Yes. Installed font is automatically selected in the library tab after the successful upload.
Focus would go to Library tab after uploading the font. However the accessibility situation isn't great with in the library content panel. I would like to keep it in a different issue to refine further. |
Yeah, I know. The true problem becomes, if accessibility is split out from this PR, it may get left behind for another Core release. It's just the way it happens a lot of the time. 😞 I'll try to get this tested at some point. |
Code is taken out from this PR and addressed separately here #58178 Rebased with #57181 for @alexstine Following is the latest situation.
font-tab-switching.mp4 |
740f895
to
9bdb4a4
Compare
What?
This change replaces
TabPanel
withTabs
component (which is a controlled component), and switches to Library tab (first tab) after successfully uploading the font from "Upload" tab.Testing Instructions
Testing Instructions for Keyboard
Screenshots or screencast
References:
Fixes: #54779
Tabs component implementation: #53960