feat: a11y skip links

framework/core/js/src/forum/components/PageStructure.tsx

@@ -1,3 +1,4 @@
+import app from '../app';
 import Component from '../../common/Component';
 import type { ComponentAttrs } from '../../common/Component';
 import type Mithril from 'mithril';
@@ -70,6 +71,14 @@ export default class PageStructure<CustomAttrs extends PageStructureAttrs = Page
   sidebarItems(): ItemList<Mithril.Children> {
     const items = new ItemList<Mithril.Children>();
 
+    items.add(
+      'skipToMainContent',
+      <a href="#main-content" className="sr-only sr-only-focusable-custom">
+        {app.translator.trans('core.forum.index.skip_to_main_content')}
+      </a>,
+      200
+    );
+
     items.add('sidebar', (this.attrs.sidebar && this.attrs.sidebar()) || null, 100);
 
     return items;
@@ -88,6 +97,10 @@ export default class PageStructure<CustomAttrs extends PageStructureAttrs = Page
   }
 
   providedContent(): Mithril.Children {
-    return <div className="Page-content">{this.content}</div>;
+    return (
+      <div className="Page-content" id="main-content">
+        {this.content}
+      </div>
+    );
   }
 }

framework/core/less/common/scaffolding.less

@@ -199,3 +199,13 @@ blockquote ol:last-child {
 .text-colored {
   color: var(--color);
 }
+
+.sr-only-focusable-custom:focus {
+  clip: unset;
+  width: auto;
+  height: auto;
+  border-width: medium;
+  background: #000;
+  color: #fff;
+  z-index: 100;
+}

framework/core/locale/core.yml

@@ -496,6 +496,7 @@ core:
       meta_title_text: => core.ref.all_discussions
       refresh_tooltip: => core.ref.refresh
       start_discussion_button: => core.ref.start_a_discussion
+      skip_to_main_content: Skip to main content
       toggle_sidenav_dropdown_accessible_label: Toggle navigation dropdown menu
 
     # These translations are used by the sorting control above the discussion list.
@@ -911,6 +912,10 @@ core:
       next_page_button: => core.ref.next_page
       previous_page_button: => core.ref.previous_page
 
+    # Translations in this namespace are displayed by the basic HTML forum layout.
+    layout:
+      skip_to_content: Skip to content
+
     # Translations in this namespace are displayed by the Log Out confirmation interface.
     log_out:
       log_out_button: => core.ref.log_out

framework/core/views/frontend/admin.blade.php

@@ -5,6 +5,7 @@
     <div id="drawer" class="App-drawer">
 
         <header id="header" class="App-header">
+            <a href="#content" class="sr-only sr-only-focusable-custom">@lang('core.views.layout.skip_to_content')</a>
             <div id="header-navigation" class="Header-navigation"></div>
             <div class="container">
                 <div class="Header-title">

framework/core/views/frontend/forum.blade.php

@@ -7,6 +7,7 @@
     <div id="drawer" class="App-drawer">
 
         <header id="header" class="App-header">
+            <a href="#content" class="sr-only sr-only-focusable-custom">@lang('core.views.layout.skip_to_content')</a>
             <div id="header-navigation" class="Header-navigation"></div>
             <div class="container">
                 <div class="Header-title">