deepState/tabi-lean
3
0
Fork 0
forked from deepStateMirrors/tabi
Code Issues 1 Pull requests Activity

♿️ fix: improve menu accessibility (#482)

Browse source
This commit is contained in:
Óscar 2025-02-02 14:54:03 +01:00 • committed by GitHub
parent 5b5bdda456
commit 05d042d27a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 36 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

13
sass/parts/_header.scss
View file

@ -31,7 +31,6 @@ header {
flex-wrap: inherit; flex-wrap: inherit;
justify-content: inherit; justify-content: inherit;
align-items: inherit; align-items: inherit;
gap: inherit;
gap: 1px; gap: 1px;
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -39,7 +38,13 @@ header {
} }
} }
#menu-icons-group { .menu-icons-container {
display: flex;
align-items: center;
margin-left: auto;
}
.menu-icons-group {
gap: 1px; gap: 1px;
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -168,6 +173,10 @@ header {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.menu-icons-container {
margin-left: 0;
}
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {

48
templates/partials/nav.html
View file

@ -26,31 +26,33 @@
{% endfor %} {% endfor %}
{%- endif -%} {%- endif -%}
{#- Wrap the icons in a div to keep them all together -#} {#- Wrap the icons to keep them all together -#}
<div class="nav-navs" id="menu-icons-group"> <li class="menu-icons-container">
{# Search #} <ul class="menu-icons-group">
{%- if config.build_search_index %} {# Search #}
{%- set search_icon_title = macros_translate::translate(key='search_icon_title', default='Press $SHORTCUT to open search', language_strings=language_strings) -%} {%- if config.build_search_index %}
<li class="js"> {%- set search_icon_title = macros_translate::translate(key='search_icon_title', default='Press $SHORTCUT to open search', language_strings=language_strings) -%}
<div role="button" tabindex="0" id="search-button" class="search-icon interactive-icon" title="{{ search_icon_title }}" aria-label="{{ search_icon_title }}"> <li class="js menu-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"> <div role="button" tabindex="0" id="search-button" class="search-icon interactive-icon" title="{{ search_icon_title }}" aria-label="{{ search_icon_title }}">
<path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
</svg> <path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/>
</div> </svg>
</li> </div>
{%- endif %} </li>
{%- endif %}
{# Language switcher #} {# Language switcher #}
{# Displayed only if more than one language is available #} {# Displayed only if more than one language is available #}
{%- if config.languages | length > 0 %} {%- if config.languages | length > 0 %}
{% include "partials/language_switcher.html" %} {% include "partials/language_switcher.html" %}
{%- endif %} {%- endif %}
{# Theme switcher #} {# Theme switcher #}
{%- if config.extra.theme_switcher and config.extra.theme_switcher == true -%} {%- if config.extra.theme_switcher and config.extra.theme_switcher == true -%}
{%- include "partials/theme_switcher.html" -%} {%- include "partials/theme_switcher.html" -%}
{%- endif -%} {%- endif -%}
</div> </ul>
</li>
</ul> </ul>
</div> </div>
{% endif %} {% endif %}