diff --git a/app/helpers/branding_helper.rb b/app/helpers/branding_helper.rb index 8201f36e3c..ef6d33ae5c 100644 --- a/app/helpers/branding_helper.rb +++ b/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 diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss index 57c62a29e3..5e199273e0 100644 --- a/app/javascript/styles/mastodon/containers.scss +++ b/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 { - height: 42px; - margin-inline-end: 10px; + &:focus-visible { + outline: var(--outline-focus-default); } + } - a { - display: flex; - justify-content: center; - 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; - } + .logo { + height: 42px; + margin-inline-end: 10px; } } diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss index 3305d1c3cd..c25bdfc820 100644 --- a/app/javascript/styles/mastodon/forms.scss +++ b/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 { - margin-bottom: 5px; - font-family: inherit; - font-size: 14px; - color: var(--color-text-primary); - display: block; - width: auto; + .input.radio_buttons .radio { + label { + margin-bottom: 5px; + font-family: inherit; + font-size: 14px; + color: var(--color-text-primary); + 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; } diff --git a/app/views/auth/sessions/new.html.haml b/app/views/auth/sessions/new.html.haml index 67b958d38c..91505820d4 100644 --- a/app/views/auth/sessions/new.html.haml +++ b/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'), diff --git a/app/views/layouts/auth.html.haml b/app/views/layouts/auth.html.haml index bdbcc84e1f..c989e6ccd8 100644 --- a/app/views/layouts/auth.html.haml +++ b/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'