Movers: Add bigger visible focus rectangle. #23760
Conversation
jasmussen
added
the
[Focus] Accessibility (a11y)
|
Size Change: +14 B (0%) Total Size: 1.15 MB
ℹ️ View Unchanged
|
|
@jasmussen I haven't tested, but this seems like it might partially address an issue I noticed in #23667. |
|
Hmmm... I know this is more accurate to the actual clickable area, but it's also a lot uglier. It's also inconsistent with all the other toolbar buttons. I'm thinking perhaps we should just bite the bullet and do this:
That would both make the clickable areas larger while also solving the issue of users thinking that the chevrons are part of the same button as the block icon. If we then increased the focus rectangles in that design, it wouldn't look as bad (though it would still be inconsistent). |
|
Also, technically the movers should be separated from the switcher anyway since they're technically in separate toolbar groups in the actual markup. Toolbar groups are supposed to be separated with a dividing line; that's how it works in the rest of the block toolbar. |
Yep, very much agreed. But it's often the first reaction when reviewing these, judging the hit area by the focus rectangle moreso than trying them. This would help with that.
I think a version of that may be the next thing to try, yes, at the very least an iteration of the design towards that. I would love for us to consider the borders a little bit, because it very quickly gets heavy — I don't have a solution, but I know there is one if we look for it. |
|
Thanks for opening this PR. We (accessibility team) really hope this is solved soon and cherry picked for 5.5 as it's part of a broader issue that in our opinion is an accessibility regression in 5.5 as reported on #21935. Id say that at least the border to separate the movers should go into WordPress 5.5. @jasmussen any news? |
|
@ZebulanStanphill should I move forward with rebasing and refreshing this one, or would you like to take it from here? |
|
I think it all kind of depends on what happens with #23971. (Which I'm about to rebase.) A decision needs to be made on whether or not we go that direction or not. The accessibility team seems to really want it (and would have liked to see it in WP 5.5, though it's most likely too late for that), but I don't think I have the authority to merge it yet without design team approval. If that PR is merged, then this PR becomes less necessary, but it would also not look as awkward anymore. |
|
The accessibility team would definitely like to see this happen in WP 5.5; it would help a lot in mitigating some of the challenges with this part of the control. I do still think that increasing the visible focus rectangle on this is helpful - I have personally found that with the current design, I routinely click (using a mouse) on the wrong arrow when trying to move up, and end up moving blocks down instead of up. |
jasmussen
force-pushed
the
update/bigger-mover-focus
branch
from
60a13ce to
f951e6a
Compare
|
Thanks Joe. There was a bug with some overlapping that you may have encountered (fixed in #24349). I'll refresh this and try to address Zeb's feedback and wrap this one. |
|
I refreshed the PR, and made the focus style sit inside the frame, balancing it a bit:
|
jasmussen
force-pushed
the
update/bigger-mover-focus
branch
from
a3eeef5 to
2221bfe
Compare
|
Refreshed this one:
|
This PR makes the focus rectangle the same size as the button itself.
jasmussen
force-pushed
the
update/bigger-mover-focus
branch
from
2221bfe to
b5b7924
Compare
youknowriad
added
the
Backport to WP 6.7 Beta/RC
youknowriad
removed
the
Backport to WP 6.7 Beta/RC
This PR makes the focus rectangle the same size as the button itself. This is a purely visual change.
This addresses feedback from #21935 (comment).
Before:
After: