Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
6 changes: 3 additions & 3 deletions layouts/partials/nav.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ <h4>{{ .Site.Params.logo_text }}</h4>
<span class="sr-only">{{ .Title }} - {{ i18n "navHome" }}</span>
</a>
<div class="navbar-buttons">
<button type="button" class="navbar-toggle btn-template-main" data-toggle="collapse" data-target="#navigation">
<button type="button" class="navbar-toggle btn-template-main" data-toggle="collapse" data-target="#navigation" aria-controls="navigation" aria-expanded="false">
<span class="sr-only">{{ i18n "navToggle" }}</span>
<i class="fas fa-align-justify"></i>
</button>
Expand Down Expand Up @@ -48,7 +48,7 @@ <h4>{{ .Site.Params.logo_text }}</h4>
<!-- Check if the first child marks a menu section identifier -->
{{ $hasSections := (hasPrefix (index .Children 0).Identifier "section.") }}
<li class="dropdown{{ if $hasSections }} use-yamm yamm-fw{{end}} {{ $active }}">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{ .Name }} <span class="caret"></span></a>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"{{ if $active }} aria-current="page"{{ end }}>{{ .Name }} <span class="caret"></span></a>

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Mark the actual destination link as current

When a parent menu URL is the current page—for example, /events/—this adds aria-current="page" to the dropdown control whose href is only #. Screen-reader users are therefore told that a non-navigating toggle represents the current page, while the actual /events/ link in the submenu has no current-page indication. Apply aria-current to the matching submenu destination instead.

Useful? React with 👍 / 👎.

{{ if $hasSections }}
<ul class="dropdown-menu">
<li>
Expand Down Expand Up @@ -151,7 +151,7 @@ <h5>{{ .Name }}</h5>
</li>
{{ else }}
<li class="dropdown {{ $active }}">
<a href="{{ .URL }}">{{ .Name }}</a>
<a href="{{ .URL }}"{{ if $active }} aria-current="page"{{ end }}>{{ .Name }}</a>
</li>
{{ end }}
{{ end }}
Expand Down
Loading
Loading