Accessibility: Add skip link & landmark regions to settings (#39129)

app/javascript/styles/mastodon/admin.scss

@@ -136,6 +136,11 @@ $content-width: 840px;
           transition: all 100ms linear;
           transition-property: color, background-color;
         }
+
+        &:focus-visible {
+          outline: var(--outline-focus-default);
+          outline-offset: -2px;
+        }
       }
 
       ul {
@@ -1887,6 +1892,28 @@ a.sparkline {
   }
 }
 
+.navigation-skip-link {
+  position: fixed;
+  z-index: 100;
+  margin: 10px;
+  padding: 10px 16px;
+  border-radius: 10px;
+  font-size: 15px;
+  color: var(--color-text-primary);
+  background: var(--color-bg-primary);
+  box-shadow: var(--dropdown-shadow);
+
+  /* Hide visually when not focused */
+  &:not(:focus-within) {
+    width: 1px;
+    height: 1px;
+    margin: 0;
+    padding: 0;
+    clip-path: inset(50%);
+    overflow: hidden;
+  }
+}
+
 .section-skip-link {
   float: right;
 

app/views/layouts/admin.html.haml

@@ -6,8 +6,9 @@
 - content_for :body_classes, 'admin'
 
 - content_for :content do
+  %a.navigation-skip-link{ href: '#content' }= t('admin.skip_to_content')
   .admin-wrapper
-    .sidebar-wrapper
+    %nav.sidebar-wrapper
       .sidebar-wrapper__inner
         .sidebar
           = link_to root_path do
@@ -24,7 +25,7 @@
 
           = render_navigation
 
-    .content-wrapper
+    %main.content-wrapper#content
       .content
         .content__heading
           - if content_for?(:heading)

config/locales/en.yml

@@ -979,6 +979,7 @@ en:
     site_uploads:
       delete: Delete uploaded file
       destroyed_msg: Site upload successfully deleted!
+    skip_to_content: Skip to content
     software_updates:
       critical_update: Critical — please update quickly
       description: It is recommended to keep your Mastodon installation up to date to benefit from the latest fixes and features. Moreover, it is sometimes critical to update Mastodon in a timely manner to avoid security issues. For these reasons, Mastodon checks for updates every 30 minutes, and will notify you according to your email notification preferences.