From aa3d6cc3ffa4ef2dbf4427ef3de83ceb859754f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= Date: Sun, 7 May 2023 11:59:58 +0200 Subject: [PATCH] a11y: switch top links to ul/li (#40926) --- static/alpes-maritimes-2022/_custom.scss | 19 +++++--- static/amiens-metropole/_header.scss | 29 ++++++------ static/armentieres/_header.scss | 4 +- static/bethune-bruay/_custom.scss | 2 +- static/cinor-2021/_custom.scss | 8 +--- static/cinor-2021/_vars.scss | 1 + static/clermont-ici/_custom.scss | 2 +- .../clisson-sevre-et-maine-agglo/_custom.scss | 2 +- static/grandlyon-glc/_custom.scss | 2 +- static/haute-garonne-cd31/_custom.scss | 6 +-- static/includes/_user-info.scss | 11 +++++ static/lille-metropole-2022/_custom.scss | 9 +++- static/loire-atlantique-cd44/_custom.scss | 2 +- static/metz-metropole-2019/_custom.scss | 13 +++-- static/saone-et-loire-cd71-2019/_custom.scss | 2 +- static/toulouse-2022/_custom.scss | 2 +- static/villeneuve-dascq/_custom.scss | 33 ++++++++----- static/villeneuve-dascq/_vars.scss | 2 + templates/includes/user-info.html | 47 ++++++++++--------- .../includes/user-info.html | 42 +++++++++-------- .../grandlyon-glc/includes/user-info.html | 6 +-- .../includes/user-info.html | 4 +- .../includes/user-info.html | 13 ++--- .../toulouse-2022/includes/user-info.html | 13 ++--- .../villeneuve-dascq/includes/user-info.html | 38 +++++++++------ 25 files changed, 181 insertions(+), 131 deletions(-) diff --git a/static/alpes-maritimes-2022/_custom.scss b/static/alpes-maritimes-2022/_custom.scss index ca97bf1a..f5b4603c 100644 --- a/static/alpes-maritimes-2022/_custom.scss +++ b/static/alpes-maritimes-2022/_custom.scss @@ -250,9 +250,9 @@ h3, .h3 { } a:not(.login-link) { @extend %nav-chevron-link; - &:last-child { - border-bottom: none; - } + } + a.logout { + border-bottom: none; } a.login-link, .toplinks--togglable-btn { @@ -265,22 +265,27 @@ h3, .h3 { } } } - .logged-in { - display: block; - @include floating-nav; + .toplinks--togglable-menu { z-index: 100; top: 100%; @media ($max-mobile-viewport) { right: 0; } + @include floating-nav; display: none; + margin: 0; + padding: 0; + list-style: none; + .toplinks--list-item { + display: block; + } } .toplinks--panel-mask { @include mask(-1); background-color: transparent; } .toplinks--togglable-btn.toggled { - + .logged-in, + + .toplinks--togglable-menu, ~ .toplinks--panel-mask { display: block; } diff --git a/static/amiens-metropole/_header.scss b/static/amiens-metropole/_header.scss index e4319d42..b2c242fe 100644 --- a/static/amiens-metropole/_header.scss +++ b/static/amiens-metropole/_header.scss @@ -79,8 +79,7 @@ $header-content-margin: 5px; padding: 0; box-shadow: unset; - .logged-in, - .login { + .toplinks--list { display: flex; justify-content: center; align-items: center; @@ -100,20 +99,22 @@ $header-content-margin: 5px; top: 25px; } - a { + li { flex: 1 1 50%; - color: white; - font-weight: bold; - height: $header-height; + } + } - &::before { - content: ' '; - font-family: 'FontAwesome'; - font-size: 2.5em; - display: block; - padding-top: 15px; - font-weight: lighter; - } + a { + color: white; + font-weight: bold; + height: $header-height; + &::before { + content: ' '; + font-family: 'FontAwesome'; + font-size: 2.5em; + display: block; + padding-top: 15px; + font-weight: lighter; } } diff --git a/static/armentieres/_header.scss b/static/armentieres/_header.scss index 693a4c0d..b342e6ff 100644 --- a/static/armentieres/_header.scss +++ b/static/armentieres/_header.scss @@ -173,7 +173,7 @@ div#toplinks { justify-content: center; } - .logged-in, .login { + .toplinks--list { display: flex; flex-wrap: wrap; @@ -181,6 +181,7 @@ div#toplinks { margin: 0 .3rem; } + &-item, a { color: black; font-weight: 500; @@ -197,6 +198,7 @@ div#toplinks { background: center / contain no-repeat url('/assets/profile:icon'); margin-right: 0.5rem; } + margin-right: 0.5em; } } } diff --git a/static/bethune-bruay/_custom.scss b/static/bethune-bruay/_custom.scss index f772d57c..19e79ad5 100644 --- a/static/bethune-bruay/_custom.scss +++ b/static/bethune-bruay/_custom.scss @@ -128,6 +128,6 @@ div.timetable-widget { } } -.user-info--separator::after { +.toplinks--list-item:not(:last-child)::after { content: "·"; } diff --git a/static/cinor-2021/_custom.scss b/static/cinor-2021/_custom.scss index c0bcf333..38362c54 100644 --- a/static/cinor-2021/_custom.scss +++ b/static/cinor-2021/_custom.scss @@ -95,17 +95,11 @@ // User-info #toplinks { - // Reset user links - border: none; - box-shadow: none; - border-radius: 0; - background-color: transparent; color: white; // position top: auto; bottom: 100%; height: $topLinks_height; - padding: 0; line-height: $topLinks_height; a { @@ -115,7 +109,7 @@ } // user icon - &::before { + li:first-child::before { content: "\f2c0"; font-family: fontawesome; margin-right: .33em; diff --git a/static/cinor-2021/_vars.scss b/static/cinor-2021/_vars.scss index d6cb630a..60d96e59 100644 --- a/static/cinor-2021/_vars.scss +++ b/static/cinor-2021/_vars.scss @@ -12,6 +12,7 @@ $ff-ss-serif: 'Source Sans Pro', sans-serif; $ff-script: 'Dancing Script', 'Brush Script MT', cursive; $topLinks_height: 2.5rem; +$toplinks-style: none; // font sizes $fz-small: 0.875em; diff --git a/static/clermont-ici/_custom.scss b/static/clermont-ici/_custom.scss index d6535872..92b42008 100644 --- a/static/clermont-ici/_custom.scss +++ b/static/clermont-ici/_custom.scss @@ -105,7 +105,7 @@ p { margin-bottom: 1rem; } .login { - > a { + a { @extend .pk-button; } } diff --git a/static/clisson-sevre-et-maine-agglo/_custom.scss b/static/clisson-sevre-et-maine-agglo/_custom.scss index 2b54c75b..1f795969 100644 --- a/static/clisson-sevre-et-maine-agglo/_custom.scss +++ b/static/clisson-sevre-et-maine-agglo/_custom.scss @@ -64,7 +64,7 @@ div#header-wrapper { } div#toplinks { - span.login a:first-child::before, span.logged-in a:first-child::before { + .toplinks--list-item:first-child a::before { font-family: FontAwesome; content: "\f007"; /* user */ padding-right: 1ex; diff --git a/static/grandlyon-glc/_custom.scss b/static/grandlyon-glc/_custom.scss index 8ec3c69e..bff7eda4 100644 --- a/static/grandlyon-glc/_custom.scss +++ b/static/grandlyon-glc/_custom.scss @@ -471,7 +471,7 @@ div#toplinks { max-width: 100%; margin-top: 1px; } - span.logged-in { + .logged-in { background: $body-background; border-radius: 1.5em; padding: 1.2ex 1.5em; diff --git a/static/haute-garonne-cd31/_custom.scss b/static/haute-garonne-cd31/_custom.scss index 090a0bd0..7bc84859 100644 --- a/static/haute-garonne-cd31/_custom.scss +++ b/static/haute-garonne-cd31/_custom.scss @@ -594,10 +594,8 @@ div#login-page { } @media ($min-desktop-viewport) { - .user-info--separator { - &::after { - content: "/"; - } + .login .toplinks--list-item:not(:last-child)::after { + content: "/"; } } diff --git a/static/includes/_user-info.scss b/static/includes/_user-info.scss index 10aa83b9..8684032f 100644 --- a/static/includes/_user-info.scss +++ b/static/includes/_user-info.scss @@ -49,3 +49,14 @@ $toplinks-border: null !default; padding-right: 0; } } + +.toplinks--list { + margin: 0; + padding: 0; + list-style: none; + &-item { + display: inline; + margin: 0; + padding: 0; + } +} diff --git a/static/lille-metropole-2022/_custom.scss b/static/lille-metropole-2022/_custom.scss index 867f888b..8e635b80 100644 --- a/static/lille-metropole-2022/_custom.scss +++ b/static/lille-metropole-2022/_custom.scss @@ -55,8 +55,13 @@ div#header { text-overflow: ellipsis; right: 1rem; text-transform: uppercase; - display: flex; - align-items: center; + .toplinks--list { + display: flex; + align-items: center; + &-item { + margin-left: 1em; + } + } a { color: white; } diff --git a/static/loire-atlantique-cd44/_custom.scss b/static/loire-atlantique-cd44/_custom.scss index 7629666f..2635f1b2 100644 --- a/static/loire-atlantique-cd44/_custom.scss +++ b/static/loire-atlantique-cd44/_custom.scss @@ -36,7 +36,7 @@ a:hover { border: 0; box-shadow: none; .logged-in { - a:first-child::after { + .toplinks--list-item:first-child a::after { content: "|"; } .logout { diff --git a/static/metz-metropole-2019/_custom.scss b/static/metz-metropole-2019/_custom.scss index 645d8135..3ed0d1ef 100644 --- a/static/metz-metropole-2019/_custom.scss +++ b/static/metz-metropole-2019/_custom.scss @@ -30,18 +30,14 @@ button::-moz-focus-inner { box-shadow: none; padding-left: 0.5em; width: $width - $nav-menu-side - $pwa-desktop-nav-width; - a, span { + a, span, .toplinks--list-item::after { color: $darkblue; display: inline-block; float: left; font-size: 0.812rem; font-weight: 500; } - span { - padding: 0 0.5rem; - } a.hello { - padding-left: 10px; max-width: 200px; white-space: nowrap; overflow: hidden; @@ -52,6 +48,13 @@ button::-moz-focus-inner { overflow: hidden; } } + .toplinks--list-item:first-child::after { + margin-left: 0.6em; + content: " - "; + } + .registration { + margin-left: 0.5em; + } a.logout { background: url(img/CROIX.svg) center right no-repeat; padding-right: 30px; diff --git a/static/saone-et-loire-cd71-2019/_custom.scss b/static/saone-et-loire-cd71-2019/_custom.scss index 51631d2f..2647b4c7 100644 --- a/static/saone-et-loire-cd71-2019/_custom.scss +++ b/static/saone-et-loire-cd71-2019/_custom.scss @@ -74,7 +74,7 @@ div#header-wrapper { width: 400px; text-align: center; padding-top: 5px; - span.logged-in { + .logged-in { white-space: nowrap; display: inline-block; a { diff --git a/static/toulouse-2022/_custom.scss b/static/toulouse-2022/_custom.scss index e2716ae8..fe0a98f6 100644 --- a/static/toulouse-2022/_custom.scss +++ b/static/toulouse-2022/_custom.scss @@ -201,7 +201,7 @@ div.gru-nav { justify-content: space-between; align-items: center; } - ul { + ul:not(.toplinks--list) { margin: 0; > li > a { font-weight: 500; diff --git a/static/villeneuve-dascq/_custom.scss b/static/villeneuve-dascq/_custom.scss index 9ee59a19..bf6fa897 100644 --- a/static/villeneuve-dascq/_custom.scss +++ b/static/villeneuve-dascq/_custom.scss @@ -477,48 +477,49 @@ div#main-content-wrapper, // Toplinks #toplinks { - // reset position: static; - border: none; - border-radius: 0; - background: none; - box-shadow: none; - padding: 0; line-height: 1.25; + @media screen and ($max-mobile-viewport) { + text-align: left; + } // Keep Space for burger btn margin-right: $nav-btn-width-mobile; @media ($min-desktop-viewport) { margin-right: $nav-btn-width-desktop; } +} +.toplinks--list { // layout display: flex; align-items: center; - > span { + span { margin-right: $theme-gutter; } // login / registration & account in 2 lines .registration { display: block; } - span.sep, .account-link { + .account-link { display: none; } // add icon - > span { + .toplinks--list-item-home, + .toplinks--sublist--logged-in, + .toplinks--sublist--login { padding-left: calc( 20px + .66em); background: no-repeat left center; background-size: 20px auto; line-height: $fz-h4; - &.login { + &.toplinks--sublist--login { background-image: url(img/user.svg); } - &.logged-in { + &.toplinks--sublist--logged-in { background-image: url(img/deconnexion.svg); } - &.theme-back-home { + &.toplinks--list-item-home { background-image: url(img/home.svg); // hide back home link on mobile @media (max-width: $very-small-limit) { @@ -527,6 +528,14 @@ div#main-content-wrapper, } } + .toplinks--sublist { + list-style: none; + margin: 0; + &--item { + margin: 0; + padding: 0; + } + } } // Nav (hamburger in right) diff --git a/static/villeneuve-dascq/_vars.scss b/static/villeneuve-dascq/_vars.scss index 75730c63..e47034e9 100644 --- a/static/villeneuve-dascq/_vars.scss +++ b/static/villeneuve-dascq/_vars.scss @@ -98,3 +98,5 @@ $back-top-layout-position: static (center); $footer-full-width-background: false; $footer-background: $primary-color; + +$toplinks-style: none; diff --git a/templates/includes/user-info.html b/templates/includes/user-info.html index ddce6054..689de8c1 100644 --- a/templates/includes/user-info.html +++ b/templates/includes/user-info.html @@ -1,25 +1,30 @@ {% if include_top_links != False %} {% endif %} diff --git a/templates/variants/alpes-maritimes-2022/includes/user-info.html b/templates/variants/alpes-maritimes-2022/includes/user-info.html index d9c0a92c..2b06f64a 100644 --- a/templates/variants/alpes-maritimes-2022/includes/user-info.html +++ b/templates/variants/alpes-maritimes-2022/includes/user-info.html @@ -1,25 +1,29 @@ {% extends "includes/user-info.html" %} {% block logged-in %} -
- - {{ block.super }} -
- -
+
  • +
    + +
      + {{ block.super }} +
    +
    + +
    +
    • {% endblock %} {% block user-info-login-label %} diff --git a/templates/variants/grandlyon-glc/includes/user-info.html b/templates/variants/grandlyon-glc/includes/user-info.html index 2c18afb5..096fb126 100644 --- a/templates/variants/grandlyon-glc/includes/user-info.html +++ b/templates/variants/grandlyon-glc/includes/user-info.html @@ -1,10 +1,8 @@ -{% extends "includes/user-info.html" %} - -{% block user-info %} + diff --git a/templates/variants/lille-metropole-2022/includes/user-info.html b/templates/variants/lille-metropole-2022/includes/user-info.html index 5d32677b..b75ff5da 100644 --- a/templates/variants/lille-metropole-2022/includes/user-info.html +++ b/templates/variants/lille-metropole-2022/includes/user-info.html @@ -4,11 +4,11 @@ {{ block.super }} {% if mel_link %} -
    +
  • MEL -
    • + {% endif %} {% endblock %} diff --git a/templates/variants/metz-metropole-2019/includes/user-info.html b/templates/variants/metz-metropole-2019/includes/user-info.html index 41a2a374..8ed6bc1f 100644 --- a/templates/variants/metz-metropole-2019/includes/user-info.html +++ b/templates/variants/metz-metropole-2019/includes/user-info.html @@ -2,12 +2,13 @@ {% block user-info %} {% if user.is_authenticated %} - Bonjour {{ user.first_name }} - - Déconnexion +
  • + Bonjour {{ user.first_name }} +
    • +
  • Déconnexion
    • {% else %} - Connexion - - - Inscription +
  • +
  • Inscription
    • {% endif %} - Accueil +
  • Accueil
    • {% endblock %} diff --git a/templates/variants/toulouse-2022/includes/user-info.html b/templates/variants/toulouse-2022/includes/user-info.html index 70b0ab9d..3dd70830 100644 --- a/templates/variants/toulouse-2022/includes/user-info.html +++ b/templates/variants/toulouse-2022/includes/user-info.html @@ -1,9 +1,9 @@ {% extends "includes/user-info.html" %} {% block login %} - - {# below stanza modified and moved in first position #} - {% if registration_url and include_registration_link != False %} + {# below stanza modified and moved in first position #} + {% if registration_url and include_registration_link != False %} +
  • Pas de compte ? @@ -11,12 +11,13 @@ {% include "includes/user-info-registration-label.html" %} {% endblock %} - - {% endif %} +
    • + {% endif %} +
  • - +
    • {% endblock %} diff --git a/templates/variants/villeneuve-dascq/includes/user-info.html b/templates/variants/villeneuve-dascq/includes/user-info.html index 408fba91..9ab0aefe 100644 --- a/templates/variants/villeneuve-dascq/includes/user-info.html +++ b/templates/variants/villeneuve-dascq/includes/user-info.html @@ -1,22 +1,32 @@ {% extends "includes/user-info.html" %} {% block user-info %} - - Accueil - +
  • + + Accueil + +
    • {% if user.is_authenticated %} - - {% if account_url %}{% endif %} - {% block user-info-logout-label %}Déconnexion{% endblock %} - + {% else %} - + {% endif %} {% endblock %} -- 2.39.2