LOL/labolyon.fr
7
0 Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

tabindex, style :focus et bug associés pour accesibilité clavier (et visuelle au passage)

Browse Source
This commit is contained in:
vgaNAR6ta committed 2026-09-28 22:35:45 +02:00
1 parent 210b06d20f
commit 8639e7769f
6 files changed
+87 -26
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

affiches/mardis/index.html
+2 -1
View File
@@ -36,6 +36,7 @@
align-items: flex-start;
justify-content: flex-start;
background-color: var(--mardi-main-color);
filter: none !important;
@container( width > 650px ){
flex-direction: row;
@@ -55,7 +56,7 @@
box-sizing: border-box;
overflow: hidden;
gap: 3.33px;
padding-top: 3.33px;
padding-top: 0;
img{
max-width: 34%;
index.html
+20 -20
View File
@@ -37,10 +37,10 @@
<nav aria-label="outils numériques du LOL">
<ul>
<li><a href="https://git.labolyon.fr/explore/repos" class="textBtnStyle" >Git</a></li>
<li><a href="https://wiki.labolyon.fr/" class="textBtnStyle" >Wiki</a></li>
<li><a href="https://matrix.to/#/#lol-space:chat.labolyon.fr" class="textBtnStyle" >Matrix</a></li>
<li><a href="https://nerdculture.de/@labolyon" class="textBtnStyle" >Fediverse</a></li>
<li><a tabindex="0" href="https://git.labolyon.fr/explore/repos" class="textBtnStyle" >Git</a></li>
<li><a tabindex="0" href="https://wiki.labolyon.fr/" class="textBtnStyle" >Wiki</a></li>
<li><a tabindex="0" href="https://matrix.to/#/#lol-space:chat.labolyon.fr" class="textBtnStyle" >Matrix</a></li>
<li><a tabindex="0" href="https://nerdculture.de/@labolyon" class="textBtnStyle" >Fediverse</a></li>
</ul>
</nav>
</header>
@@ -90,9 +90,9 @@
</address>
<ul aria-label="Téléphones du lieu">
<li> &#128439; Fax : <a href="tel:+33482533028">04 82 53 30 28</a></li>
<li> &#9990; Tel EPVPN : <a href="tel:5256">5256</a></li>
<li> &#128439; Fax EPVPN : <a href="tel:5257">5257</a></li>
<li> &#128439; Fax : <a tabindex="0" href="tel:+33482533028">04 82 53 30 28</a></li>
<li> &#9990; Tel EPVPN : <a tabindex="0" href="tel:5256">5256</a></li>
<li> &#128439; Fax EPVPN : <a tabindex="0" href="tel:5257">5257</a></li>
</ul>
</div>
@@ -124,24 +124,24 @@
</div>
<div id="extLinkSection" class="transparentBox" aria-label="Liens externes">
<a href="https://www.hackerspaces.org/" id="hackerLogo" aria-label="hackerspace.org est un site qui recense les hackerspaces en Europe">
<a tabindex="0" href="https://www.hackerspaces.org/" id="hackerLogo" aria-label="hackerspace.org est un site qui recense les hackerspaces en Europe">
<img src="assets/logo_hackerspaces_monde.png" aria-hidden="true" alt="">
</a>
</div>
<!-- MESSAGE DE BIENVENUE -->
<aside>
<button type="button" popovertarget="msgWindow" popoveraction="show" class="iconBtnStyle" id="openMsg" aria-label="ouvrir le message de bienvenue">
<button tabindex="0" type="button" popovertarget="msgWindow" popoveraction="show" class="iconBtnStyle" id="openMsg" aria-label="ouvrir le message de bienvenue">
<svg class="icon" viewBox="0 0 40.19 38.9" aria-hidden="true">
<path d="M33.56,0H0v38.9h40.19V0h-6.62ZM34.91,33.62H5.28V8.09l15.05,19.04,14.58-18.56v25.05ZM11.12,5.28h18.39l-9.25,12.02L11.12,5.28Z"/>
</svg>
</button>
<div id="msgWindow" popover="auto">
<dialog class="floatingWindow" aria-label="Message de bienvenue du LOL">
<dialog tabindex="-1" class="floatingWindow" aria-label="Message de bienvenue du LOL">
<h4 class="title">
Bienvenue sur le site du LOL!
<button class="iconBtnStyle" popovertarget="msgWindow" popoveraction="hide" aria-label="Fermer la fenêtre">
<button tabindex="0" class="iconBtnStyle" popovertarget="msgWindow" popoveraction="hide" aria-label="Fermer la fenêtre">
<svg viewBox="0 0 53.73 53.59" class="icon" aria-hidden="true">
<path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
</svg>
@@ -169,7 +169,7 @@
<small>Un capteur sur la porte d'entrée indique si le local est ouvert:</small>
</p>
</div>
<a href="status" class="textBtnStyle">Vérifier <br>si c'est<br> ouvert <br>&rarr; &rarr; &rarr;</a>
<a tabindex="0" href="status" class="textBtnStyle">Vérifier <br>si c'est<br> ouvert <br>&rarr; &rarr; &rarr;</a>
</section>
<aside id="extraContent">
<div id="aboutSection" class="solidBox" aria-label="Description de l'asso, de ses objectifs et valeurs">
@@ -209,7 +209,7 @@
<article class="solidBox">
<h4>Permanences du LOL</h4>
<p class="date">↻ Mardi & Samedi</p>
<a href="/affiches/mardis/" class="iconBtnStyle" aria-label="Plus d'infos sur cet évènement">
<a tabindex="0" href="/affiches/mardis/" class="iconBtnStyle" aria-label="Plus d'infos sur cet évènement">
<svg viewBox="0 0 53.73 53.59" class="icon" aria-hidden="true">
<path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
</svg>
@@ -219,7 +219,7 @@
<article class="solidBox">
<h4>Permanences du LOL</h4>
<p class="date">↻ Mardi & Samedi</p>
<a href="/affiches/mardis/" class="iconBtnStyle" aria-label="Plus d'infos sur cet évènement">
<a tabindex="0" href="/affiches/mardis/" class="iconBtnStyle" aria-label="Plus d'infos sur cet évènement">
<svg viewBox="0 0 53.73 53.59" class="icon" aria-hidden="true">
<path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
</svg>
@@ -229,7 +229,7 @@
<article class="solidBox">
<h4>Permanences du LOL</h4>
<p class="date">↻ Mardi & Samedi</p>
<a href="/affiches/mardis/" class="iconBtnStyle" aria-label="Plus d'infos sur cet évènement">
<a tabindex="0" href="/affiches/mardis/" class="iconBtnStyle" aria-label="Plus d'infos sur cet évènement">
<svg viewBox="0 0 53.73 53.59" class="icon" aria-hidden="true">
<path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
</svg>
@@ -239,7 +239,7 @@
<article class="solidBox">
<h4>Permanences du LOL</h4>
<p class="date">↻ Mardi & Samedi</p>
<a href="/affiches/mardis/" class="iconBtnStyle" aria-label="Plus d'infos sur cet évènement">
<a tabindex="0" href="/affiches/mardis/" class="iconBtnStyle" aria-label="Plus d'infos sur cet évènement">
<svg viewBox="0 0 53.73 53.59" class="icon" aria-hidden="true">
<path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
</svg>
@@ -249,16 +249,16 @@
</section>
</aside>
<footer id="webRingSection" aria-label="les copaines du LOL">
<a href="https://berthe.cc" aria-label="berthe.cc">
<a tabindex="0" href="https://berthe.cc" aria-label="berthe.cc">
<img src="/assets/webRings/berthe.cc.png" alt="une créature étrange verte et rouge avec 4 grands yeux et un inscription blanche : berthe.cc">
</a>
<a href="https://murmure.cafe" aria-label="murmure.café, collectif de réappropriation du web et des réseaux">
<a tabindex="0" href="https://murmure.cafe" aria-label="murmure.café, collectif de réappropriation du web et des réseaux">
<img src="/assets/webRings/murmure-cafe-webring.png" alt="une une tasse de café pixélisées en couleurs pastel avec des chevrons, quelques gouttes de café renversées et une écriture noire : murmure.café">
</a>
<a href="https://drags-nerds.net" aria-label="drags and nerds, collectif d'organisation d'évènements queer et nerds inclusifs">
<a tabindex="0" href="https://drags-nerds.net" aria-label="drags and nerds, collectif d'organisation d'évènements queer et nerds inclusifs">
<img class="needOutline" src="/assets/webRings/DNNwebring.gif" alt="les mots drags, and et nerds qui défilent dans tous les sens sur un fond rose et vert fluo qui clignote">
</a>
<a href="https://peertube.1312.media/" aria-label="the 1312 media collective">
<a tabindex="0" href="https://peertube.1312.media/" aria-label="the 1312 media collective">
<img src="/assets/webRings/1312.media-webring.png" alt="le logo antifasciste et un texte rouge très large, the 1312 media collective">
</a>
</footer>
js/events.js
+3
View File
@@ -39,9 +39,12 @@ function createEntry(title, date, html, style){
const newEntry = document.createElement('details');
const newSummary = document.createElement('summary');
newSummary.append(title, date);
newSummary.setAttribute('tabindex', '0');
newEntry.append(newSummary);
html.setAttribute('tabindex', '-1');
newEntry.append(html);
newEntry.name = "eventList"
style/common.css
+8
View File
@@ -27,6 +27,10 @@
border-color: var(--back-color);
}
.textBtnStyle:focus{
filter: hue-rotate(180deg);
}
.iconBtnStyle{
display: flex;
flex-direction: column;
@@ -56,6 +60,10 @@
animation: none;
}
.iconBtnStyle:focus{
filter: hue-rotate(180deg);
}
@media(min-width: 1300px){
.textBtnStyle{
font-size: 19px;
style/default.css
+9 -1
View File
@@ -6,7 +6,7 @@ input {
a{
text-decoration: none;
color: inherit;
cursor: url(../assets/cursor/lien.png) 2 2 auto;
cursor: url(../assets/cursor/lien.png) 2 2 , auto;
}
@@ -34,3 +34,11 @@ ul,ol {
dialog{
padding: 0;
}
dialog:focus{
outline:none;
filter: hue-rotate(180deg);
}
button:focus, a:focus, summary:focus{
outline:none;
}
style/main.css
+45 -4
View File
@@ -158,6 +158,10 @@ main{
address {
margin-bottom: 2em;
}
ul li a:focus{
filter: hue-rotate(180deg);
}
}
aside{
@@ -184,7 +188,7 @@ main{
cursor: url(../assets/cursor/msg.png) 2 16 , auto;
}
#openMsg:hover{
#openMsg:hover, #openMsg:focus{
animation: none;
}
@@ -373,6 +377,14 @@ main{
}
}
a:focus, a:hover{
background-color: var(--back-color);
img{
filter: invert();
}
}
}
#adhesionSection{
@@ -583,6 +595,10 @@ main{
border-color: var(--back-color);
}
.solidBox:has(details){
overflow: hidden;
}
.solidBox:has(details[open]){
color: var(--back-color);
background-color: var(--main-color);
@@ -595,6 +611,10 @@ main{
margin-right: 16.1px;
width: calc(100% - 32.2px);
summary{
background-color: var(--main-color);
}
}
article:first-of-type,
@@ -652,13 +672,14 @@ main{
box-sizing: border-box;
list-style-type: none;
padding: 16.1px;
background-color: var(--back-color);
cursor: url(../assets/cursor/details.png) 2 16 , auto;
cursor: url(../assets/cursor/default.png) 2 16 , auto;
}
&:not([open]) summary{
cursor: url(../assets/cursor/default.png) 2 16 , auto;
cursor: url(../assets/cursor/details.png) 2 16 , auto;
}
article{
@@ -666,6 +687,15 @@ main{
text-transform: none;
}
}
summary:hover{
background-color: var(--main-color);
}
summary:focus{
filter: hue-rotate(180deg);
}
}
}
@@ -680,15 +710,22 @@ main{
border-style: solid;
border-width: thin 0 0 0;
grid-template-columns: repeat(4, 1fr);
box-sizing: border-box;
gap: 7.77px;
a{
width: 100%;
height: 31px;
height: 100%;
display: flex;
flex-direction: row;
align-items: flex-end;
margin-top: 3.33px;
transition: 0.333s;
img{
width: 100%;
image-rendering: pixelated;
}
.needOutline{
@@ -698,6 +735,10 @@ main{
}
}
a:focus, a:hover{
margin-top: -7.77px;
}
}
}