-
Notifications
You must be signed in to change notification settings - Fork 83
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
add initial test case and rule #1676
- Loading branch information
Showing
3 changed files
with
237 additions
and
50 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
198 changes: 198 additions & 0 deletions
198
.../test/v2/checker/accessibility/rules/element_tabbable_unobscured_ruleunit/unobscured.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,198 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | ||
| <title>Using CSS margin and scroll-margin to un-obscure content</title> | ||
| <style> | ||
| .wrapper { | ||
| display:grid; | ||
| gap:1rem; | ||
| grid-template-columns:repeat(9, 1fr); | ||
| grid-template-rows:8rem auto minmax(10rem, max-content); | ||
| height:100vh; | ||
| } | ||
|
|
||
| .wrapper > * { | ||
| border:1px solid var(--black); | ||
| padding:1rem; | ||
| } | ||
|
|
||
| header { | ||
| grid-column:1 / -1; | ||
| grid-row:1; | ||
| } | ||
|
|
||
| main { | ||
| grid-column:1 / 8; | ||
| } | ||
|
|
||
| aside { | ||
| grid-column:8 / 10; | ||
| } | ||
|
|
||
| /**footer { | ||
| grid-column:1 / -1; | ||
| }*/ | ||
|
|
||
| @media (max-width:70rem) { | ||
| main { | ||
| grid-column:1 / -1; | ||
| } | ||
|
|
||
| aside { | ||
| grid-column:1 / -1; | ||
| } | ||
| } | ||
|
|
||
| .fixed-position-banner { | ||
| background:var(--banner-background); | ||
| border:1px solid var(--banner-border); | ||
| height:11rem; | ||
| inset-block-end:0; | ||
| margin-block-end:1rem; | ||
| padding:1rem; | ||
| position:relative; | ||
| width:calc(100vw - 1rem); | ||
| } | ||
|
|
||
| @media (min-width:70rem), (min-height:60rem) { | ||
| .fixed-position-banner { | ||
| margin-block-end:0; | ||
| position:fixed; | ||
| } | ||
|
|
||
| .banner-open { | ||
| margin-block-end:14rem; | ||
| } | ||
|
|
||
| .banner-open a { | ||
| scroll-margin-block-end:15.5rem; | ||
| } | ||
| } | ||
|
|
||
| .footer { | ||
| position: fixed; | ||
| left: 0; | ||
| bottom: 0; | ||
| width: 100%; | ||
| background-color: lightgray; | ||
| color: black; | ||
| text-align: center; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <dialog class="fixed-position-banner"> | ||
| <h2 tabindex="-1">Fixed-Position Banner</h2> | ||
| <div><button aria-label="close fixed-position banner" class="close-banner" type="button"> | ||
| Close | ||
| </button></div> | ||
| </dialog> | ||
| <div class="wrapper"> | ||
| <header> | ||
| <h1>Header Content</h1> | ||
| </header> | ||
| <main> | ||
| <h1>Main Content</h1> | ||
| <div ></div> | ||
| <h2 style="margin-top: 5rem;"> | ||
| <a | ||
| href="https://seirdy.one/notes/2023/07/22/polygot-xhtml5/" | ||
| itemprop="url" | ||
| class="u-url url" | ||
| rel="bookmark" | ||
| > | ||
| Test link 1 | ||
| </a> | ||
| </h2> | ||
|
|
||
| <h2 style="margin-top: 20rem;"> | ||
| <a | ||
| href="https://seirdy.one/notes/2023/07/22/polygot-xhtml5/" | ||
| itemprop="url" | ||
| class="u-url url" | ||
| rel="bookmark" | ||
| > | ||
| Test link 2 | ||
| </a> | ||
| </h2> | ||
|
|
||
| <h2 style="margin-top: 10rem;"> | ||
| <a | ||
| href="https://seirdy.one/notes/2023/07/22/polygot-xhtml5/" | ||
| itemprop="url" | ||
| class="u-url url" | ||
| rel="bookmark" | ||
| > | ||
| Test link 3 | ||
| </a> | ||
| </h2> | ||
| </main> | ||
|
|
||
| <footer class="footer"> | ||
| <h2>Footer Content</h2> | ||
| <p><a href="https://example.com">Here's an example link in the footer</a>.</p> | ||
| </footer> | ||
| </div> | ||
| <script> | ||
| document.addEventListener("DOMContentLoaded", function(e){ | ||
| const cookieBanner = document.querySelector(".fixed-position-banner"); | ||
| const closeBannerBtn = document.querySelector(".close-banner"); | ||
| const pageBody = document.querySelector("body"); | ||
|
|
||
| cookieBanner.show(); | ||
|
|
||
| if(cookieBanner.hasAttribute("open")){ | ||
| pageBody.classList.add("banner-open"); | ||
| } | ||
|
|
||
| closeBannerBtn.addEventListener("click", function(e){ | ||
| cookieBanner.close(); | ||
| pageBody.classList.remove("banner-open"); | ||
| }, false); | ||
| }); | ||
| </script> | ||
|
|
||
| <script> | ||
| UnitTest = { | ||
| ruleIds: ["element_tabbable_unobscured"], | ||
| results: [ | ||
| { | ||
| "ruleId": "element_tabbable_visible", | ||
| "value": [ | ||
| "INFORMATION", | ||
| "PASS" | ||
| ], | ||
| "path": { | ||
| "dom": "/html[1]/body[1]/button[1]", | ||
| "aria": "/document[1]/button[1]" | ||
| }, | ||
| "reasonId": "pass", | ||
| "message": "The tabbable element is visible on the screen", | ||
| "messageArgs": [], | ||
| "apiArgs": [], | ||
| "category": "Accessibility" | ||
| }, | ||
| { | ||
| "ruleId": "element_tabbable_visible", | ||
| "value": [ | ||
| "INFORMATION", | ||
| "PASS" | ||
| ], | ||
| "path": { | ||
| "dom": "/html[1]/body[1]/a[1]", | ||
| "aria": "/document[1]/link[1]" | ||
| }, | ||
| "reasonId": "pass", | ||
| "message": "The tabbable element is visible on the screen", | ||
| "messageArgs": [], | ||
| "apiArgs": [], | ||
| "category": "Accessibility" | ||
| } | ||
| ] | ||
| } | ||
| </script> | ||
| </body> | ||
| </html> | ||
|
|