Skip to content

Fix/header accessibility #75

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
czechian merged 8 commits into from
Aug 13, 2025
Merged

Fix/header accessibility #75

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3b1353b
fix: fixed header mobile menu accessibility
ParzivalPavlis Aug 11, 2025
0d010ad
feat: added tab navigation and more accessibility options
ParzivalPavlis Aug 12, 2025
b67f864
Merge branch 'master' into fix/header-accessibility
ParzivalPavlis Aug 12, 2025
266a23c
fix: fixed wrong list structure
ParzivalPavlis Aug 12, 2025
364544b
feat: added aria-labels to header, footer and some nav elements
ParzivalPavlis Aug 12, 2025
153127a
fix: changed some nav landmarks to div and div to nav for better acce…
ParzivalPavlis Aug 13, 2025
03372ae
fix: added aria label to aritcles navigation
ParzivalPavlis Aug 13, 2025
0702d11
feat: added labelledby to gooddata logo
ParzivalPavlis Aug 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions assets/icons/GoodDataLearn.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions assets/scss/header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,10 @@
align-items: center;
padding: 0 20px;

&__menu {
overflow-y: auto;
}

&__first {
top: 0;
min-height: $header-first-nav-height;
Expand Down Expand Up @@ -212,6 +216,7 @@

.gd-header-mobile-menu-trigger {
margin-bottom: 0;
border: none;
}

.search-result-close-button {
Expand Down
4 changes: 2 additions & 2 deletions layouts/_default/baseof.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<body class="td-{{ .Kind }}{{ if .Page.Params.edition }} doc{{ .Page.Params.edition }}{{ end }}{{ if .Page.Params.type }} {{ .Page.Params.type }}{{ end }}" id="top">
{{ partial "gtm-body.html" }}
{{ partial "skip-links.html" . }}
<header>
<header aria-label="Main site header">
{{ partial "navbar.html" . }}
</header>
<div class="container-fluid td-outer">
Expand All @@ -26,7 +26,7 @@
<div class="d-none d-xl-block col-xl-2 td-toc d-print-none">
{{ partial "toc.html" . }}
</div>
<main class="col-12 col-lg-8 col-xl-7 pl-lg-5 ps-lg-5" role="main" id="main-content">
<main class="col-12 col-lg-8 col-xl-7 pl-lg-5 ps-lg-5" role="main" id="main-content" aria-label="Article content">
{{ partial "version-banner.html" . }}
{{ if not .Site.Params.ui.breadcrumb_disable }}{{ partial "breadcrumb.html" . }}{{ end }}
{{ if .Draft }}
Expand Down
4 changes: 2 additions & 2 deletions layouts/api-reference/baseof.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,11 @@
<body class="td-{{ .Kind }}{{ if .Page.Params.edition }} doc{{ .Page.Params.edition }}{{ end }}{{ if .Page.Params.type }} {{ .Page.Params.type }}{{ end }}" id="top">
{{ partial "gtm-body.html" }}
{{ partial "skip-links.html" . }}
<header>
<header aria-label="Main site header">
{{ partial "navbar.html" . }}
</header>
<div class="container-fluid td-default td-outer">
<main role="main" class="td-main" id="main-content">
<main role="main" class="td-main" id="main-content" aria-label="Article content">
{{ block "main" . }}{{ end }}
</main>
{{ partialCached "footer.html" . }}
Expand Down
4 changes: 2 additions & 2 deletions layouts/docs/baseof.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<body class="td-{{ .Kind }}{{ if .Page.Params.edition }} doc{{ .Page.Params.edition }}{{ end }}{{ if .Page.Params.type }} {{ .Page.Params.type }}{{ end }}" id="top">
{{ partial "gtm-body.html" }}
{{ partial "skip-links.html" . }}
<header>
<header aria-label="Main site header">
{{ partial "navbar.html" . }}
</header>
<div class="container-fluid td-outer">
Expand All @@ -26,7 +26,7 @@
<div class="d-none d-xl-block col-xl-2 td-toc d-print-none">
{{ partial "toc.html" . }}
</div>
<main class="col-12 col-lg-8 col-xl-7 pl-lg-5 ps-lg-5" role="main" id="main-content">
<main class="col-12 col-lg-8 col-xl-7 pl-lg-5 ps-lg-5" role="main" id="main-content" aria-label="Article content">
{{ partial "version-banner.html" . }}
{{ if not .Site.Params.ui.breadcrumb_disable }}{{ partial "breadcrumb.html" . }}{{ end }}
{{ if .Draft }}
Expand Down
2 changes: 1 addition & 1 deletion layouts/partials/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
{{ $footer := getJSON "https://www.gooddata.com/learn-assets/js/footer-definition.json" }}
{{ if not .Site.Params.whitelabeled }}

<footer class="gd-footer">
<footer class="gd-footer" aria-label="Page footer">
<a href="#top" class="skip-link skip-link--footer">Skip footer content</a>

{{ if $footer.footer.bannerLinks }}
Expand Down
16 changes: 8 additions & 8 deletions layouts/partials/header-menu.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,18 +7,18 @@
{{ end }}
{{ end }}

<div class="gd-docs-header-nav__center gd-header">
<nav class="gd-docs-header-nav__center gd-header" aria-label="Main">
{{ if $mainMenu }}
<input type="checkbox" id="gd-header-mobile-menu-trigger-input" name="gd-header-mobile-menu-trigger-input" class="gd-header-mobile gd-header-mobile-menu-trigger-input">
<label for="gd-header-mobile-menu-trigger-input" class="gd-header-mobile gd-header-mobile-menu-trigger"><span></span></label>
<ul class="gd-docs-header-nav__menu gd-header-links">
<input type="checkbox" role="button" id="gd-header-mobile-menu-trigger-input" name="gd-header-mobile-menu-trigger-input" class="gd-header-mobile gd-header-mobile-menu-trigger-input" aria-label="Open navigation menu" aria-controls="gd-header-mobile-menu" aria-expanded="false">
<label tabindex="0" for="gd-header-mobile-menu-trigger-input" class="gd-header-mobile gd-header-mobile-menu-trigger"><span></span></label>
<ul id="gd-header-mobile-menu" class="gd-docs-header-nav__menu gd-header-links">
{{ range $mainMenu }}
<li class="gd-docs-header-nav__menuitem gd-header-link-item{{ if (isset .Params "mobileonly") }} gd-header-link-item-mobile-only{{ end }}">
<a href="{{ if isset .Params "isHome" }}{{ $dot.Site.Home.RelPermalink }}{{ else }}{{ .URL }}{{ end }}" class="gd-docs-header-nav__menulink gd-header-link{{ if isset .Params "ismobiletitle" }} gd-header-link__main{{ end }}{{ if isset .Params "ishome" }} gd-header-link__active{{ end }}">
{{ .Name }}
</a>
<a href="{{ if isset .Params "isHome" }}{{ $dot.Site.Home.RelPermalink }}{{ else }}{{ .URL }}{{ end }}" class="gd-docs-header-nav__menulink gd-header-link{{ if isset .Params "ismobiletitle" }} gd-header-link__main{{ end }}{{ if isset .Params "ishome" }} gd-header-link__active{{ end }}">
{{ .Name }}
</a>
</li>
{{ end }}
</ul>
{{ end }}
</div>
</nav>
14 changes: 8 additions & 6 deletions layouts/partials/navbar-breadcrumb.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
{{/* (C) 2023 GoodData Corporation */}}
{{/* This is overriden in docs (tiger/bear) */}}
<ul class="gd-breadcrumb">
<li class="gd-breadcrumb-item">
<a href="{{ .Site.Home.RelPermalink }}">All Products</a>
</li>
<li class="gd-breadcrumb-item">{{ .Title }}</li>
</ul>
<nav class="gd-docs-header-nav__left" aria-label="Breadcrumbs">
<ul class="gd-breadcrumb">
<li class="gd-breadcrumb-item">
<a href="{{ .Site.Home.RelPermalink }}">All Products</a>
</li>
<li class="gd-breadcrumb-item">{{ .Title }}</li>
</ul>
</nav>
24 changes: 11 additions & 13 deletions layouts/partials/navbar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,18 @@
{{ $cover := .HasShortcode "blocks/cover" }}

{{ if not $whitelabeled }}
<nav class="gd-docs-header-nav gd-docs-header-nav__first">
<div class="gd-docs-header-nav__left">
<div class="gd-docs-header-nav gd-docs-header-nav__first">
<nav class="gd-docs-header-nav__left" aria-label="Homepage">
<a class="gd-docs-header-nav__logo gd-header-nav__logo" href="{{ .Site.Home.RelPermalink }}" aria-label="Go to documentation homepage">
{{ with resources.Get "icons/GoodDataLearn.svg" }}{{ ( . | minify).Content | safeHTML }}{{ end }}
</a>
<span class="gd-header-nav__logo-text">Learn</span>
</div>
</nav>
{{ partial "header-menu.html" . }}
{{ partial "header-right.html" . }}
</nav>
<nav class="gd-docs-header-nav gd-docs-header-nav__second">
<div class="gd-docs-header-nav__left">
{{ partial "navbar-breadcrumb.html" . }}
</div>
</div>
<div class="gd-docs-header-nav gd-docs-header-nav__second">
{{ partial "navbar-breadcrumb.html" . }}
{{ if not .Params.no_search }}
<div class="gd-docs-header-nav__center">
{{ if eq .Page.Type "docs" }}
Expand All @@ -40,16 +38,16 @@

{{ partial "edition-switch.html" . }}
{{ partial "lang-switch.html" . }}
</nav>
</div>
{{ else }}

<nav class="gd-docs-header-nav gd-docs-header-nav__first whitelabeled-header__first">
<div class="gd-docs-header-nav gd-docs-header-nav__first whitelabeled-header__first">
<div class="gd-docs-header-nav__left"></div>
</nav>
<nav class="gd-docs-header-nav gd-docs-header-nav__second whitelabeled-header__second">
</div>
<div class="gd-docs-header-nav gd-docs-header-nav__second whitelabeled-header__second">
<div class="gd-docs-header-nav__left"></div>
<div class="gd-docs-header-nav__center"></div>
<div class="gd-docs-header-nav__right"></div>
</nav>
</div>

{{ end }}
6 changes: 4 additions & 2 deletions layouts/partials/sidebar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<span class="gd-docs-menu__mobile-icon" aria-hidden="true"></span>
</button>
<div class="gd-docs-menu__mobile-bg"></div>
<nav id="gd-docs-menu" class="gd-docs-menu init">
<nav id="gd-docs-menu" class="gd-docs-menu init" aria-label="Articles">
<div class="sidebar-skip-links">
<a href="#main-content" class="skip-link skip-link--sidebar">Skip to main content</a>
</div>
Expand Down Expand Up @@ -87,7 +87,9 @@
</li>

{{ if and $page.Params.navigationLabel $page.Pages }}
{{ template "section-tree-nav-sections" (dict "root" $page.Pages "currentPage" $currentPage "activeSection" $activeSection "site" $site) }}
<li class="gd-docs-menu-page">
{{ template "section-tree-nav-sections" (dict "root" $page.Pages "currentPage" $currentPage "activeSection" $activeSection "site" $site) }}
</li>
{{ end }}
{{ end }}
{{ end }}
Expand Down
4 changes: 2 additions & 2 deletions layouts/swagger/baseof.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<body class="td-{{ .Kind }}" id="top">
{{ partial "gtm-body.html" }}
{{ partial "skip-links.html" . }}
<header>
<header aria-label="Main site header">
{{ partial "navbar.html" . }}
</header>
<div class="container-fluid td-outer">
Expand All @@ -22,7 +22,7 @@
<div class="d-none d-xl-block col-xl-2 td-toc d-print-none">
{{ partial "toc.html" . }}
</div>
<main class="col-12 col-md-9 col-xl-7 pl-lg-5 ps-lg-5" role="main" id="main-content">
<main class="col-12 col-md-9 col-xl-7 pl-lg-5 ps-lg-5" role="main" id="main-content" aria-label="Article content">
{{ if not .Site.Params.ui.breadcrumb_disable }}{{ partial "breadcrumb.html" . }}{{ end }}
<script src="/js/swagger-ui-bundle.js"></script>
<script src="/js/swagger-ui-standalone-preset.js"></script>
Expand Down
51 changes: 51 additions & 0 deletions static/js/menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
// (C) 2023 GoodData Corporation

$(document).ready(function () {
// Side menu
var menu = $(".gd-docs-menu"),
menuActive = $(".gd-docs-menu-page.active");

Expand Down Expand Up @@ -36,4 +37,54 @@ $(document).ready(function () {

$button.attr("aria-expanded", !isExpanded);
});
// Mobile header menu
var $mobileMenuTrigger = $("#gd-header-mobile-menu-trigger-input");
var $mobileMenuLabel = $("label[for='gd-header-mobile-menu-trigger-input']");
var scrollPosition = 0; // Store scroll position

// Function to toggle menu state
function toggleMobileMenu() {
var isChecked = $mobileMenuTrigger.is(":checked");

// Update aria-expanded for accessibility
$mobileMenuTrigger.attr("aria-expanded", isChecked);

// Prevent body scrolling when menu is open
if (isChecked) {
// Save current scroll position
scrollPosition = window.pageYOffset || document.documentElement.scrollTop;

// Menu is open - disable body scroll and maintain position
$("body").css({
"overflow": "hidden",
"position": "fixed",
"top": -scrollPosition + "px",
"width": "100%"
});
$mobileMenuTrigger.attr("aria-label", "Close navigation menu");
} else {
// Menu is closed - enable body scroll and restore position
$("body").css({
"overflow": "",
"position": "",
"top": "",
"width": ""
});
$mobileMenuTrigger.attr("aria-label", "Open navigation menu");
// Restore scroll position
window.scrollTo(0, scrollPosition);
}
}

$mobileMenuTrigger.on("change", toggleMobileMenu);
$mobileMenuLabel.on("keydown", function(e) {
if (e.key === "Enter") {
e.preventDefault();
$mobileMenuTrigger.prop("checked", !$mobileMenuTrigger.prop("checked"));
$mobileMenuTrigger.trigger("change");
}
});
// TOC menu
var $tocMenu = $("#TableOfContents");
$tocMenu.attr("aria-label", "Table of contents");
});