Skip to content

Label the footer's tray buttons with their names - #700

Merged
ryanwelcher merged 4 commits into
trunkfrom
ryanwelcher/add-labels-to-the-icons-on-the-bottom
Oct 20, 2026
Merged

Label the footer's tray buttons with their names#700
ryanwelcher merged 4 commits into
trunkfrom
ryanwelcher/add-labels-to-the-icons-on-the-bottom

Conversation

@ryanwelcher

@ryanwelcher ryanwelcher commented Oct 19, 2026 •
edited
Loading

Copy link
Copy Markdown
Collaborator

Why

The Terminal, Logs and Email buttons in the footer were icons only, and a newcomer had to hover or guess to know which was which (#691). There is room for their names.

What changes

  • Each tray button shows its tray's name beside its icon.
  • The visible name is now the button's only accessible name. The old "Toggle Terminal" style label was translated separately and could disagree with the visible text (in Czech, "Záznamy protokolu" was announced as "Přepnout protokoly"). The button's pressed state already says it is a toggle. The toggle strings are gone from tray.cjs.
  • The footer stays one line. When its content is narrower than 620px (a window under 1024px with the sites list open), the names are clipped for the eye and the buttons show their icons, keeping their names for screen readers. This is the same clipping the site header already uses.

Deliberately not in it: a tooltip for the icon-only narrow state.

How to test this

Platforms: any. Build: the current head.

The tray journey (tray.spec.js, "the tray holds one thing at a time…") now checks that each button shows its name at the default width, and that at the minimum width the names are clipped, the buttons stay in the window and the footer keeps its height. Run it from the repository root with npm run test:e2e:hidden -- tray.spec.js. The pseudo-locale journey in i18n.spec.js now scans a site window's footer for untranslated text.

What a journey cannot judge is how it looks:

Starting state: any site open, sites list open, window at its default size.

  1. Look at the footer. Expected: "Terminal", "Logs" and "Email" next to their icons, on one line with "Give feedback" and the settings cog.
  2. Press Logs. Expected: the Logs tray opens and the button looks pressed. If debug.log has unseen lines, the count badge sits on the button's top-right corner and does not cover the word "Logs".
  3. Drag the window down to its smallest width. Expected: the three buttons become icons only. The footer does not grow taller, and nothing wraps onto a second line.
  4. Optional: relaunch with --lang=cs and repeat steps 1 and 3. Expected: "Záznamy protokolu" fits at the default width, and the footer still stays one line at the smallest.

What must not have happened: "Give feedback" wrapping onto two lines, or the footer growing taller and taking height from the tray.

Risks and limitations

  • The 620px cut-off is fixed, not measured per language. It covers English, Czech and the pseudo-locale. A language with much longer names could still need more width, and in that case the footer would overflow sideways instead of wrapping.
  • In the narrow, icon-only state there is no tooltip. The old icon-only buttons had one.
  • The removed "Toggle …" strings stay in src/languages/*.json until the next npm run i18n:download.

Related

Fixes #691

Design decisions and alternatives considered
  • Kept aria-label="Toggle …" (first commit). Rejected after review because of the Czech mismatch above. That fails WCAG 2.5.3 Label in Name for voice-control users.
  • white-space: nowrap on the tray buttons only. Measured at 800px: this pushed the squeeze onto "Give feedback", which wrapped even in English. In Czech it broke into a column of single syllables.
  • The cut-off value. The container query measures the footer's content box, 48px narrower than the footer. With every name showing, the content needs about 431px in English, 572px in the pseudo-locale and 605px in Czech. At 1024px wide with the sites list open (the smallest screen CI runs on), the content box is 656px on macOS and 640px on Windows, whose frame leaves a 1008px page. So the cut-off needs to be at least 605 and below 640, and 620px sits between them. Earlier versions used 680px (measured against the footer's outer width) and then 640px (which equals Windows' content box, and the rule includes its boundary); each hid the labels on CI's 1024px screen. The journey now sets the window to 1024px before asserting the labels show.
Review outcome (required, see AGENTS.md)

4 [fix here] · 1 [follow-up]. All five fixed, the follow-up included.

  • Fixed: the visible name and the spoken name disagreed in Czech, so the visible name is now the only name. The footer wrapped at the smallest width, so the names now hide when the footer's content is 620px or less and the footer has nowrap. No test checked that a name was visible, so the tray journey now asserts it at both widths. The CSS comment about the Logs badge assumed an icon at the button's right edge, and now describes the label.
  • Fixed (was follow-up): the pseudo-locale scan never read a site window's footer. It does now.
  • Review: completed. A separate-context Explore subagent reviewed against .github/instructions/code-review.instructions.md. Head a39ad02 / base origin/trunk 819575a. npm run lint clean, npm test 2109/2111 pass, 0 fail.
  • Since review: a39ad02 → HEAD is the fixes for the findings above, plus two cut-off corrections after CI failed the tray journey (69972b7 on both platforms, e7fcd3a on Windows only). Not re-reviewed by a fresh agent. Lint is clean, npm test passes, and the tray and i18n journeys pass locally on macOS.
Screenshots or recording

Before: three icons with tooltips. After, measured at 800px wide (sites list open) and 1100px wide, in English, Czech and the pseudo-locale: the footer is 49px tall at every combination. Screenshots to be added in a comment.

🤖 Generated with Claude Code

@ryanwelcher
Label the footer's tray buttons with the tray's name
a39ad02 
The Terminal, Logs and Email buttons were icons alone, which a newcomer
had to hover or guess at. Each now shows its name beside its icon. The
accessible name stays "Toggle …", which contains the visible word.

Fixes #691
@ryanwelcher
Name the tray buttons by their label, and keep the footer one line
69972b7 
The visible label and a separately translated "Toggle …" name could
disagree, as they do in Czech, so the label is now the button's only name;
its pressed state says it is a toggle. Where the footer is too narrow for
every label, at the window's smallest with the sites list open or in a
longer language, the labels are clipped for the eye and the buttons are
their icons, so the footer never wraps and takes height from the tray.

The tray journey checks both widths, and the pseudo-locale scan now reads
a site window's footer.
@coderabbitai

coderabbitai Bot commented Oct 19, 2026 •
edited
Loading

Copy link
Copy Markdown

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration
  • Configuration used: Repository: WordPress/contributor-toolkit/.coderabbit.yaml
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: c53ba537-6390-464f-a469-f804ada62c7e

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@ryanwelcher
ryanwelcher requested a review from zaerl October 19, 2026 16:14
@ryanwelcher
Show the tray labels on a 1024px screen with the sites list open
e7fcd3a 
The footer's container query measures its content box, which is 48px
narrower than the footer. At 1024px with the sites list open that is
656px, under the 680px cut-off, so the labels were hidden on CI's screen.
The cut-off is now 640px, which still fits Czech (about 605px), and the
tray journey sets the window to 1024px before asserting the labels show.
@ryanwelcher
Show the tray labels on a 1024px Windows screen too
619ba2e 
A 1024px window on Windows has a 1008px page once its frame is taken off,
which leaves the footer exactly 640px of content: on the cut-off, so the
labels were hidden. The cut-off is now 620px, which still fits Czech.
zaerl
zaerl approved these changes Oct 20, 2026
View reviewed changes

@zaerl zaerl left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image

🚢

@ryanwelcher
ryanwelcher merged commit e43e9c8 into trunk Oct 20, 2026
15 checks passed
@ryanwelcher
ryanwelcher deleted the ryanwelcher/add-labels-to-the-icons-on-the-bottom branch October 20, 2026 13:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer
@zaerl zaerl zaerl approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Add labels to the icons on the bottom

2 participants

@ryanwelcher @zaerl