Skip to content

Commit

Permalink
Merge pull request #198 from ivyrze/nav-a11y
Browse files Browse the repository at this point in the history
Fixed improper navigation semantics
  • Loading branch information
Ocramius authored Feb 9, 2023
2 parents 39dfef1 + 42c89d2 commit b7e66e1
Show file tree
Hide file tree
Showing 35 changed files with 752 additions and 701 deletions.
1,341 changes: 690 additions & 651 deletions psalm-baseline.xml

Large diffs are not rendered by default.

4 changes: 4 additions & 0 deletions src/Helper/Navigation/AbstractHelper.php
Original file line number Diff line number Diff line change
Expand Up @@ -411,6 +411,10 @@ public function htmlify(AbstractPage $page)
'target' => $page->getTarget(),
];

if ($page->isActive()) {
$attribs['aria-current'] = 'page';
}

/** @var View\Helper\EscapeHtml $escaper */
$escaper = $this->view->plugin('escapeHtml');
$label = $escaper($label);
Expand Down
6 changes: 5 additions & 1 deletion src/Helper/Navigation/Breadcrumbs.php
Original file line number Diff line number Diff line change
Expand Up @@ -111,9 +111,13 @@ public function renderStraight($container = null)
} else {
/** @var View\Helper\EscapeHtml $escaper */
$escaper = $this->view->plugin('escapeHtml');
$html = $escaper(
$label = $escaper(
$this->translate($active->getLabel(), $active->getTextDomain())
);
$attribs = [
'aria-current' => 'page',
];
$html = '<span' . $this->htmlAttribs($attribs) . '>' . $label . '</span>';
}

// walk back to root
Expand Down
4 changes: 4 additions & 0 deletions src/Helper/Navigation/Menu.php
Original file line number Diff line number Diff line change
Expand Up @@ -507,6 +507,10 @@ public function htmlify(AbstractPage $page, $escapeLabel = true, $addClassToList
$element = 'span';
}

if ($page->isActive()) {
$attribs['aria-current'] = 'page';
}

$html = '<' . $element . $this->htmlAttribs($attribs) . '>';
$label = $this->translate($page->getLabel(), $page->getTextDomain());

Expand Down
4 changes: 2 additions & 2 deletions test/Helper/Navigation/BreadcrumbsTest.php
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ public function testRenderSuppliedContainerWithoutInterfering(): void
$this->_helper->setMinDepth(0);

$rendered1 = $this->getExpectedFileContents('bc/default.html');
$rendered2 = 'Site 2';
$rendered2 = '<span aria-current="page">Site 2</span>';

$expected = [
'registered' => $rendered1,
Expand Down Expand Up @@ -249,7 +249,7 @@ public function testLastBreadcrumbShouldBeEscaped(): void
],
]);

$expected = 'Live &amp; Learn';
$expected = '<span aria-current="page">Live &amp; Learn</span>';
$actual = $this->_helper->setMinDepth(0)->render($container);

