amirho/expressjs.com
1
0
Fork 0
mirror of https://github.com/expressjs/expressjs.com.git synced 2026-02-21 19:41:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve accessibility in header buttons (#1833)

Browse Source 
Co-authored-by: Sebastian Beltran <bjohansebas@gmail.com>
This commit is contained in:
shubham oulkar
2025-03-24 00:17:39 +05:30
committed by GitHub
parent 76d93934ca
commit 461386f1f1
6 changed files with 107 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
_includes/header.html
View File

@@ -248,10 +248,10 @@
</ul>
</div>
<div class="header-right">
<div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
<button id="theme-toggle" type="button" class="theme-btn" title="change theme">
<i class="fa fa-moon-o fa-2x hidden-dark"></i>
<span class="sun-icon hidden-light"></span>
</div>
</button>
{% include language-picker.html %}
{% include language-picker-mobile.html %}
</div>

48
_includes/language-picker.html
View File

@@ -1,28 +1,22 @@
<div id="navbar">
<ul id="navmenu">
{% assign url_parts = page.url | split: '/' %}
{% assign url_remainder = url_parts | slice: 2, url_parts.size | join: '/' %}
<li class="submenu">
<div id="current-lang" class="current-lang"></div>
<div id="languageData"
data-languages='{{ site.data.languages | jsonify }}'
style="display:none;">
</div>
<ul class="submenu-content">
{% for lang in site.data.languages %}
<li>
<a href="/{{ lang.code }}/{{ url_remainder }}">
{% if lang.code | to_s == current_lang | to_s %}
<strong>{{ lang.name }}</strong>
{% else %}
{{ lang.name }}
{% endif %}
</a>
</li>
{% endfor %}
</ul>
</li>
</ul>
<div class="desktop-lang-switcher">
{% assign url_parts = page.url | split: '/' %}
{% assign url_remainder = url_parts | slice: 2, url_parts.size | join: '/' %}
{% assign current_lang = page.lang %}
<button class="lang-btn" type="button" aria-haspopup="menu" aria-label="Change language">
<span id="current-lang"></span>
</button>
<ul class="lang-list submenu-content" aria-labelledby="current-lang" >
{% for lang in site.data.languages %}
<li>
<a href="/{{ lang.code }}/{{ url_remainder }}">
{% if lang.code == current_lang %}
<strong>{{ lang.name }}</strong>
{% else %}
{{ lang.name }}
{% endif %}
</a>
</li>
{% endfor %}
</ul>
<div id="languageData" data-languages='{{ site.data.languages | jsonify }}' style="display:none;"></div>
</div>