Try revamped Document Bar #62527
Draft
Try revamped Document Bar #62527
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
stokesman
added
[Package] Editor
|
Size Change: +276 B (+0.02%) Total Size: 1.76 MB
ℹ️ View Unchanged
|
afercia
added
the
[Focus] Accessibility (a11y)
|
@stokesman thanks for working on this ❤️ A few issues to address though. The heading shouldn't be a H1. There's already a visually hidden H1 in the page. As such, there are now two H1. That's not OK for semantics and accessibility. While this issue may be not entirely new, this is a good opportunity to fix it. It should be changed to a H2. Screenshot:
When editing some objects, e.g. a template, the heading gets an I wouldn't recommend to overlay the button and heading, then using
Roughly, something like in this screenshot (focus set on both buttons to better illustrate): Lastly, as also noted elsewhere, the Document bar should not use the |
afercia
requested changes
Jun 18, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
An attempt to fix/improve the Document Bar.
Why?
These points are all part of #51460, though I'm not sure this completely resolves that issue.
How?
<h1>and<div>out of the<button>)This change lead to the substantial design difference in this PR. Currently the background and its hover state are on the root element and each button needs its own. Putting the same background on the buttons to preserve the design isn’t enough. Their border-radius would have to be removed on the sides the buttons meet. Then during transitions the buttons fading and overlapping ruin the effect*
aria-haspopupattribute*Perhaps this can be retried as it was before revising the animation and now it possibly could work.
Testing Instructions
Testing Instructions for Keyboard
Screenshots or screencast
DocumentBar.mp4