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
+100 -39
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

affiches/mardis/index.html
+8 -7
View File
@@ -36,13 +36,14 @@
align-items: flex-start; align-items: flex-start;
justify-content: flex-start; justify-content: flex-start;
background-color: var(--mardi-main-color); background-color: var(--mardi-main-color);
filter: none !important;
@container( width > 650px ){ @container( width > 650px ){
flex-direction: row; flex-direction: row;
} }
} }
#imgContainer{ #imgContainer{
display: flex; display: flex;
@@ -55,7 +56,7 @@
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
gap: 3.33px; gap: 3.33px;
padding-top: 3.33px; padding-top: 0;
img{ img{
max-width: 34%; max-width: 34%;
@@ -101,7 +102,7 @@
} }
</style> </style>
</head> </head>
<body> <body>
@@ -109,16 +110,16 @@
<div id="imgContainer"> <div id="imgContainer">
<img src="/affiches/mardis/IMG001.jpg" alt="une lampe d'atelier sur un grand plan de travail un peu désorganisé, quelques chaises un peu disparates, on distingue un empilement de caisses et cartons à l'arrière plan"> <img src="/affiches/mardis/IMG001.jpg" alt="une lampe d'atelier sur un grand plan de travail un peu désorganisé, quelques chaises un peu disparates, on distingue un empilement de caisses et cartons à l'arrière plan">
<img src="/affiches/mardis/IMG002.jpg" alt="un coin atelier bien équipé et éclairé, beaucoup d'outils, une échelle au bord du cadre, et on aperçoit un espace avec un ordinateur sur une mezzanine, éclairé d'une lumière rouge vive"> <img src="/affiches/mardis/IMG002.jpg" alt="un coin atelier bien équipé et éclairé, beaucoup d'outils, une échelle au bord du cadre, et on aperçoit un espace avec un ordinateur sur une mezzanine, éclairé d'une lumière rouge vive">
<img src="/affiches/mardis/IMG333.jpg" alt="un grand espace de rangement très haut et plutôt ajouré décorée d'un dessin de poulpe rose fluo, qui contient des outils divers, éclairé d'un néon bleu pâle"> <img src="/affiches/mardis/IMG333.jpg" alt="un grand espace de rangement très haut et plutôt ajouré décorée d'un dessin de poulpe rose fluo, qui contient des outils divers, éclairé d'un néon bleu pâle">
</div> </div>
<div id="textContainer" property="description"> <div id="textContainer" property="description">
<h4 property="name">Permanences du LOL</h1> <h4 property="name">Permanences du LOL</h1>
<p>Venez chiller avec nous, partager un thé ou une bière.</p> <p>Venez chiller avec nous, partager un thé ou une bière.</p>
<p>On échange technique et savoir-faire<br>sur tous les sujets : logiciel libre, hacking,<br> couture, bricole et bidouille en tout genre,<br> mais aussi sur nos projets personnels ou collectifs</p> <p>On échange technique et savoir-faire<br>sur tous les sujets : logiciel libre, hacking,<br> couture, bricole et bidouille en tout genre,<br> mais aussi sur nos projets personnels ou collectifs</p>
<p class="event-hours"> <p class="event-hours">
<span property="eventSchedule" typeof="Schedule"> <span property="eventSchedule" typeof="Schedule">
@@ -133,4 +134,4 @@
</div> </div>
</article> </article>
</body> </body>
</html> </html>
index.html
+24 -24
View File
@@ -37,10 +37,10 @@
<nav aria-label="outils numériques du LOL"> <nav aria-label="outils numériques du LOL">
<ul> <ul>
<li><a href="https://git.labolyon.fr/explore/repos" class="textBtnStyle" >Git</a></li> <li><a tabindex="0" 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 tabindex="0" 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 tabindex="0" 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://nerdculture.de/@labolyon" class="textBtnStyle" >Fediverse</a></li>
</ul> </ul>
</nav> </nav>
</header> </header>
@@ -72,7 +72,7 @@
Sam. <strong>14h &rarr; 20h</strong> Sam. <strong>14h &rarr; 20h</strong>
</li> </li>
</ol> </ol>
<!-- pour plus tard <!-- pour plus tard
<h3>Nocturne</h3> <h3>Nocturne</h3>
<ol> <ol>
<li>Ven. <strong>21h &rarr; 5h</strong></li> <li>Ven. <strong>21h &rarr; 5h</strong></li>
@@ -88,11 +88,11 @@
45° 46' 23.698" N<br> 45° 46' 23.698" N<br>
4° 50' 14.052" E 4° 50' 14.052" E
</address> </address>
<ul aria-label="Téléphones du lieu"> <ul aria-label="Téléphones du lieu">
<li> &#128439; Fax : <a href="tel:+33482533028">04 82 53 30 28</a></li> <li> &#128439; Fax : <a tabindex="0" href="tel:+33482533028">04 82 53 30 28</a></li>
<li> &#9990; Tel EPVPN : <a href="tel:5256">5256</a></li> <li> &#9990; Tel EPVPN : <a tabindex="0" href="tel:5256">5256</a></li>
<li> &#128439; Fax EPVPN : <a href="tel:5257">5257</a></li> <li> &#128439; Fax EPVPN : <a tabindex="0" href="tel:5257">5257</a></li>
</ul> </ul>
</div> </div>
@@ -124,24 +124,24 @@
</div> </div>
<div id="extLinkSection" class="transparentBox" aria-label="Liens externes"> <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=""> <img src="assets/logo_hackerspaces_monde.png" aria-hidden="true" alt="">
</a> </a>
</div> </div>
<!-- MESSAGE DE BIENVENUE --> <!-- MESSAGE DE BIENVENUE -->
<aside> <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"> <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"/> <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> </svg>
</button> </button>
<div id="msgWindow" popover="auto"> <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"> <h4 class="title">
Bienvenue sur le site du LOL! 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"> <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"/> <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> </svg>
@@ -169,11 +169,11 @@
<small>Un capteur sur la porte d'entrée indique si le local est ouvert:</small> <small>Un capteur sur la porte d'entrée indique si le local est ouvert:</small>
</p> </p>
</div> </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> </section>
<aside id="extraContent"> <aside id="extraContent">
<div id="aboutSection" class="solidBox" aria-label="Description de l'asso, de ses objectifs et valeurs"> <div id="aboutSection" class="solidBox" aria-label="Description de l'asso, de ses objectifs et valeurs">
<p> <p>
Le Laboratoire Ouvert Lyonnais (LOL) est un lieu de rassemblement et d'expérimentations pour tous·tes les passionné·es d'informatique, d'électronique et de technique, Le Laboratoire Ouvert Lyonnais (LOL) est un lieu de rassemblement et d'expérimentations pour tous·tes les passionné·es d'informatique, d'électronique et de technique,
qui souhaitent réparer, recycler, et se réapproprier les objets et outils qui nous entourent.<br> qui souhaitent réparer, recycler, et se réapproprier les objets et outils qui nous entourent.<br>
Le LOL est un lieu d'exploration des alternatives<br>et de bidouille anti-systèmes. Le LOL est un lieu d'exploration des alternatives<br>et de bidouille anti-systèmes.
@@ -209,7 +209,7 @@
<article class="solidBox"> <article class="solidBox">
<h4>Permanences du LOL</h4> <h4>Permanences du LOL</h4>
<p class="date">↻ Mardi & Samedi</p> <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"> <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"/> <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> </svg>
@@ -219,7 +219,7 @@
<article class="solidBox"> <article class="solidBox">
<h4>Permanences du LOL</h4> <h4>Permanences du LOL</h4>
<p class="date">↻ Mardi & Samedi</p> <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"> <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"/> <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> </svg>
@@ -229,7 +229,7 @@
<article class="solidBox"> <article class="solidBox">
<h4>Permanences du LOL</h4> <h4>Permanences du LOL</h4>
<p class="date">↻ Mardi & Samedi</p> <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"> <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"/> <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> </svg>
@@ -239,7 +239,7 @@
<article class="solidBox"> <article class="solidBox">
<h4>Permanences du LOL</h4> <h4>Permanences du LOL</h4>
<p class="date">↻ Mardi & Samedi</p> <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"> <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"/> <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> </svg>
@@ -249,16 +249,16 @@
</section> </section>
</aside> </aside>
<footer id="webRingSection" aria-label="les copaines du LOL"> <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"> <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>
<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é"> <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>
<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"> <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>
<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"> <img src="/assets/webRings/1312.media-webring.png" alt="le logo antifasciste et un texte rouge très large, the 1312 media collective">
</a> </a>
</footer> </footer>
js/events.js
+3
View File
@@ -39,9 +39,12 @@ function createEntry(title, date, html, style){
const newEntry = document.createElement('details'); const newEntry = document.createElement('details');
const newSummary = document.createElement('summary'); const newSummary = document.createElement('summary');
newSummary.append(title, date); newSummary.append(title, date);
newSummary.setAttribute('tabindex', '0');
newEntry.append(newSummary); newEntry.append(newSummary);
html.setAttribute('tabindex', '-1');
newEntry.append(html); newEntry.append(html);
newEntry.name = "eventList" newEntry.name = "eventList"
style/common.css
+8
View File
@@ -27,6 +27,10 @@
border-color: var(--back-color); border-color: var(--back-color);
} }
.textBtnStyle:focus{
filter: hue-rotate(180deg);
}
.iconBtnStyle{ .iconBtnStyle{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -56,6 +60,10 @@
animation: none; animation: none;
} }
.iconBtnStyle:focus{
filter: hue-rotate(180deg);
}
@media(min-width: 1300px){ @media(min-width: 1300px){
.textBtnStyle{ .textBtnStyle{
font-size: 19px; font-size: 19px;
style/default.css
+9 -1
View File
@@ -6,7 +6,7 @@ input {
a{ a{
text-decoration: none; text-decoration: none;
color: inherit; 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{ dialog{
padding: 0; padding: 0;
} }
dialog:focus{
outline:none;
filter: hue-rotate(180deg);
}
button:focus, a:focus, summary:focus{
outline:none;
}
style/main.css
+48 -7
View File
@@ -158,6 +158,10 @@ main{
address { address {
margin-bottom: 2em; margin-bottom: 2em;
} }
ul li a:focus{
filter: hue-rotate(180deg);
}
} }
aside{ aside{
@@ -184,7 +188,7 @@ main{
cursor: url(../assets/cursor/msg.png) 2 16 , auto; cursor: url(../assets/cursor/msg.png) 2 16 , auto;
} }
#openMsg:hover{ #openMsg:hover, #openMsg:focus{
animation: none; animation: none;
} }
@@ -373,6 +377,14 @@ main{
} }
} }
a:focus, a:hover{
background-color: var(--back-color);
img{
filter: invert();
}
}
} }
#adhesionSection{ #adhesionSection{
@@ -583,6 +595,10 @@ main{
border-color: var(--back-color); border-color: var(--back-color);
} }
.solidBox:has(details){
overflow: hidden;
}
.solidBox:has(details[open]){ .solidBox:has(details[open]){
color: var(--back-color); color: var(--back-color);
background-color: var(--main-color); background-color: var(--main-color);
@@ -595,6 +611,10 @@ main{
margin-right: 16.1px; margin-right: 16.1px;
width: calc(100% - 32.2px); width: calc(100% - 32.2px);
summary{
background-color: var(--main-color);
}
} }
article:first-of-type, article:first-of-type,
@@ -652,13 +672,14 @@ main{
box-sizing: border-box; box-sizing: border-box;
list-style-type: none; list-style-type: none;
padding: 16.1px; padding: 16.1px;
background-color: var(--back-color);
cursor: url(../assets/cursor/default.png) 2 16 , auto;
cursor: url(../assets/cursor/details.png) 2 16 , auto;
} }
&:not([open]) summary{ &:not([open]) summary{
cursor: url(../assets/cursor/default.png) 2 16 , auto; cursor: url(../assets/cursor/details.png) 2 16 , auto;
} }
article{ article{
@@ -666,8 +687,17 @@ main{
text-transform: none; text-transform: none;
} }
} }
summary:hover{
background-color: var(--main-color);
}
summary:focus{
filter: hue-rotate(180deg);
}
} }
} }
#webRingSection{ #webRingSection{
width: 100%; width: 100%;
@@ -680,15 +710,22 @@ main{
border-style: solid; border-style: solid;
border-width: thin 0 0 0; border-width: thin 0 0 0;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
box-sizing: border-box;
gap: 7.77px; gap: 7.77px;
a{ a{
width: 100%; width: 100%;
height: 31px; height: 100%;
display: flex;
flex-direction: row;
align-items: flex-end;
margin-top: 3.33px;
transition: 0.333s;
img{ img{
width: 100%; width: 100%;
image-rendering: pixelated; image-rendering: pixelated;
} }
.needOutline{ .needOutline{
@@ -698,6 +735,10 @@ main{
} }
} }
a:focus, a:hover{
margin-top: -7.77px;
}
} }
} }