From b41d5cf3ce72915c9f12b6b6d61dcbcdfe49443c Mon Sep 17 00:00:00 2001 From: ljf Date: Mon, 18 Jul 2022 15:00:39 +0200 Subject: [PATCH] Accessibility on menu and page structure --- js/site.js | 3 +++ scss/theme/_menu.scss | 11 +++++++++-- templates/macros/macros.html.twig | 10 +++++++--- templates/partials/base.html.twig | 30 +++++++++++++++--------------- 4 files changed, 34 insertions(+), 20 deletions(-) diff --git a/js/site.js b/js/site.js index 02915ae..1b329e9 100644 --- a/js/site.js +++ b/js/site.js @@ -51,6 +51,9 @@ jQuery(document).ready(function($){ $(this).toggleClass('active'); $('#overlay').toggleClass('open'); $('body').toggleClass('mobile-nav-open'); + // accessible toggle + var state = $('#toggle').attr('aria-expanded'); + state == 'true' ? $('#toggle').attr('aria-expanded','false') : $('#toggle').attr('aria-expanded','true'); }); // Tree Menu diff --git a/scss/theme/_menu.scss b/scss/theme/_menu.scss index fee9483..237c46c 100644 --- a/scss/theme/_menu.scss +++ b/scss/theme/_menu.scss @@ -39,9 +39,16 @@ content: ''; } } + &:focus + ul { + display: block; + visibility: visible; + opacity: 1; + transform: translateY(0); + } + } - &:hover { + &:hover, &:focus-within { & > ul { display: block; visibility: visible; @@ -91,4 +98,4 @@ transform: translateY(-10px); } } -} \ No newline at end of file +} diff --git a/templates/macros/macros.html.twig b/templates/macros/macros.html.twig index d11a20a..f667e55 100644 --- a/templates/macros/macros.html.twig +++ b/templates/macros/macros.html.twig @@ -3,14 +3,18 @@ {% for p in page.children.visible %} {% set active_page = (p.active or p.activeChild) ? 'active' : '' %}
  • - + {% if p.children.visible.count > 0 %} + {{ p.menu }} - {% if p.children.visible.count > 0 %} + {% else %} + + {{ p.menu }} + {% endif %}
    • {% endfor %} -{% endmacro %} \ No newline at end of file +{% endmacro %} diff --git a/templates/partials/base.html.twig b/templates/partials/base.html.twig index 06ce352..f76d041 100644 --- a/templates/partials/base.html.twig +++ b/templates/partials/base.html.twig @@ -40,30 +40,30 @@
    {% block header %} -
    - - + +
    -
    + {% endblock %} - +