BoxControl: Fix aria-valuetext value

[t-hamano]

Related to #67688

What?

This PR applies the appropriate label to aria-valuetext when the BoxControl component has presets, allowing screen readers to properly announce the preset values.

Why?

The aria-valuenow attribute is used in a range widget to communicate the current value, and the aria-valuetext attribute is used to provide more human-readable text.

The current implementation references the label field, which is always an empty string, so aria-valuetext is effectively non-functional.

How?

From my understanding, the reason the label field is empty is because we do not want to display a visual mark label, so the label field should be left empty. Instead, apply the tooltip text to aria-valuetext as well, so that the text read by screen readers matches the visual tooltip text.

This should match the implementation of the SpacingSizesControl component.

Testing Instructions

• Run npm run storybook:dev
• Access http://localhost:50240/?path=/story/components-boxcontrol--control-with-presets
• Change the value.
• Your screen reader should now read out the actual preset label.
• Confirm the aria-valuetext attribute via your browser developer tools.

Screenshots or screencast

3ade381fd967ce06444a3114e4b32a39.mp4

[github-actions]

Flaky tests detected in 8c0bc3d.
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/12545086036
📝 Reported issues:

• [Flaky Test] Navigates the items list via UP/DOWN arrow keys #64334 in /test/e2e/specs/site-editor/dataviews-list-layout-keyboard.spec.js
• [Flaky Test] submenu click on the arrow interactions #61884 in /test/e2e/specs/editor/blocks/navigation-frontend-interactivity.spec.js

[github-actions]

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: t-hamano <[email protected]>
Co-authored-by: tyxla <[email protected]>

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

[tyxla]

LGTM, thanks for the fix 👍 🚀

Before	After