Repository navigation
Fix: Navigation Overlay Close announces the author's own text - #82227
Jiwoon-Kim wants to merge 2 commits into
Conversation
With the display mode set to icon, the button's label was always the string "Close", whatever the author had written. Someone who labelled it "Dismiss menu" got that wording on screen in the other modes and lost it in this one -- the only mode where the label is the button's entire accessible name, because there is nothing else to read. The text was already computed one line above, with the same default applied when the author has written none. This looks like something left behind rather than intended: `text` used to be a rich-text attribute defaulting to "Close", which made the fixed label and the authored one the same string. It is now free text with no default, and the label stopped following it. The editor preview had the same fixed string, with the value it should use already in scope, so it changes with it. Markup is stripped from the label, since an attribute is not a place tags can live, matching how the Search block names its own icon-only button from its button text.
|
👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @Jiwoon-Kim! In case you missed it, we'd love to have you join us in our Slack community. If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information. |
|
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 If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Warning: Type of PR label mismatch To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.
Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task. |
jorgefilipecosta
left a comment
There was a problem hiding this comment.
The change looks good 👍
What?
With Display Mode set to
icon, the Navigation Overlay Close button is alwaysannounced as "Close", whatever the author wrote in its text field.
The authored text is computed on the first line and the label ignores it.
Why?
iconis the default display mode, and it is the one mode where the label is thebutton's entire accessible name — there is no visible text to fall back on. So an
author who writes "Dismiss menu" sees it in the
textandbothmodes and losesit in the mode where it matters most.
This looks like something left behind rather than a decision. When the block was
added,
textwas a rich-text attribute with"default": "Close", which made thefixed label and the authored one the same string.
textis now a plain string withno default, and the label stopped following it.
The Search block already resolves the same situation the other way, naming its
icon-only button from the text the author gave it:
How?
The label uses the text that was already computed, with markup stripped, since an
attribute is not a place tags can live. The default is untouched: an author who has
written nothing still gets "Close".
The editor preview carried the same fixed string with the value it should use
already in scope, so it changes with it and the two stay in agreement.
Testing Instructions
block inside it.
Text, and change the text to "Dismiss menu".Icon.aria-label="Dismiss menu".TextandBothmodes there is noaria-label, because the visible text isalready the button's name and a label would repeat it.
phpunit/blocks/render-block-navigation-overlay-close-test.phpcovers the fourcases: authored text in icon mode, the empty fallback, markup stripped from the
label, and no label when the text is visible.
Both changed files pass
phpcs --standard=phpcs.xml.dist.Screenshots or screencast
Rendered with
displayMode: "icon"andtext: "Dismiss menu":A note on scope
This is the accessibility half of one small thing, and I have deliberately not
touched the rest of it here.
While looking into it I noticed that Core spells "show an icon, text, or both" four
different ways across blocks that all render an action control:
displayMode: icon|text|bothhere,buttonUseIconin Search,hasIcon+iconinNavigation, and
showIcon+iconPositionin Accordion — with the lightboxcontrols having no attribute at all. Their
supportsdiffer too: this block hascolor,spacingandtypographybut noborder,dimensionsorshadow, so atheme cannot give an icon-only control a shape or a container size.
That is a larger conversation, and it overlaps with
#79057 on Button icons and
with the Icon Registry work in
#81225 /
#82062. I would rather raise it
separately than widen this fix, which stands on its own.