fix(a11y): dialog semantics, focus management, icon labels, html lang

src/static/css/pad/chat.css

@@ -76,11 +76,21 @@
   text-align: right;
   text-decoration: none;
   cursor: pointer;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  font-family: inherit;
+  line-height: 1;
 }
 #titlebar .stick-to-screen-btn {
   font-size: 10px;
   padding-top: 2px;
 }
+#titlebar .stick-to-screen-btn:focus-visible,
+#titlebar .hide-reduce-btn:focus-visible {
+  outline: 2px solid #0066cc;
+  outline-offset: 2px;
+}
 
 /* -- MESSAGES -- */
 #chattext {
@@ -121,10 +131,32 @@
 
 /* -- CHAT ICON -- */
 #chaticon {
+  /* #chaticon was converted from <span> to <button> for a11y; reset the
+     UA-default button chrome so the corner icon keeps its pre-conversion
+     shape. Deliberately do NOT reset `border` here — the 1px grey border
+     is supplied earlier (#chaticon {border:1px solid #ccc; border-bottom:
+     none}) and is part of the intended visual. Overriding with border:0
+     visibly broke the icon. See PR #7584 review feedback. */
+  appearance: none;
+  margin: 0;
   background-color: #fff;
   cursor: pointer;
   display: none;
   padding: 5px;
+  font: inherit;
+  color: inherit;
+}
+/* Scope: the inner .buttonicon span here is just a glyph holder. Its global
+   rule in icons.css applies `display: flex` which is fine for toolbar
+   <button class="buttonicon"> instances but breaks inline layout when
+   nested inside a button that's laying out label + glyph + counter on one
+   line. Keep the glyph inline for the chat-icon corner widget. */
+#chaticon .buttonicon {
+  display: inline;
+}
+#chaticon:focus-visible {
+  outline: 2px solid #0066cc;
+  outline-offset: -2px;
 }
 #chaticon a {
   text-decoration: none

src/static/css/pad/toolbar.css