$this->assertEquals($expected, $actual);
Expand Down
2 changes: 1 addition & 1 deletion test/Helper/Navigation/_files/expected/bc/acl.html
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<a href="page2">Page 2</a> &gt; <a href="page2&#x2F;page2_2">Page 2.2</a> &gt; Page 2.2.2
<a href="page2">Page 2</a> &gt; <a href="page2&#x2F;page2_2">Page 2.2</a> &gt; <span aria-current="page">Page 2.2.2</span>
2 changes: 1 addition & 1 deletion test/Helper/Navigation/_files/expected/bc/default.html
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<a href="page2">Page 2</a> &gt; <a href="page2&#x2F;page2_3">Page 2.3</a> &gt; <a href="page2&#x2F;page2_3&#x2F;page2_3_3">Page 2.3.3</a> &gt; Page 2.3.3.1
<a href="page2">Page 2</a> &gt; <a href="page2&#x2F;page2_3">Page 2.3</a> &gt; <a href="page2&#x2F;page2_3&#x2F;page2_3_3">Page 2.3.3</a> &gt; <span aria-current="page">Page 2.3.3.1</span>
2 changes: 1 addition & 1 deletion test/Helper/Navigation/_files/expected/bc/linklast.html
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<a href="page2">Page 2</a> &gt; <a href="page2&#x2F;page2_3">Page 2.3</a> &gt; <a href="page2&#x2F;page2_3&#x2F;page2_3_3">Page 2.3.3</a> &gt; <a href="page2&#x2F;page2_3&#x2F;page2_3_3&#x2F;1">Page 2.3.3.1</a>
<a href="page2">Page 2</a> &gt; <a href="page2&#x2F;page2_3">Page 2.3</a> &gt; <a href="page2&#x2F;page2_3&#x2F;page2_3_3">Page 2.3.3</a> &gt; <a href="page2&#x2F;page2_3&#x2F;page2_3_3&#x2F;1" aria-current="page">Page 2.3.3.1</a>
2 changes: 1 addition & 1 deletion test/Helper/Navigation/_files/expected/bc/maxdepth.html
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<a href="page2">Page 2</a> &gt; Page 2.3
<a href="page2">Page 2</a> &gt; <span aria-current="page">Page 2.3</span>
2 changes: 1 addition & 1 deletion test/Helper/Navigation/_files/expected/bc/separator.html
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<a href="page2">Page 2</a>foo<a href="page2&#x2F;page2_3">Page 2.3</a>foo<a href="page2&#x2F;page2_3&#x2F;page2_3_3">Page 2.3.3</a>fooPage 2.3.3.1
<a href="page2">Page 2</a>foo<a href="page2&#x2F;page2_3">Page 2.3</a>foo<a href="page2&#x2F;page2_3&#x2F;page2_3_3">Page 2.3.3</a>foo<span aria-current="page">Page 2.3.3.1</span>
2 changes: 1 addition & 1 deletion test/Helper/Navigation/_files/expected/bc/textdomain.html
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<a href="page2">TextDomain1 2</a> &gt; <a href="page2&#x2F;page2_3">Page 2.3</a> &gt; <a href="page2&#x2F;page2_3&#x2F;page2_3_3">TextDomain1 2.3.3</a> &gt; TextDomain2 2.3.3.1
<a href="page2">TextDomain1 2</a> &gt; <a href="page2&#x2F;page2_3">Page 2.3</a> &gt; <a href="page2&#x2F;page2_3&#x2F;page2_3_3">TextDomain1 2.3.3</a> &gt; <span aria-current="page">TextDomain2 2.3.3.1</span>
2 changes: 1 addition & 1 deletion test/Helper/Navigation/_files/expected/bc/translated.html
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<a href="page2">Side 2</a> &gt; <a href="page2&#x2F;page2_3">Side 2.3</a> &gt; <a href="page2&#x2F;page2_3&#x2F;page2_3_3">Page 2.3.3</a> &gt; Side 2.3.3.1
<a href="page2">Side 2</a> &gt; <a href="page2&#x2F;page2_3">Side 2.3</a> &gt; <a href="page2&#x2F;page2_3&#x2F;page2_3_3">Page 2.3.3</a> &gt; <span aria-current="page">Side 2.3.3.1</span>
2 changes: 1 addition & 1 deletion test/Helper/Navigation/_files/expected/menu/acl.html
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
<a href="page2&#x2F;page2_2&#x2F;page2_2_1">Page 2.2.1</a>
</li>
<li class="active">
<a href="page2&#x2F;page2_2&#x2F;page2_2_2">Page 2.2.2</a>
<a href="page2&#x2F;page2_2&#x2F;page2_2_2" aria-current="page">Page 2.2.2</a>
</li>
</ul>
</li>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
<a href="page2&#x2F;page2_2&#x2F;page2_2_1">Page 2.2.1</a>
</li>
<li class="active">
<a href="page2&#x2F;page2_2&#x2F;page2_2_2">Page 2.2.2</a>
<a href="page2&#x2F;page2_2&#x2F;page2_2_2" aria-current="page">Page 2.2.2</a>
</li>
</ul>
</li>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
<a href="page2&#x2F;page2_2&#x2F;page2_2_1">Page 2.2.1</a>
</li>
<li class="active">
<a href="page2&#x2F;page2_2&#x2F;page2_2_2">Page 2.2.2</a>
<a href="page2&#x2F;page2_2&#x2F;page2_2_2" aria-current="page">Page 2.2.2</a>
</li>
</ul>
</li>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<a href="site1">Site 1</a>
</li>
<li class="active">
<a href="site2">Site 2</a>
<a href="site2" aria-current="page">Site 2</a>
</li>
<li>
<a href="site3">Site 3</a>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<a href="site1">Site 1</a>
</li>
<li class="active">
<a href="site2">Site 2</a>
<a href="site2" aria-current="page">Site 2</a>
</li>
<li>
<a href="site3">Site 3</a>
Expand Down
2 changes: 1 addition & 1 deletion test/Helper/Navigation/_files/expected/menu/bothdepts.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<a href="page2&#x2F;page2_2&#x2F;page2_2_1">Page 2.2.1</a>
</li>
<li class="active">
<a href="page2&#x2F;page2_2&#x2F;page2_2_2">Page 2.2.2</a>
<a href="page2&#x2F;page2_2&#x2F;page2_2_2" aria-current="page">Page 2.2.2</a>
</li>
</ul>
</li>
Expand Down
2 changes: 1 addition & 1 deletion test/Helper/Navigation/_files/expected/menu/css.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<a href="site1">Site 1</a>
</li>
<li class="active">
<a href="site2">Site 2</a>
<a href="site2" aria-current="page">Site 2</a>
</li>
<li>
<a href="site3">Site 3</a>
Expand Down
2 changes: 1 addition & 1 deletion test/Helper/Navigation/_files/expected/menu/css2.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<a href="site1">Site 1</a>
</li>
<li class="activated">
<a href="site2">Site 2</a>
<a href="site2" aria-current="page">Site 2</a>
</li>
<li>
<a href="site3">Site 3</a>
Expand Down
6 changes: 3 additions & 3 deletions test/Helper/Navigation/_files/expected/menu/default1.html
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
<a href="page2&#x2F;page2_2&#x2F;page2_2_1">Page 2.2.1</a>
</li>
<li class="active">
<a href="page2&#x2F;page2_2&#x2F;page2_2_2">Page 2.2.2</a>
<a href="page2&#x2F;page2_2&#x2F;page2_2_2" aria-current="page">Page 2.2.2</a>
</li>
</ul>
</li>
Expand All @@ -37,10 +37,10 @@
<a href="page2&#x2F;page2_3&#x2F;page2_3_3">Page 2.3.3</a>
<ul>
<li class="active">
<a href="page2&#x2F;page2_3&#x2F;page2_3_3&#x2F;1">Page 2.3.3.1</a>
<a href="page2&#x2F;page2_3&#x2F;page2_3_3&#x2F;1" aria-current="page">Page 2.3.3.1</a>
</li>
<li class="active">
<a href="page2&#x2F;page2_3&#x2F;page2_3_3&#x2F;2">Page 2.3.3.2</a>
<a href="page2&#x2F;page2_3&#x2F;page2_3_3&#x2F;2" aria-current="page">Page 2.3.3.2</a>
</li>
</ul>
</li>
Expand Down
2 changes: 1 addition & 1 deletion test/Helper/Navigation/_files/expected/menu/default2.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<a href="site1">Site 1</a>
</li>
<li class="active">
<a href="site2">Site 2</a>
<a href="site2" aria-current="page">Site 2</a>
</li>
<li>
<a href="site3">Site 3</a>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<a href="site1">Site 1</a>
</li>
<li class="active">
<a href="site2">Site 2</a>
<a href="site2" aria-current="page">Site 2</a>
</li>
<li>
<a href="site3">Site 3</a>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<a href="site1">Site 1</a>
</li>
<li class="active">
<a href="site2">Site 2</a>
<a href="site2" aria-current="page">Site 2</a>
</li>
<li>
<a href="site3">Site 3</a>
Expand Down
6 changes: 3 additions & 3 deletions test/Helper/Navigation/_files/expected/menu/indent4.html
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
<a href="page2&#x2F;page2_2&#x2F;page2_2_1">Page 2.2.1</a>
</li>
<li class="active">
<a href="page2&#x2F;page2_2&#x2F;page2_2_2">Page 2.2.2</a>
<a href="page2&#x2F;page2_2&#x2F;page2_2_2" aria-current="page">Page 2.2.2</a>
</li>
</ul>
</li>
Expand All @@ -37,10 +37,10 @@
<a href="page2&#x2F;page2_3&#x2F;page2_3_3">Page 2.3.3</a>
<ul>
<li class="active">
<a href="page2&#x2F;page2_3&#x2F;page2_3_3&#x2F;1">Page 2.3.3.1</a>
<a href="page2&#x2F;page2_3&#x2F;page2_3_3&#x2F;1" aria-current="page">Page 2.3.3.1</a>
</li>
<li class="active">
<a href="page2&#x2F;page2_3&#x2F;page2_3_3&#x2F;2">Page 2.3.3.2</a>
<a href="page2&#x2F;page2_3&#x2F;page2_3_3&#x2F;2" aria-current="page">Page 2.3.3.2</a>
</li>
</ul>
</li>
Expand Down
6 changes: 3 additions & 3 deletions test/Helper/Navigation/_files/expected/menu/indent8.html
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
<a href="page2&#x2F;page2_2&#x2F;page2_2_1">Page 2.2.1</a>
</li>
<li class="active">
<a href="page2&#x2F;page2_2&#x2F;page2_2_2">Page 2.2.2</a>
<a href="page2&#x2F;page2_2&#x2F;page2_2_2" aria-current="page">Page 2.2.2</a>
</li>
</ul>
</li>
Expand All @@ -37,10 +37,10 @@
<a href="page2&#x2F;page2_3&#x2F;page2_3_3">Page 2.3.3</a>
<ul>
<li class="active">
<a href="page2&#x2F;page2_3&#x2F;page2_3_3&#x2F;1">Page 2.3.3.1</a>
<a href="page2&#x2F;page2_3&#x2F;page2_3_3&#x2F;1" aria-current="page">Page 2.3.3.1</a>
</li>
<li class="active">
<a href="page2&#x2F;page2_3&#x2F;page2_3_3&#x2F;2">Page 2.3.3.2</a>
<a href="page2&#x2F;page2_3&#x2F;page2_3_3&#x2F;2" aria-current="page">Page 2.3.3.2</a>
</li>
</ul>
</li>
Expand Down
6 changes: 3 additions & 3 deletions test/Helper/Navigation/_files/expected/menu/mindepth.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<a href="page2&#x2F;page2_2&#x2F;page2_2_1">Page 2.2.1</a>
</li>
<li class="active">
<a href="page2&#x2F;page2_2&#x2F;page2_2_2">Page 2.2.2</a>
<a href="page2&#x2F;page2_2&#x2F;page2_2_2" aria-current="page">Page 2.2.2</a>
</li>
</ul>
</li>
Expand All @@ -26,10 +26,10 @@
<a href="page2&#x2F;page2_3&#x2F;page2_3_3">Page 2.3.3</a>
<ul>
<li class="active">
<a href="page2&#x2F;page2_3&#x2F;page2_3_3&#x2F;1">Page 2.3.3.1</a>
<a href="page2&#x2F;page2_3&#x2F;page2_3_3&#x2F;1" aria-current="page">Page 2.3.3.1</a>
</li>
<li class="active">
<a href="page2&#x2F;page2_3&#x2F;page2_3_3&#x2F;2">Page 2.3.3.2</a>
<a href="page2&#x2F;page2_3&#x2F;page2_3_3&#x2F;2" aria-current="page">Page 2.3.3.2</a>
</li>
</ul>
</li>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<a href="page2&#x2F;page2_2">Page 2.2</a>
<ul>
<li class="active">
<a href="page2&#x2F;page2_2&#x2F;page2_2_2">Page 2.2.2</a>
<a href="page2&#x2F;page2_2&#x2F;page2_2_2" aria-current="page">Page 2.2.2</a>
</li>
</ul>
</li>
Expand All @@ -17,10 +17,10 @@
<a href="page2&#x2F;page2_3&#x2F;page2_3_3">Page 2.3.3</a>
<ul>
<li class="active">
<a href="page2&#x2F;page2_3&#x2F;page2_3_3&#x2F;1">Page 2.3.3.1</a>
<a href="page2&#x2F;page2_3&#x2F;page2_3_3&#x2F;1" aria-current="page">Page 2.3.3.1</a>
</li>
<li class="active">
<a href="page2&#x2F;page2_3&#x2F;page2_3_3&#x2F;2">Page 2.3.3.2</a>
<a href="page2&#x2F;page2_3&#x2F;page2_3_3&#x2F;2" aria-current="page">Page 2.3.3.2</a>
</li>
</ul>
</li>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<a href="site1">Site 1</a>
</li>
<li class="active&#x20;foobar">
<a href="site2">Site 2</a>
<a href="site2" aria-current="page">Site 2</a>
</li>
<li>
<a href="site3">Site 3</a>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<a href="page2&#x2F;page2_2">Page 2.2</a>
<ul>
<li class="active">
<a href="page2&#x2F;page2_2&#x2F;page2_2_2">Page 2.2.2</a>
<a href="page2&#x2F;page2_2&#x2F;page2_2_2" aria-current="page">Page 2.2.2</a>
</li>
</ul>
</li>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<a href="page2&#x2F;page2_2">Page 2.2</a>
<ul>
<li class="active">
<a href="page2&#x2F;page2_2&#x2F;page2_2_2">Page 2.2.2</a>
<a href="page2&#x2F;page2_2&#x2F;page2_2_2" aria-current="page">Page 2.2.2</a>
</li>
</ul>
</li>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<a href="page2&#x2F;page2_2">Page 2.2</a>
<ul>
<li class="active">
<a href="page2&#x2F;page2_2&#x2F;page2_2_2">Page 2.2.2</a>
<a href="page2&#x2F;page2_2&#x2F;page2_2_2" aria-current="page">Page 2.2.2</a>
</li>
</ul>
</li>
Expand All @@ -14,10 +14,10 @@
<a href="page2&#x2F;page2_3&#x2F;page2_3_3">Page 2.3.3</a>
<ul>
<li class="active">
<a href="page2&#x2F;page2_3&#x2F;page2_3_3&#x2F;1">Page 2.3.3.1</a>
<a href="page2&#x2F;page2_3&#x2F;page2_3_3&#x2F;1" aria-current="page">Page 2.3.3.1</a>
</li>
<li class="active">
<a href="page2&#x2F;page2_3&#x2F;page2_3_3&#x2F;2">Page 2.3.3.2</a>
<a href="page2&#x2F;page2_3&#x2F;page2_3_3&#x2F;2" aria-current="page">Page 2.3.3.2</a>
</li>
</ul>
</li>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<ul class="navigation">
<li class="active">
<a href="page2&#x2F;page2_3&#x2F;page2_3_3&#x2F;1">Page 2.3.3.1</a>
<a href="page2&#x2F;page2_3&#x2F;page2_3_3&#x2F;1" aria-current="page">Page 2.3.3.1</a>
</li>
<li class="active">
<a href="page2&#x2F;page2_3&#x2F;page2_3_3&#x2F;2">Page 2.3.3.2</a>
<a href="page2&#x2F;page2_3&#x2F;page2_3_3&#x2F;2" aria-current="page">Page 2.3.3.2</a>
</li>
</ul>
6 changes: 3 additions & 3 deletions test/Helper/Navigation/_files/expected/menu/textdomain.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<a href="page2&#x2F;page2_2&#x2F;page2_2_1">Page 2.2.1</a>
</li>
<li class="active">
<a href="page2&#x2F;page2_2&#x2F;page2_2_2">Page 2.2.2</a>
<a href="page2&#x2F;page2_2&#x2F;page2_2_2" aria-current="page">Page 2.2.2</a>
</li>
</ul>
</li>
Expand All @@ -34,10 +34,10 @@
<a href="page2&#x2F;page2_3&#x2F;page2_3_3">TextDomain1 2.3.3</a>
<ul>
<li class="active">
<a href="page2&#x2F;page2_3&#x2F;page2_3_3&#x2F;1">TextDomain2 2.3.3.1</a>
<a href="page2&#x2F;page2_3&#x2F;page2_3_3&#x2F;1" aria-current="page">TextDomain2 2.3.3.1</a>
</li>
<li class="active">
<a href="page2&#x2F;page2_3&#x2F;page2_3_3&#x2F;2">Page 2.3.3.2</a>
<a href="page2&#x2F;page2_3&#x2F;page2_3_3&#x2F;2" aria-current="page">Page 2.3.3.2</a>
</li>
</ul>
</li>
Expand Down
Loading

0 comments on commit b7e66e1

Please sign in to comment.