etherpad-lite/src/static
John McLear 7a1d9519f6
fix(a11y): skip-to-content link + hide line numbers from screen readers (#7255) (#7758)
* fix(a11y): skip-to-content link + hide line numbers from AT (#7255)

PR #7451 landed editor-region labelling but didn't address two
remaining screen-reader complaints from the original report:

1. No way to bypass the toolbar. Murphy noted that screen-reader
   users had to swipe through ~18 toolbar buttons to reach the
   editor (WCAG 2.4.1 Bypass Blocks). Adds a skip link as the
   first child of <body>, hidden offscreen until keyboard focus
   reveals it. Click handler in pad.ts routes through ace_focus
   so the inner contenteditable actually receives focus — a plain
   href="#editorcontainer" anchor only scrolls.

2. Line numbers read individually as "1, 2, 3, ...". The sidediv
   is visual scaffolding for sighted users; it carries no useful
   information for AT. Adds aria-hidden="true" on creation in
   ace.ts so screen readers skip it entirely.

Also fixes two issues found while implementing this:

- The Escape/Alt+F9 hint that PR #7451 added in the inner iframe's
  body was being wiped by Ace2Inner.init() (line splices manage
  body children). Move it to the inner <head> — aria-describedby
  resolves by ID anywhere in the same document. Localize the text
  via html10n.get('pad.editor.keyboardHint').

- Skip link and keyboard hint text are both routed through new
  locale keys (pad.editor.skipToContent, pad.editor.keyboardHint)
  so they translate via the existing html10n pipeline.

Adds two Playwright assertions for the new behavior.

Refs #7255

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* fix(a11y): remove editor auto-focus so skip link is Tab-reachable

PR #7758 added a skip-to-content link as the first body child, but on
local testing it was unreachable via Tab from the URL bar — the
standard WCAG 2.4.1 entry path. Root cause: postAceInit calls
padeditor.ace.focus() on load, which moves focus into the editor
iframe. Tab inside the editor inserts an indent character (handled by
ace2_inner's key handler) rather than bubbling to the parent page, so
the skip link sat in the DOM but no user could ever reach it.

Drop the load-time auto-focus. Initial focus is now on <body>, and the
first Tab focuses #skip-to-content as expected. Users now click or Tab
into the editor; existing Escape → toolbar exit (PR #7451) and the
new Enter-on-skip-link path both still work.

Cost: the long-standing "start typing immediately on a fresh pad" UX
goes away — one extra click to start editing. This matches the modern
accessible default for rich text editors (Slack, Discord, Google Docs
all require an explicit focus before accepting input) and removes a
keyboard trap that violated WCAG 2.1.2 even after PR #7451's Escape
escape hatch.

Adds a Playwright assertion that fresh-page Tab focuses the skip link.

Refs #7255

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* test: focus the editor before typing in three specs

These three Playwright tests started failing after the autofocus removal
in ef95498 because they reached for keyboard input without first
clicking into the editor:

- enter.spec.ts: `lastLine.focus()` is a no-op on a <div> (not natively
  focusable), so Enter went to <body> instead of the contenteditable.
  Replaced with `.click()`.
- indentation.spec.ts: `selectText()` triple-clicks but the focus event
  didn't reliably reach the inner contenteditable in CI; added an
  explicit `.click()` first.
- collab_client.spec.ts: each test opens its own browser contexts via
  goToPad, which does not click into the editor; selectText() in
  replaceLineText was the only thing landing focus, and that proved
  flaky. Added `body.click()` at the top of replaceLineText.

All three previously relied on the page-load auto-focus that ef95498
removed. The new pattern (click first, then type) is what writeToPad
and clearPadContent already do — these specs now match.

Refs #7255

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* fix(a11y): move skip link above eejs body block so plugins can't outrank it

The WITH_PLUGINS Playwright suite caught a regression in the previous
commit: ep_set_title_on_pad's eejsBlock_body hook prepends a
<div id='pad_title'> that contains a focusable <a href="">Loading...</a>
into the body block, putting that anchor ahead of #skip-to-content in
DOM tab order. First Tab landed on the title link instead of the skip
link, breaking the WCAG 2.4.1 entry path.

Moving the skip link before <% e.begin_block("body"); %> takes it out
of the plugin-modifiable region — eejsBlock_body hooks can prepend to
the block content but cannot reach above the block's own start tag.
Verified locally with ep_set_title_on_pad installed:

  On load:     BODY
  After Tab 1: A#skip-to-content
  After Tab 2: A (pad_title's Loading link — plugin content)

Refs #7255

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-15 19:23:52 +01:00
..
css fix(a11y): skip-to-content link + hide line numbers from screen readers (#7255) (#7758) 2026-05-15 19:23:52 +01:00
font ui: Add a home icon (#4076) 2020-06-03 10:56:24 +01:00
img editor: UI polish - Etherpad brand as reconnect & loading animation 2021-02-21 13:24:51 +00:00
js fix(a11y): skip-to-content link + hide line numbers from screen readers (#7255) (#7758) 2026-05-15 19:23:52 +01:00
skins feat(gdpr): configurable privacy banner (PR4 of #6701) (#7549) 2026-05-03 13:59:38 +08:00
empty.html ace.js: Don't use srcdoc when creating iframes (see #4975) 2021-07-30 03:51:57 -04:00
favicon.ico Change favicon to be closer to new style 2020-04-19 18:20:21 +02:00
robots.txt staleCode: Remove unnecessary robots.txt entry (#4113) 2020-06-14 20:49:13 +01:00
tests.html /static/tests.html: Fix jquery.js path 2021-02-25 10:14:48 +00:00