@@ -98,6 +98,15 @@
 }
 
 .toolbar .show-more-icon-btn {
+  /* Reset user-agent <button> styling introduced when this was converted
+     from <span> for a11y. Without these the native button border/background
+     leak through and shift the glyph off-centre. */
+  appearance: none;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  color: inherit;
+  font: inherit;
   display:none;
   cursor: pointer;
   height: 39px;

src/static/js/chat.ts

@@ -263,6 +263,19 @@ exports.chat = (() => {
 
       // initial messages are loaded in pad.js' _afterHandshake
 
+      $('#chaticon').on('click', (e) => {
+        e.preventDefault();
+        this.show();
+      });
+      $('#titlecross').on('click', (e) => {
+        e.preventDefault();
+        this.hide();
+      });
+      $('#titlesticky').on('click', (e) => {
+        e.preventDefault();
+        this.stickToScreen(true);
+      });
+
       $('#chatcounter').text(0);
       $('#chatloadmessagesbutton').on('click', () => {
         const start = Math.max(this.historyPointer - 20, 0);

src/static/js/pad_editbar.ts

@@ -66,8 +66,22 @@ class ToolbarItem {
   bind(callback) {
     if (this.isButton()) {
       this.$el.on('click', (event) => {
+        // Stash the clicked button as the focus-restore target BEFORE we
+        // blur :focus — but only for dropdown-opening buttons. Non-dropdown
+        // commands (list toggles, bold, etc.) return focus to the ace editor
+        // and should not touch _lastTrigger (it would retain a stale
+        // reference and mess with later popup Esc-close focus handling).
+        const cmd = this.getCommand();
+        // @ts-ignore — padeditbar is the exported singleton defined below
+        const isDropdownTrigger = exports.padeditbar.dropdowns.indexOf(cmd) !== -1;
+        if (isDropdownTrigger) {
+          const trigger = (this.$el.find('button')[0] as HTMLElement | undefined) ||
+              (this.$el[0] as HTMLElement);
+          // @ts-ignore
+          if (trigger) exports.padeditbar._lastTrigger = trigger;
+        }
         $(':focus').trigger('blur');
-        callback(this.getCommand(), this);
+        callback(cmd, this);
         event.preventDefault();
       });
     } else if (this.isSelect()) {
@@ -128,6 +142,7 @@ exports.padeditbar = new class {
     this._editbarPosition = 0;
     this.commands = {};
     this.dropdowns = [];
+    this._lastTrigger = null;
   }
 
   init() {
@@ -145,7 +160,8 @@ exports.padeditbar = new class {
     });
 
     $('.show-more-icon-btn').on('click', () => {
-      $('.toolbar').toggleClass('full-icons');
+      const expanded = $('.toolbar').toggleClass('full-icons').hasClass('full-icons');
+      $('.show-more-icon-btn').attr('aria-expanded', String(expanded));
     });
     this.checkAllIconsAreDisplayedInToolbar();
     $(window).on('resize', _.debounce(() => this.checkAllIconsAreDisplayedInToolbar(), 100));
@@ -208,6 +224,19 @@ exports.padeditbar = new class {
       $('.nice-select').removeClass('open');
       $('.toolbar-popup').removeClass('popup-show');
 
+      // Remember the trigger so we can restore focus when the dialog closes.
+      // The Button click handler pre-sets `_lastTrigger` before calling blur(),
+      // because blur would make document.activeElement === <body>. For other
+      // paths (keyboard shortcut, programmatic open) fall back to whatever has
+      // focus right now.
+      const wasAnyOpen = $('.popup.popup-show').length > 0;
+      if (!wasAnyOpen && moduleName !== 'none' && !this._lastTrigger) {
+        const active = document.activeElement;
+        if (active && active !== document.body) this._lastTrigger = active;
+      }
+
+      let openedModule = null;
+
       // hide all modules and remove highlighting of all buttons
       if (moduleName === 'none') {
         for (const thisModuleName of this.dropdowns) {
@@ -236,9 +265,40 @@ exports.padeditbar = new class {
           } else if (thisModuleName === moduleName) {
             $(`li[data-key=${thisModuleName}] > a`).addClass('selected');
             module.addClass('popup-show');
+            openedModule = module;
           }
         }
       }
+
+      if (openedModule) {
+        // Move focus into the now-visible popup so keyboard users land inside the dialog.
+        // Skip if a command handler already placed focus inside this popup — the Embed
+        // command focuses #linkinput deliberately, which is different from the first
+        // tabbable element (a readonly checkbox) and should win.
+        // Fallback: if no focusable descendant exists (e.g. #users where the only
+        // input is disabled), focus the popup div itself so keydown events fire on
+        // the outer document instead of being trapped in the ace editor iframe.
+        const target = openedModule;
+        requestAnimationFrame(() => {
+          // If a command handler already placed focus inside the popup (e.g.
+          // the Embed command focuses #linkinput, showusers focuses
+          // #myusernameedit), honour that.
+          if (target[0].contains(document.activeElement)) return;
+          // Otherwise focus the popup container itself. This keeps keydown
+          // events on the outer document (so Esc always dismisses the popup,
+          // even when the popup has no directly-focusable descendants like
+          // #users does), and it works uniformly across browsers without
+          // getting tripped up by `visibility: hidden` nested popups.
+          // Keyboard users can Tab from here into the popup's controls.
+          if (!target.attr('tabindex')) target.attr('tabindex', '-1');
+          target[0].focus();
+        });
+      } else if ($('.popup.popup-show').length === 0 && this._lastTrigger) {
+        // All popups closed — restore focus to the element that opened the first one.
+        const trigger = this._lastTrigger;
+        this._lastTrigger = null;
+        if (document.body.contains(trigger)) trigger.focus();
+      }
     } catch (err) {
       cbErr = err || new Error(err);
     } finally {
@@ -289,6 +349,23 @@ exports.padeditbar = new class {
   }
 
   _bodyKeyEvent(evt) {
+    // Escape while any popup is open: close it. We don't restrict to
+    // `:focus inside popup` because some popups (e.g. #users) have no
+    // focusable content on open — focus stays in the ace editor iframe —
+    // but Esc should still dismiss them for keyboard users.
+    if (evt.keyCode === 27 && $('.popup.popup-show').length > 0) {
+      // `toggleDropDown('none')` intentionally skips the users popup so
+      // switching between other popups doesn't hide the user list. For
+      // Escape we want the users popup to close too (unless pinned).
+      const openPopup = $('.popup.popup-show').first();
+      if (openPopup.attr('id') === 'users' && !openPopup.hasClass('stickyUsers')) {
+        openPopup.removeClass('popup-show');
+        $('li[data-key=users] > a').removeClass('selected');
+      }
+      this.toggleDropDown('none');
+      evt.preventDefault();
+      return;
+    }
     // If the event is Alt F9 or Escape & we're already in the editbar menu
     // Send the users focus back to the pad
     if ((evt.keyCode === 120 && evt.altKey) || evt.keyCode === 27) {

src/static/js/vendors/html10n.ts

@@ -662,9 +662,15 @@ export class Html10n {
     if (node.children.length === 0 || prop != 'textContent') {
       // @ts-ignore
       node[prop] = str.str!
-      node.setAttribute("aria-label", str.str!); // Sets the aria-label
-      // The idea of the above is that we always have an aria value
-      // This might be a bit of an abrupt solution but let's see how it goes
+      // Populate aria-label from the translation so screen readers always get
+      // a localized accessible name, but do not overwrite an explicit
+      // aria-label that an author has already set. This lets templates use
+      // static English aria-labels for icon-only controls (export links,
+      // chat icon, close/pin buttons) without losing them at localization
+      // time. See PR #7584 review feedback.
+      if (!node.hasAttribute('aria-label')) {
+        node.setAttribute('aria-label', str.str!);
+      }
     } else {
       let children = node.childNodes,
         found = false

src/templates/index.html

@@ -1,5 +1,11 @@
+<%
+  var langs = require("ep_etherpad-lite/node/hooks/i18n").availableLangs;
+  var renderLang = (req && typeof req.acceptsLanguages === 'function'
+    && req.acceptsLanguages(Object.keys(langs))) || 'en';
+  var renderDir = (langs[renderLang] && langs[renderLang].direction === 'rtl') ? 'rtl' : 'ltr';
+%>
 <!doctype html>
-<html>
+<html lang="<%=renderLang%>" dir="<%=renderDir%>">
 
         <title><%=settings.title%></title>
         <meta charset="utf-8">