diff options
| author | Vosjedev <vosje@vosjedev.net> | 2025-11-09 10:59:11 +0100 |
|---|---|---|
| committer | Vosjedev <vosje@vosjedev.net> | 2025-11-09 10:59:11 +0100 |
| commit | de667cd00ee30712480bdbc2cd98b83fbb2b966c (patch) | |
| tree | dcfdfe5d11bb50487a850584076a8bea3d8b2986 | |
| parent | 3752644571c981d81d8fa702f507dc44efcd14de (diff) | |
| download | acit-de667cd00ee30712480bdbc2cd98b83fbb2b966c.tar.gz acit-de667cd00ee30712480bdbc2cd98b83fbb2b966c.tar.bz2 acit-de667cd00ee30712480bdbc2cd98b83fbb2b966c.tar.xz | |
html/css: add skip navigation links to project pages
another commit in the 'larger amount' of accessibility feedback commits
| -rw-r--r-- | html/projectpage.html | 11 | ||||
| -rw-r--r-- | html/style.css | 29 | ||||
| -rw-r--r-- | src/acit/html.py | 40 |
3 files changed, 74 insertions, 6 deletions
diff --git a/html/projectpage.html b/html/projectpage.html index 3db80ca..5ffc71d 100644 --- a/html/projectpage.html +++ b/html/projectpage.html @@ -7,6 +7,11 @@ <link href="/style" rel="stylesheet"> </head> <body> + <div id="skiptocontent"> + <a href="#bugsearch">Skip to search</a> + <a href="#results">Skip to issue listing</a> + </div> + <nav class="formattedheader"> <span class="left"> <a href="/{project}/">{project}</a> @@ -26,7 +31,7 @@ <div class="projectpage"> - <div id="left"> + <article id="left"> <section id="readme"> {readme} </section> @@ -66,7 +71,7 @@ </div> - <div id="right"> + <article id="right"> <form id="bugsearch"> <div id="searchbar"> <input type="text" name="subject" value="{filter_subject}" placeholder="<filter by subject>"> @@ -88,7 +93,7 @@ <input type="checkbox" name="unconf" {filter_unconf} id="unconf"><label for="unconf">unconfirmed</label> </div> </form> - <table> + <table id="results"> <tr> <th>#</th> <th>Subject</th> <th>Status</th> <th>Type</th></tr> {maillist} </table> diff --git a/html/style.css b/html/style.css index 2689098..08c038e 100644 --- a/html/style.css +++ b/html/style.css @@ -305,3 +305,32 @@ h1, h2 { } + +/* credits to webaim.org's css for the base */ +#skiptocontent a { + padding:6px; + position: absolute; + top:-40px; + color: var(--background-inverted); + border-right:1px solid white; + border-bottom:1px solid white; + background: var(--colour-inverted); + -webkit-transition: top .5s ease-out; + transition: top .5s ease-out; + z-index: 100; +} + +#skiptocontent a:focus { + position:absolute; + top:0px; + outline-color:transparent; + -webkit-transition: top .05s ease-in; + transition: top .05s ease-in; +} + +@media (prefers-reduced-motion: reduce) { + #skiptocontent a { + transition-duration: 0.001ms !important; + } +} + diff --git a/src/acit/html.py b/src/acit/html.py index a459b82..36d77ab 100644 --- a/src/acit/html.py +++ b/src/acit/html.py @@ -65,6 +65,11 @@ projectpage=""" <link href="/style" rel="stylesheet"> </head> <body> + <div id="skiptocontent"> + <a href="#bugsearch">Skip to search</a> + <a href="#results">Skip to issue listing</a> + </div> + <nav class="formattedheader"> <span class="left"> <a href="/{project}/">{project}</a> @@ -84,7 +89,7 @@ projectpage=""" <div class="projectpage"> - <div id="left"> + <article id="left"> <section id="readme"> {readme} </section> @@ -124,7 +129,7 @@ projectpage=""" </div> - <div id="right"> + <article id="right"> <form id="bugsearch"> <div id="searchbar"> <input type="text" name="subject" value="{filter_subject}" placeholder="<filter by subject>"> @@ -146,7 +151,7 @@ projectpage=""" <input type="checkbox" name="unconf" {filter_unconf} id="unconf"><label for="unconf">unconfirmed</label> </div> </form> - <table> + <table id="results"> <tr> <th>#</th> <th>Subject</th> <th>Status</th> <th>Type</th></tr> {maillist} </table> @@ -465,4 +470,33 @@ h1, h2 { } + +/* credits to webaim.org's css for the base */ +#skiptocontent a { + padding:6px; + position: absolute; + top:-40px; + color: var(--background-inverted); + border-right:1px solid white; + border-bottom:1px solid white; + background: var(--colour-inverted); + -webkit-transition: top .5s ease-out; + transition: top .5s ease-out; + z-index: 100; +} + +#skiptocontent a:focus { + position:absolute; + top:0px; + outline-color:transparent; + -webkit-transition: top .05s ease-in; + transition: top .05s ease-in; +} + +@media (prefers-reduced-motion: reduce) { + #skiptocontent a { + transition-duration: 0.001ms !important; + } +} + """ |