Skip to content

Commit 78cd897

Browse files
XhmikosRTrott
XhmikosR
authored and
Trott
committed
Tweak language toggler. (#2566)
* reduce the IDs usage * reduce data attributes * use classes * keyboard navigation works now
1 parent 0c1a5ce commit 78cd897

3 files changed

Lines changed: 62 additions & 48 deletions

File tree

‎layouts/css/_utils.styl‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,14 @@
99

1010
td
1111
padding 0
12+
13+
// borrowed from Bootstrap
14+
.sr-only
15+
position absolute
16+
width 1px
17+
height 1px
18+
padding 0
19+
overflow hidden
20+
clip rect(0, 0, 0, 0)
21+
white-space nowrap
22+
border none

‎layouts/css/page-modules/_header.styl‎

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,13 @@ header
2525
background-color transparent
2626
text-decoration underline
2727

28-
#lang-picker-toggler
28+
.lang-picker-toggler
2929
position absolute
3030
right 0
3131
bottom 0
32-
width 25px
33-
height 25px
34-
fill $light-gray2
32+
background-color transparent
33+
border none
34+
color $light-gray2
3535
cursor pointer
3636
padding 12px
3737

@@ -43,25 +43,33 @@ header
4343
max-height 200%
4444
overflow auto
4545
background $node-gray
46+
margin 0
47+
padding 0
4648

4749
&.hidden
4850
display none
4951

5052
a
5153
color $light-gray2
5254

53-
> ul
54-
padding 0
55-
margin 0
55+
> li
56+
padding-bottom 0
5657

57-
> li
58-
padding 0.5em 1em
59-
text-transform uppercase
60-
font-size 14px
58+
button
59+
background-color transparent
60+
border none
6161
color $light-gray2 !important
6262
cursor pointer
63-
list-style none
63+
display inline-block
64+
font-family inherit
65+
font-size 14px
66+
line-height 1.5
67+
margin 0 auto
68+
padding 0.5em 1em
69+
text-transform uppercase
70+
width 100%
6471

72+
&:focus,
6573
&:hover
6674
background-color $node-green
6775
text-decoration underline
@@ -120,7 +128,7 @@ header
120128
a:active
121129
padding 0
122130

123-
#lang-picker-toggler
131+
.lang-picker-toggler
124132
position relative
125133
height 1.5em
126134
padding 0

‎layouts/partials/header.hbs‎

Lines changed: 30 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -23,61 +23,56 @@
2323
</ul>
2424
</nav>
2525

26-
<svg id="lang-picker-toggler" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
27-
<rect id="lang-rect" width="512" height="512" x="0" y="0" fill="none" pointer-events="fill"/>
28-
<path d="M217.982 201.586h-64.499c-5.537 0-10.026 4.489-10.026 10.026s4.489 10.026 10.026 10.026h53.547c-4.72 25.263-26.935 44.446-53.547 44.446-30.037 0-54.473-24.436-54.473-54.473s24.436-54.473 54.473-54.473c14.55 0 28.229 5.667 38.518 15.955 3.916 3.916 10.264 3.916 14.178 0 3.916-3.916 3.916-10.264 0-14.178-14.077-14.077-32.791-21.829-52.697-21.829-41.094 0-74.525 33.431-74.525 74.525 0 41.094 33.431 74.525 74.525 74.525s74.525-33.431 74.525-74.525c.001-5.536-4.488-10.025-10.025-10.025z"/>
29-
<path d="M470.331 92.24H269.728l-26.935-81.355a10.025 10.025 0 00-9.518-6.875H41.669C18.693 4.01 0 22.703 0 45.679v332.412c0 22.976 18.693 41.669 41.669 41.669h203.145l27.073 81.369a10.026 10.026 0 009.513 6.861h188.932c22.976 0 41.669-18.693 41.669-41.669V133.909c-.001-22.976-18.694-41.669-41.67-41.669zM41.669 399.708c-11.919 0-21.616-9.697-21.616-21.616V45.679c0-11.919 9.697-21.616 21.616-21.616h184.364l70.691 213.516a.366.366 0 00.015.043l53.664 162.086H41.669zm295.78-116.433c.805 1.11 10.824 14.877 26.355 34.066-4.377 5.756-9.015 11.474-13.91 17.036l-29.712-89.74h87.441c-6.196 13.031-16.938 33.813-31.692 55.736-13.553-16.921-22.069-28.622-22.249-28.87-3.251-4.482-9.519-5.481-14.002-2.23-4.482 3.25-5.48 9.518-2.231 14.002zM265.946 419.76h75.162l-55.503 59.084-19.659-59.084zm226.002 46.561c0 11.919-9.697 21.616-21.616 21.616H304.575l67.015-71.339-.004-.003c.293-.312.571-.64.823-.991a10.025 10.025 0 001.39-9.022l-16.688-50.402c7.073-7.406 13.68-15.143 19.805-22.965 13.299 15.772 29.037 33.446 45.778 50.187 1.957 1.957 4.524 2.937 7.089 2.937s5.132-.979 7.089-2.937c3.916-3.916 3.916-10.264 0-14.178-17.461-17.461-34.013-36.244-47.687-52.632 21.251-30.503 35.033-59.504 40.535-71.954h21.454c5.537 0 10.026-4.489 10.026-10.026s-4.489-10.026-10.026-10.026h-66.173v-18.047c0-5.537-4.489-10.026-10.026-10.026s-10.026 4.489-10.026 10.026v18.046h-51.406l-37.178-112.292H470.33c11.919 0 21.616 9.697 21.616 21.616v332.412z"/>
30-
</svg>
26+
<button class="lang-picker-toggler" type="button" aria-controls="lang-picker" aria-expanded="false">
27+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="25" height="25" aria-hidden="true" focusable="false" fill="currentColor">
28+
<path d="M217.982 201.586h-64.499c-5.537 0-10.026 4.489-10.026 10.026s4.489 10.026 10.026 10.026h53.547c-4.72 25.263-26.935 44.446-53.547 44.446-30.037 0-54.473-24.436-54.473-54.473s24.436-54.473 54.473-54.473c14.55 0 28.229 5.667 38.518 15.955 3.916 3.916 10.264 3.916 14.178 0 3.916-3.916 3.916-10.264 0-14.178-14.077-14.077-32.791-21.829-52.697-21.829-41.094 0-74.525 33.431-74.525 74.525 0 41.094 33.431 74.525 74.525 74.525s74.525-33.431 74.525-74.525c.001-5.536-4.488-10.025-10.025-10.025z"/>
29+
<path d="M470.331 92.24H269.728l-26.935-81.355a10.025 10.025 0 00-9.518-6.875H41.669C18.693 4.01 0 22.703 0 45.679v332.412c0 22.976 18.693 41.669 41.669 41.669h203.145l27.073 81.369a10.026 10.026 0 009.513 6.861h188.932c22.976 0 41.669-18.693 41.669-41.669V133.909c-.001-22.976-18.694-41.669-41.67-41.669zM41.669 399.708c-11.919 0-21.616-9.697-21.616-21.616V45.679c0-11.919 9.697-21.616 21.616-21.616h184.364l70.691 213.516a.366.366 0 00.015.043l53.664 162.086H41.669zm295.78-116.433c.805 1.11 10.824 14.877 26.355 34.066-4.377 5.756-9.015 11.474-13.91 17.036l-29.712-89.74h87.441c-6.196 13.031-16.938 33.813-31.692 55.736-13.553-16.921-22.069-28.622-22.249-28.87-3.251-4.482-9.519-5.481-14.002-2.23-4.482 3.25-5.48 9.518-2.231 14.002zM265.946 419.76h75.162l-55.503 59.084-19.659-59.084zm226.002 46.561c0 11.919-9.697 21.616-21.616 21.616H304.575l67.015-71.339-.004-.003c.293-.312.571-.64.823-.991a10.025 10.025 0 001.39-9.022l-16.688-50.402c7.073-7.406 13.68-15.143 19.805-22.965 13.299 15.772 29.037 33.446 45.778 50.187 1.957 1.957 4.524 2.937 7.089 2.937s5.132-.979 7.089-2.937c3.916-3.916 3.916-10.264 0-14.178-17.461-17.461-34.013-36.244-47.687-52.632 21.251-30.503 35.033-59.504 40.535-71.954h21.454c5.537 0 10.026-4.489 10.026-10.026s-4.489-10.026-10.026-10.026h-66.173v-18.047c0-5.537-4.489-10.026-10.026-10.026s-10.026 4.489-10.026 10.026v18.046h-51.406l-37.178-112.292H470.33c11.919 0 21.616 9.697 21.616 21.616v332.412z"/>
30+
</svg>
31+
<span class="sr-only">Toggle Language</span>
32+
</button>
3133

32-
<div class="lang-picker hidden">
33-
<ul id="language-items">
34-
{{#each locales}}
35-
<li
36-
data-lang="{{locale}}"
37-
title="{{languageEnglishVersion}}"
38-
data-language="{{language}}">
39-
{{language}}
40-
</li>
41-
{{/each}}
42-
</ul>
43-
</div>
34+
<ul id="lang-picker" class="lang-picker hidden">
35+
{{#each locales}}
36+
<li>
37+
<button data-lang="{{locale}}" title="{{languageEnglishVersion}}">{{language}}</button>
38+
</li>
39+
{{/each}}
40+
</ul>
4441

4542
</div>
4643
</header>
4744
<script>
45+
var langPickerTogglerElement = document.querySelector('.lang-picker-toggler')
4846
var langPickerElement = document.querySelector('.lang-picker')
49-
var langElements = langPickerElement.querySelectorAll('li')
50-
var langPickerTogglerElement = document.querySelector('#lang-picker-toggler')
51-
var languageItemsSelector = document.querySelector('#language-items')
47+
var langElements = langPickerElement.querySelectorAll('button')
5248
// Get the current URL language
5349
var currentLang = window.location.pathname.split('/')[1] || 'en'
54-
// Get the current URL language selector item as a li
55-
var currentLangElement = null;
50+
var currentLangElement = null
5651
57-
Array.prototype.forEach.call(langElements, function(el) {
52+
Array.prototype.forEach.call(langElements, function (el) {
5853
if (el.getAttribute('data-lang') !== currentLang) {
59-
el.addEventListener('click', function(e) {
60-
var newLocale = (e.target && e.target.dataset && e.target.dataset.lang) || 'en';
54+
el.addEventListener('click', function (e) {
55+
var newLocale = (e.target && e.target.dataset && e.target.dataset.lang) || 'en'
6156
window.location.replace(window.location.pathname.replace(/\/[a-zA-Z-]+/, '/' + newLocale))
6257
})
6358
} else {
6459
currentLangElement = el
6560
}
6661
})
6762
68-
// Find the container where to mark the tooltip
69-
var langRect = document.querySelector('#lang-picker-toggler > #lang-rect');
70-
// Create dynamically label for tooltip
71-
var titleEle = document.createElementNS('http://www.w3.org/2000/svg', 'title');
72-
var textString = document.createTextNode(currentLangElement.getAttribute('data-language'));
73-
titleEle.appendChild(textString);
74-
langRect.appendChild(titleEle);
63+
langPickerTogglerElement.setAttribute('title', currentLangElement.textContent)
7564
7665
// Remove the current selected language item, because we don't need to choose it
77-
// any more unless we want to switch the new language
78-
languageItemsSelector.removeChild(currentLangElement)
66+
// any more unless we want to switch to a new language
67+
langPickerElement.removeChild(currentLangElement.parentNode)
7968
80-
langPickerTogglerElement.addEventListener('click', function() {
69+
langPickerTogglerElement.addEventListener('click', function () {
8170
langPickerElement.classList.toggle('hidden')
71+
72+
if (langPickerTogglerElement.getAttribute('aria-expanded') === 'true') {
73+
langPickerTogglerElement.setAttribute('aria-expanded', 'false')
74+
} else {
75+
langPickerTogglerElement.setAttribute('aria-expanded', 'true')
76+
}
8277
})
8378
</script>

0 commit comments

Comments
 (0)