Mirrors/etherpad-lite
1
0
Fork 0
mirror of https://github.com/ether/etherpad-lite.git synced 2026-07-17 16:47:05 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse source 
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>
This commit is contained in:
John McLear 2026-05-15 18:27:56 +01:00
parent e65e86fd94
commit c4ea12d445
1 changed files with 7 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/templates/pad.html
View file

@ -65,14 +65,18 @@
<link rel="localizations" type="application/l10n+json" href="../locales.json" />
</head>
<body>
<% e.begin_block("body"); %>
<!-- WCAG 2.4.1 — bypass the toolbar and jump straight to the editor.
Visible only when keyboard-focused; click handler in pad.ts routes
focus into the editor iframe rather than just scrolling. -->
focus into the editor iframe rather than just scrolling.
MUST live outside the `body` eejs block: plugins like
ep_set_title_on_pad use eejsBlock_body to prepend a focusable
title bar, which would otherwise come before this link in DOM
order and steal the first Tab. -->
<a id="skip-to-content" class="skip-link" href="#editorcontainer"
data-l10n-id="pad.editor.skipToContent">Skip to editor</a>
<% e.begin_block("body"); %>
<!----------------------------->
<!--------- TOOLBAR ----------->
<!----------------------------->