Notes: make the collapsed note state accessible to screen reader and keyboard users

[adamsilverstein]

What?

Fixes #81458

Makes the collapsed state of a long note behave predictably for screen reader and keyboard users, following up on @joedolson's feedback in #72822 (comment).

Why?

The "Show more" / "Show less" collapse added in #77446 used CSS line-clamp, and that turned up three separate problems:

• line-clamp hides text visually but leaves it in the accessibility tree. Dumping Chromium's tree over a clamped container returned 1418 characters against 1418 characters of DOM text, so nothing was actually hidden - a screen reader reads the whole note and then meets a toggle that changes nothing it can perceive. How far a given reader gets varies, which is the unpredictability @joedolson saw in NVDA.
• The toggle had no aria-expanded and no aria-controls, so its state was never announced.
• Notes allow links through comment kses, and a link clipped by the collapse stayed in the tab order. In a reduced case the link laid out 1131px below the clamp boundary, document.elementFromPoint at its center returned null, and one Tab press moved focus to it anyway - which then set scrollTop: 1152 on the overflow: hidden container. Focus landed on invisible content and the note quietly scrolled to an arbitrary middle slice while the button still read "Show more". That part reproduces with no assistive tech at all.

How?

Keeps the collapse as a visual affordance, which is what it always was, but makes it honest about that and stops it trapping focus.

• Swaps line-clamp for a max-height clamp. calc(3 * 1lh) lands exactly on three line boxes so there is no half-cut line, with a 4.5em fallback for browsers without the lh unit. This also drops the dependency on a property whose accessibility-tree exposure is still settling.
• Adds aria-expanded and aria-controls to the toggle, with a useInstanceId id on the note content it controls.
• Expands the note on focusin within collapsed content, so focus never rests on something clipped out of view.
• Zeroes margin-top on the first paragraph, mirroring the existing p:last-child rule, so the clamp height lines up with three lines in both states.

One tradeoff worth flagging: -webkit-line-clamp appended an ellipsis at the cut and max-height does not. Since the "Show more" button sits directly beneath the clamp, the affordance is still explicit - but that is a visible change, and reverting to an ellipsis would mean bringing line-clamp back.

Testing shows the AX tree was only checked in Chromium. Gecko and WebKit native trees are not reachable from Playwright, so the JAWS / VoiceOver / Orca passes @joedolson asked for still need someone with those readers.

Testing Instructions

1. Open a post, add a paragraph block, and add a note long enough to run past three lines.
2. The note collapses to three lines with a "Show more" button. Click it and confirm the note expands and the button becomes "Show less".
3. Inspect the toggle and confirm it carries aria-expanded and an aria-controls pointing at the note content element.

New e2e coverage:

npm run test:e2e -- test/e2e/specs/editor/various/block-notes.spec.js -g "Collapsing long notes"

Testing Instructions for Keyboard

1. Add a long note that ends with a bare URL, eg. https://wordpress.org, so the rendered note contains a link below the collapse boundary.
2. Reload so the note renders collapsed.
3. Tab through the note. Focus reaching the clipped link now expands the note instead of leaving focus on text scrolled out of view.
4. On trunk the same steps move focus to an invisible link and scroll the collapsed note to a middle portion of its text while the button still reads "Show more".

Screenshots or screencast

Collapsed	Expanded

Use of AI Tools

Claude Code did the digging and the typing here, I did the asking. I will review and test.

[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: adamsilverstein <adamsilverstein@git.wordpress.org>

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

[github-actions]

Size Change: +434 B (+0.01%)

Total Size: 7.71 MB

📦 View Changed

Filename	Size	Change
build/scripts/editor/index.min.js	530 kB	+74 B (+0.01%)
build/styles/editor/style-rtl.css	31.9 kB	+188 B (+0.59%)
build/styles/editor/style-rtl.min.css	27 kB	-8 B (-0.03%)
build/styles/editor/style.css	32 kB	+188 B (+0.59%)
build/styles/editor/style.min.css	27 kB	-8 B (-0.03%)

_{compressed-size-action}