Skip to content
Snippets Groups Projects
Commit 2281ba6b authored by alexisben's avatar alexisben
Browse files

a11y switch button

parent d444af15
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
assets/sass/_theme/design-system/nav.sass
+ 55
− 22
View file @ 2281ba6b
...@@ -91,38 +91,68 @@ ...@@ -91,38 +91,68 @@
span span
@include meta @include meta
.header-i18n
[role="button"]
text-transform: uppercase
@include media-breakpoint-up(desktop) @include media-breakpoint-up(desktop)
.nav-level-1
align-items: center
.nav-level-3 .nav-level-3
li li
margin-top: $spacing0 margin-top: $spacing0
@if $header-dropdown-full .has-children:not(.header-i18n) // avoid
.dropdown-menu @if $header-dropdown-full
inset: 100% 0 auto 0 .dropdown-menu:not(.dropdown-languages)
padding-left: 0 inset: 100% 0 auto 0
padding-right: 0 padding-left: 0
padding-bottom: $spacing2 padding-right: 0
.nav-level-2 padding-bottom: $spacing2
@include container .nav-level-2
@include grid(4, desktop) @include container
@else @include grid(4, desktop)
.has-children @else
position: relative position: relative
.dropdown-menu
margin-top: $header-nav-padding-y
min-width: 400px
padding-left: $spacing1
padding-top: $spacing0
padding-right: $spacing1
right: 0
text-align: right
.nav-level-2
> li
> a
padding-bottom: half($spacing0)
padding-top: half($spacing0)
display: block
+ li.has-children
margin-top: $spacing1
.header-i18n
position: relative
[role="button"]
@include icon-block(globe, after)
margin-left: half(-$spacing0)
.dropdown-menu .dropdown-menu
margin-top: $header-nav-padding-y margin-top: $header-nav-padding-y
min-width: 400px
padding-left: $spacing1 padding-left: $spacing1
padding-bottom: $spacing0
padding-top: $spacing0 padding-top: $spacing0
padding-right: $spacing1 padding-right: $spacing1
right: 0 right: 0
text-align: right li a
.nav-level-2 padding-bottom: half($spacing0)
> li padding-top: half($spacing0)
> a display: block
padding-bottom: half($spacing0) &.is-checked
padding-top: half($spacing0) display: flex
display: block justify-content: space-between
+ li.has-children align-items: center
margin-top: $spacing1 gap: $spacing2
@include icon(caret, after, true)
transform: rotate(-14deg) skewX(-30deg)
@include media-breakpoint-down(desktop) @include media-breakpoint-down(desktop)
&.is-opened &.is-opened
...@@ -156,15 +186,18 @@ ...@@ -156,15 +186,18 @@
padding-top: 0 padding-top: 0
[aria-expanded=true] + .dropdown-menu [aria-expanded=true] + .dropdown-menu
display: block display: block
// &.header-i18n
// [role="button"]
// justify-content: center
.dropdown-menu .dropdown-menu
padding-left: 0 padding-left: 0
.nav-level-2 .nav-level-2
> .has-children + li > .has-children + li
margin-top: $spacing1 margin-top: $spacing1
.nav-level-3 .nav-level-3
padding-top: 0 padding-top: 0
.share .share
display: flex display: flex
list-style: none list-style: none
......
config.yaml
+ 3
− 0
View file @ 2281ba6b
...@@ -11,6 +11,9 @@ params: ...@@ -11,6 +11,9 @@ params:
logo: logo:
header: "/assets/images/logo.svg" header: "/assets/images/logo.svg"
footer: "/assets/images/logo.svg" footer: "/assets/images/logo.svg"
menu:
i18n:
display: true
breadcrumb: breadcrumb:
position: hero-start # hero-start | hero-end | after-hero | none position: hero-start # hero-start | hero-end | after-hero | none
summary: summary:
......
i18n/fr.yml
+ 1
− 0
View file @ 2281ba6b
...@@ -48,6 +48,7 @@ commons: ...@@ -48,6 +48,7 @@ commons:
accessibility: accessibility:
main_content: Accéder au contenu principal main_content: Accéder au contenu principal
menu: Accéder au menu menu: Accéder au menu
menu_lang: Accéder au menu des langues
search: Accéder à la recherche search: Accéder à la recherche
shortcut_navigation: Navigation d'accès rapide shortcut_navigation: Navigation d'accès rapide
transcription: Transcription transcription: Transcription
......
layouts/partials/commons/menu.html
+ 4
− 0
View file @ 2281ba6b
...@@ -62,4 +62,8 @@ ...@@ -62,4 +62,8 @@
</li> </li>
{{- end -}} {{- end -}}
{{ end -}} {{ end -}}
{{ if and (eq $kind "primary") (site.Params.menu.i18n.display) }}
{{ partial "header/i18n.html" . }}
{{ end }}
</ul> </ul>
layouts/partials/footer/i18n.html
+ 1
− 1
View file @ 2281ba6b
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
{{ $url = .Permalink }} {{ $url = .Permalink }}
{{ end }} {{ end }}
{{ end }} {{ end }}
<li><a href="{{ $url }}">{{ $siteLang.LanguageName }}</a></li> <li><a href="{{ $url }}" lang="{{ $siteLang }}" hreflang="{{ $siteLang }}">{{ $siteLang.LanguageName }}</a></li>
{{ end }} {{ end }}
</ul> </ul>
{{ end }} {{ end }}
......
layouts/partials/header/i18n.html 0 → 100644
+ 43
− 0
View file @ 2281ba6b
{{ $page := . }}
{{ $pageWithTranslations := $page.Translations | append $page }}
{{ $siteLang := "" }}
{{ $url := "" }}
{{ if gt (len site.Languages) 1 }}
<li class="header-i18n has-children">
{{ with site.Languages }}
<span
role="button"
aria-haspopup="menu"
aria-expanded="false"
aria-label="{{ i18n "commons.accessibility.menu_lang" }}"
tabindex="0">
{{- site.Language -}}
</span>
<div class="dropdown-menu dropdown-languages">
<ul>
{{ range site.Languages }}
{{ $siteLang := . }}
{{ $url = printf "/%s/" .Lang }}
{{ range $pageWithTranslations }}
{{ if eq .Lang $siteLang.Lang }}
{{ $url = .Permalink }}
{{ end }}
{{ end }}
<li>
<a
href="{{ $url }}"
lang="{{ $siteLang }}"
hreflang="{{ $siteLang }}"
{{ if eq $siteLang site.Language }}
class="is-checked"
{{ end }}
>
{{- $siteLang.LanguageName -}}
</a>
</li>
{{ end }}
</ul>
</div>
{{ end }}
</li>
{{ end }}
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment