a11y: switch top links to ul/li (#40926)
gitea/publik-base-theme/pipeline/head This commit looks good Details

This commit is contained in:
Frédéric Péters 2023-05-07 11:59:58 +02:00
parent 6b9aee0a99
commit f29730f88a
25 changed files with 181 additions and 131 deletions

View File

@ -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;
}

View File

@ -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;
}
}

View File

@ -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;
}
}
}

View File

@ -128,6 +128,6 @@ div.timetable-widget {
}
}
.user-info--separator::after {
.toplinks--list-item:not(:last-child)::after {
content: "·";
}

View File

@ -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;

View File

@ -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;

View File

@ -105,7 +105,7 @@ p {
margin-bottom: 1rem;
}
.login {
> a {
a {
@extend .pk-button;
}
}

View File

@ -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;

View File

@ -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;

View File

@ -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: "/";
}
}

View File

@ -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;
}
}

View File

@ -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;
}

View File

@ -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 {

View File

@ -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;

View File

@ -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 {

View File

@ -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;

View File

@ -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)

View File

@ -98,3 +98,5 @@ $back-top-layout-position: static (center);
$footer-full-width-background: false;
$footer-background: $primary-color;
$toplinks-style: none;

View File

@ -1,25 +1,30 @@
{% if include_top_links != False %}
<div id="toplinks">
{% block user-info %}
{% if user.is_authenticated %}
{% block logged-in %}
<span class="logged-in">
{% if account_url %}<a class="account-link" href="{{ account_url }}">{% endif %}
<span class="connected-user">{% block user-info-user-name %}{% include "includes/user-info-user-name.html" %}{% endblock %}</span>{% if account_url %}</a>{% endif %}
<a accesskey="o" class="logout" href="{{ logout_url }}">{% block user-info-logout-label %}{% include "includes/user-info-logout-label.html" %}{% endblock %}</a>
</span>
{% endblock %}
{% else %}
{% block login %}
<span class="login"><a accesskey="2" class="login-link" href="{{ login_url }}"
>{% block user-info-login-label %}{% include "includes/user-info-login-label.html" %}{% endblock %}
{% if registration_url and include_registration_link != False %}
</a>
<span class="user-info--separator"></span>
<a class="registration" href="{{registration_url}}"
>{% block user-info-registration-label %}{% include "includes/user-info-registration-label.html" %}{% endblock %}{% endif %}</a></span>
{% endblock %}
{% endif %}
{% endblock %}
<ul class="toplinks--list {{ user.is_authenticated|yesno:"logged-in,login" }}">
{% block user-info %}
{% if user.is_authenticated %}
{% block logged-in %}
<li class="toplinks--list-item">
{% if account_url %}<a class="account-link" href="{{ account_url }}">{% endif %}
<span class="connected-user">{% block user-info-user-name %}{% include "includes/user-info-user-name.html" %}{% endblock %}</span>{% if account_url %}</a>{% endif %}
</li><li class="toplinks--list-item">
<a accesskey="o" class="logout" href="{{ logout_url }}">{% block user-info-logout-label %}{% include "includes/user-info-logout-label.html" %}{% endblock %}</a>
</li>
{% endblock %}
{% else %}
{% block login %}
<li class="toplinks--list-item">
<a accesskey="2" class="login-link" href="{{ login_url }}"
>{% block user-info-login-label %}{% include "includes/user-info-login-label.html" %}{% endblock %}
{% if registration_url and include_registration_link != False %}
</a>
</li><li class="toplinks--list-item">
<a class="registration" href="{{registration_url}}"
>{% block user-info-registration-label %}{% include "includes/user-info-registration-label.html" %}{% endblock %}{% endif %}</a>
</li>
{% endblock %}
{% endif %}
{% endblock %}
</ul>
</div>
{% endif %}

View File

@ -1,25 +1,29 @@
{% extends "includes/user-info.html" %}
{% block logged-in %}
<div class="toplinks--toggled-wrapper">
<button aria-label="{% include "includes/user-info-user-name.html" %}" class="toplinks--togglable-btn togglable">
<svg class="toplinks-icon">
<use href="{{site_base}}/static/{{css_variant}}/img/toplinks-icon.svg#icon" />
</svg>
<span class="desktop-only">
{% include "includes/user-info-user-name.html" %}
</span>
</button>
{{ block.super }}
<div class="toplinks--panel-mask"></div>
<script>
const toplinksBtn = document.querySelector('.toplinks--togglable-btn')
const toplinksMask = document.querySelector('.toplinks--panel-mask')
toplinksMask.addEventListener('click', function(){
toplinksBtn.click()
});
</script>
</div>
<li class="toplinks--list-item">
<div class="toplinks--toggled-wrapper">
<button aria-label="{% include "includes/user-info-user-name.html" %}" class="toplinks--togglable-btn togglable">
<svg class="toplinks-icon">
<use href="{{site_base}}/static/{{css_variant}}/img/toplinks-icon.svg#icon" />
</svg>
<span class="desktop-only">
{% include "includes/user-info-user-name.html" %}
</span>
</button>
<ul class="toplinks--togglable-menu">
{{ block.super }}
</ul>
<div class="toplinks--panel-mask"></div>
<script>
const toplinksBtn = document.querySelector('.toplinks--togglable-btn')
const toplinksMask = document.querySelector('.toplinks--panel-mask')
toplinksMask.addEventListener('click', function(){
toplinksBtn.click()
});
</script>
</div>
</li>
{% endblock %}
{% block user-info-login-label %}

View File

@ -1,10 +1,8 @@
{% extends "includes/user-info.html" %}
{% block user-info %}
<div id="toplinks">
{% if user.is_authenticated %}
<span class="logged-in">
<span class="connected-user"><a href="{{ idp_account_url }}">{{user.first_name}} {{user.last_name}}</a></span>
<a class="logout" href="{{ logout_url }}">D&eacute;connexion</a>
</span>
{% endif %}
{% endblock %}
</div>

View File

@ -4,11 +4,11 @@
{{ block.super }}
{% if mel_link %}
<div class="mel-link-wrapper">
<li class="mel-link-wrapper">
<a href="{{ mel_link }}">
<img src="{{portal_url}}assets/mel:logo" alt="MEL" />
</a>
</div>
</li>
{% endif %}
{% endblock %}

View File

@ -2,12 +2,13 @@
{% block user-info %}
{% if user.is_authenticated %}
<a class="hello" href="{{ account_url }}"><span>Bonjour {{ user.first_name }}</span></a><span> -
</span><a accesskey="o" class="logout" href="{{ logout_url }}">Déconnexion</a>
<li class="toplinks--list-item">
<a class="hello" href="{{ account_url }}"><span>Bonjour {{ user.first_name }}</span></a>
</li>
<li class="toplinks--list-item"><a accesskey="o" class="logout" href="{{ logout_url }}">Déconnexion</a></li>
{% else %}
<a class="login" href="{{ login_url }}">Connexion</a>
<span class="sep"> - </span>
<a class="registration" href="{{ registration_url }}">Inscription</a>
<li class="toplinks--list-item"><a class="login" href="{{ login_url }}">Connexion</a>
</li><li class="toplinks--list-item"><a class="registration" href="{{ registration_url }}">Inscription</a></li>
{% endif %}
<a class="home" href="{{ portal_url }}">Accueil</a>
<li class="toplinks--list-item"><a class="home" href="{{ portal_url }}">Accueil</a></li>
{% endblock %}

View File

@ -1,9 +1,9 @@
{% extends "includes/user-info.html" %}
{% block login %}
<span class="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 %}
<li class="toplinks--list-item">
<span class="pre-register">Pas de compte ?</span>
<span class="user-info--separator"></span>
<a class="registration" href="{{registration_url}}">
@ -11,12 +11,13 @@
{% include "includes/user-info-registration-label.html" %}
{% endblock %}
</a>
<span class="user-info--separator"></span>
{% endif %}
</li>
{% endif %}
<li class="toplinks--list-item">
<a accesskey="2" class="login-link" href="{{ login_url }}">
{% block user-info-login-label %}
{% include "includes/user-info-login-label.html" %}
{% endblock %}
</a>
</span>
</li>
{% endblock %}

View File

@ -1,22 +1,32 @@
{% extends "includes/user-info.html" %}
{% block user-info %}
<span class="theme-back-home">
<a href="{{portal_url}}" title="retour à laccueil">Accueil</a>
</span>
<li class="toplinks--list-item toplinks--list-item-home">
<span class="theme-back-home">
<a href="{{portal_url}}" title="retour à laccueil">Accueil</a>
</span>
</li>
{% if user.is_authenticated %}
<span class="logged-in">
{% if account_url %}<a class="account-link" href="{{ account_url }}">{% endif %}
<span class="connected-user">{% block user-info-user-name %}{{user.first_name}} {{user.last_name}}{% endblock %}</span>{% if account_url %}</a>{% endif %}
<a accesskey="o" class="logout" href="{{ logout_url }}">{% block user-info-logout-label %}Déconnexion{% endblock %}</a>
</span>
<ul class="toplinks--sublist toplinks--sublist--logged-in">
<li class="toplinks--sublist-item">
{% if account_url %}<a class="account-link" href="{{ account_url }}">{% endif %}
<span class="connected-user">{% block user-info-user-name %}{{user.first_name}} {{user.last_name}}{% endblock %}</span>{% if account_url %}</a>{% endif %}
</li>
<li class="toplinks--sublist-item">
<a accesskey="o" class="logout" href="{{ logout_url }}">{% block user-info-logout-label %}Déconnexion{% endblock %}</a>
</li>
</ul>
{% else %}
<span class="login"><a accesskey="2" class="login-link" href="{{ login_url }}"
>{% block user-info-login-label %}Connexion{% endblock %}
{% if registration_url and include_registration_link != False %}</a>{% endif %}
<span class="sep">/</span>
{% if registration_url and include_registration_link != False %}<a class="registration" href="{{registration_url}}"
>{% block user-info-registration-label %}Inscription{% endblock %}{% endif %}</a></span>
<ul class="toplinks--sublist toplinks--sublist--login">
<li class="toplinks--sublist-item">
<span class="login"><a accesskey="2" class="login-link" href="{{ login_url }}"
>{% block user-info-login-label %}Connexion{% endblock %}
{% if registration_url and include_registration_link != False %}</a>{% endif %}
</li>
<li class="toplinks--sublist-item">
{% if registration_url and include_registration_link != False %}<a class="registration" href="{{registration_url}}"
>{% block user-info-registration-label %}Inscription{% endblock %}{% endif %}</a></li>
</ul>
{% endif %}
{% endblock %}