A11y improvements on login & settings pages (#38188)

app/helpers/branding_helper.rb

@@ -11,11 +11,14 @@ module BrandingHelper
   end
 
   def _logo_as_symbol_wordmark
-    content_tag(:svg, tag.use(href: '#logo-symbol-wordmark'), viewBox: '0 0 261 66', class: 'logo logo--wordmark')
+    tag.svg(viewBox: '0 0 261 66', class: 'logo logo--wordmark') do
+      tag.title('Mastodon') +
+        tag.use(href: '#logo-symbol-wordmark')
+    end
   end
 
   def _logo_as_symbol_icon
-    content_tag(:svg, tag.use(href: '#logo-symbol-icon'), viewBox: '0 0 79 79', class: 'logo logo--icon')
+    tag.svg(tag.use(href: '#logo-symbol-icon'), viewBox: '0 0 79 79', class: 'logo logo--icon')
   end
 
   def render_logo

app/javascript/styles/mastodon/containers.scss

@@ -13,28 +13,28 @@
 .logo-container {
   margin: 50px auto;
 
-  h1 {
+  a {
     display: flex;
     justify-content: center;
     align-items: center;
+    width: min-content;
+    margin: 0 auto;
+    padding: 12px 16px;
+    color: var(--color-text-primary);
+    text-decoration: none;
+    outline: 0;
+    line-height: 32px;
+    font-weight: 500;
+    font-size: 14px;
 
-    .logo {
+    &:focus-visible {
-      height: 42px;
+      outline: var(--outline-focus-default);
-      margin-inline-end: 10px;
     }
+  }
 
-    a {
+  .logo {
-      display: flex;
+    height: 42px;
-      justify-content: center;
+    margin-inline-end: 10px;
-      align-items: center;
-      color: var(--color-text-primary);
-      text-decoration: none;
-      outline: 0;
-      padding: 12px 16px;
-      line-height: 32px;
-      font-weight: 500;
-      font-size: 14px;
-    }
   }
 }
 

app/javascript/styles/mastodon/forms.scss

@@ -77,7 +77,6 @@ code {
 
   .input {
     margin-bottom: 16px;
-    overflow: hidden;
 
     &:last-child {
       margin-bottom: 0;
@@ -471,13 +470,19 @@ code {
     }
   }
 
-  .input.radio_buttons .radio label {
+  .input.radio_buttons .radio {
-    margin-bottom: 5px;
+    label {
-    font-family: inherit;
+      margin-bottom: 5px;
-    font-size: 14px;
+      font-family: inherit;
-    color: var(--color-text-primary);
+      font-size: 14px;
-    display: block;
+      color: var(--color-text-primary);
-    width: auto;
+      display: block;
+      width: auto;
+    }
+
+    input[type='radio'] {
+      accent-color: var(--color-text-brand);
+    }
   }
 
   .check_boxes {
@@ -503,6 +508,12 @@ code {
     }
   }
 
+  label.checkbox {
+    input[type='checkbox'] {
+      accent-color: var(--color-text-brand);
+    }
+  }
+
   .input.static .label_input__wrapper {
     font-size: 14px;
     padding: 10px;
@@ -523,13 +534,20 @@ code {
     color: var(--color-text-primary);
     display: block;
     width: 100%;
-    outline: 0;
     font-family: inherit;
     resize: vertical;
     background: var(--color-bg-secondary);
     border: 1px solid var(--color-border-primary);
     border-radius: 4px;
     padding: 10px 16px;
+    outline: var(--outline-focus-default);
+    outline-offset: -2px;
+    outline-color: transparent;
+    transition: outline-color 0.15s ease-out;
+
+    &:focus {
+      outline: var(--outline-focus-default);
+    }
 
     &:invalid {
       box-shadow: none;
@@ -613,6 +631,11 @@ code {
       margin-inline-end: 0;
     }
 
+    &:focus-visible {
+      outline: var(--outline-focus-default);
+      outline-offset: 2px;
+    }
+
     &:active,
     &:focus,
     &:hover {
@@ -653,6 +676,11 @@ code {
     padding-inline-end: 30px;
     height: 41px;
 
+    &:focus-visible {
+      outline: var(--outline-focus-default);
+      outline-offset: 2px;
+    }
+
     @media screen and (width <= 600px) {
       font-size: 16px;
     }

app/views/auth/sessions/new.html.haml

@@ -12,6 +12,7 @@
       - if use_seamless_external_login?
         = f.input :email,
                   autofocus: true,
+                  required: true,
                   hint: false,
                   input_html: { 'aria-label': t('simple_form.labels.defaults.username_or_email') },
                   label: t('simple_form.labels.defaults.username_or_email'),
@@ -19,12 +20,14 @@
       - else
         = f.input :email,
                   autofocus: true,
+                  required: true,
                   hint: false,
                   input_html: { 'aria-label': t('simple_form.labels.defaults.email') },
                   label: t('simple_form.labels.defaults.email'),
                   wrapper: :with_label
     .fields-group
       = f.input :password,
+                required: true,
                 hint: false,
                 input_html: { 'aria-label': t('simple_form.labels.defaults.password'), autocomplete: 'current-password' },
                 label: t('simple_form.labels.defaults.password'),

app/views/layouts/auth.html.haml

@@ -4,12 +4,11 @@
 - content_for :content do
   .container-alt
     .logo-container
-      %h1
+      - if within_authorization_flow?
-        - if within_authorization_flow?
+        = logo_as_symbol(:wordmark)
+      - else
+        = link_to root_path do
           = logo_as_symbol(:wordmark)
-        - else
-          = link_to root_path do
-            = logo_as_symbol(:wordmark)
 
     .form-container
       = render 'flashes'