Size Change: +266 B (+0.01%)

Total Size: 1.94 MB

_{compressed-size-action}

Thanks for taking this for a spin. I had found a few things to fix and just pushed some updates. The most recent concern I had is the a11y of the toggle button. I didn't test with a screen reader but it's showing up like this when inspecting its accessibility properties in Chrome:

Its child content seems to be part of its accessible text and if screen readers read all that when just the button is focused then it's trouble. For one thing, the arrow keys dow't work when that button is focused. It could be made to work but then it brings up other questions. At the moment I'm thinking to move the separator back outside of the toggle button and just overlay it.

In addition to this PR, it would be great if we could incorporate your Wheel meta boxes plugin to make things even smoother. What do you think?

I'm in favor of it but do have some concerns. It's not an expected UX pattern and perhaps there could be cases where folks find it more frustrating than helpful because perhaps it's easily triggered unintentionally on their device. I'd almost wish to experiment with ways to make the feature more discoverable and optional through something like a more menu:

I'm not sure if you were suggesting we try adding the behavior in this PR.

I'd almost wish to experiment with ways to make the feature more discoverable and optional through something like a more menu:

That's interesting. After shipping this PR, we can work on further improvements to the metabox UI

Flaky tests detected in 85f6c22.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/17747359176
📝 Reported issues:

• [Flaky Test] ensures List View global shortcut works properly #51533 in /test/e2e/specs/editor/various/list-view.spec.js

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: stokesman <presstoke@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

For one thing, the arrow keys dow't work when that button is focused. It could be made to work but then it brings up other questions. At the moment I'm thinking to move the separator back outside of the toggle button and just overlay it.

Maybe I'm missing something, but is it possible to remove the separator and aggregate all mouse and keyboard actions into a button? It looks like this:

Maybe I'm missing something, but is it possible to remove the separator and aggregate all mouse and keyboard actions into a button?

Yes, it's possible. I imagine we'd want to keep the separator role and aria-valuenow they'd be applied to the sole button and we'd want to be sure that's okay with standards/a11y. Would it be important to try and replicate the visual draggable indicators – the resize cursor and the bar – or would a tooltip suffice?

In case it wasn't clear, my concern about the arrow keys not working on the toggle button was in relation to the way the a11y text of the button was falsely indicating that by including the text of the child separator. I moved the separator out of the button and that's no longer an issue. The arrow keys always worked with the separator focused. We can make them work from the toggle button as well without having to combine both buttons but I doubted it was helpful.

Thanks for the detailed explanation. If there is a concern about a11y, let's keep the current approach.