Skip to content
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

Jump to bottom

Do not show hidden landmarks #85

Merged
merged 2 commits into from Sep 4, 2017
Merged

Do not show hidden landmarks #85

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8dc88f9
Add some failing tests for hidden landmarks
matatk Sep 4, 2017
abdaefc
Test for hidden elements
matatk Sep 4, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
22 changes: 14 additions & 8 deletions src/static/content.finder.js
View file
Open in desktop
Expand Up @@ -76,13 +76,6 @@ function LandmarksFinder(win, doc) {
}
}

// forEach for NodeList (as opposed to Arrays)
function doForEach(nodeList, callback) {
for (let i = 0; i < nodeList.length; i++) {
callback(nodeList[i])
}
}


//
// Functions that refer to document or window
Expand All @@ -92,8 +85,10 @@ function LandmarksFinder(win, doc) {
function getLandmarks(element, depth) {
if (!element) return

doForEach(element.childNodes, function(elementChild) {
element.childNodes.forEach(function(elementChild) {
if (elementChild.nodeType === win.Node.ELEMENT_NODE) {
if (isHidden(elementChild)) return

// Support HTML5 elements' native roles
let role = getRoleFromTagNameAndContainment(elementChild)

Expand Down Expand Up @@ -220,6 +215,17 @@ function LandmarksFinder(win, doc) {
return true
}

function isHidden(element) {
const style = win.getComputedStyle(element)
if (element.hasAttribute('hidden')
|| style.visibility === 'hidden'
|| style.display === 'none' ) {
return true
}

return false
}


//
// Keeping track of landmark navigation
Expand Down
9 changes: 9 additions & 0 deletions test/data/hidden-by-css-display-none-inline.json
View file
Open in desktop
@@ -0,0 +1,9 @@
{
"expected": [
{
"depth": 0,
"role": "main",
"label": null
}
]
}
9 changes: 9 additions & 0 deletions test/data/hidden-by-css-display-none-nested.json
View file
Open in desktop
@@ -0,0 +1,9 @@
{
"expected": [
{
"depth": 0,
"role": "main",
"label": null
}
]
}
9 changes: 9 additions & 0 deletions test/data/hidden-by-css-display-none.json
View file
Open in desktop
@@ -0,0 +1,9 @@
{
"expected": [
{
"depth": 0,
"role": "main",
"label": null
}
]
}
9 changes: 9 additions & 0 deletions test/data/hidden-by-css-visibility-hidden.json
View file
Open in desktop
@@ -0,0 +1,9 @@
{
"expected": [
{
"depth": 0,
"role": "main",
"label": null
}
]
}
9 changes: 9 additions & 0 deletions test/data/hidden-by-html-hidden-attribute-nested.json
View file
Open in desktop
@@ -0,0 +1,9 @@
{
"expected": [
{
"depth": 0,
"role": "main",
"label": null
}
]
}
9 changes: 9 additions & 0 deletions test/data/hidden-by-html-hidden-attribute.json
View file
Open in desktop
@@ -0,0 +1,9 @@
{
"expected": [
{
"depth": 0,
"role": "main",
"label": null
}
]
}
15 changes: 15 additions & 0 deletions test/fixtures/hidden-by-css-display-none-inline.html
View file
Open in desktop
@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<header style="display: none;">
<h1>Visually-hidden header</h1>
</header>
<main>
<p>Main content</p>
</main>
</body>
</html>
22 changes: 22 additions & 0 deletions test/fixtures/hidden-by-css-display-none-nested.html
View file
Open in desktop
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.hide {
display: none;
}
</style>
</head>
<body>
<div class="hide">
<header>
<h1>Visually-hidden header</h1>
</header>
</div>
<main>
<p>Main content</p>
</main>
</body>
</html>
20 changes: 20 additions & 0 deletions test/fixtures/hidden-by-css-display-none.html
View file
Open in desktop
@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
header {
display: none;
}
</style>
</head>
<body>
<header>
<h1>Visually-hidden header</h1>
</header>
<main>
<p>Main content</p>
</main>
</body>
</html>
20 changes: 20 additions & 0 deletions test/fixtures/hidden-by-css-visibility-hidden.html
View file
Open in desktop
@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
footer {
visibility: hidden;
}
</style>
</head>
<body>
<main>
<p>Main content</p>
</main>
<footer>
<p>Visually-hidden footer</p>
</footer>
</body>
</html>
17 changes: 17 additions & 0 deletions test/fixtures/hidden-by-html-hidden-attribute-nested.html
View file
Open in desktop
@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div hidden>
<header>
<h1>Visually-hidden header</h1>
</header>
</div>
<main>
<p>Main content</p>
</main>
</body>
</html>
15 changes: 15 additions & 0 deletions test/fixtures/hidden-by-html-hidden-attribute.html
View file
Open in desktop
@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<header hidden>
<h1>Visually-hidden header</h1>
</header>
<main>
<p>Main content</p>
</main>
</body>
</html>