Annevd
commented
1 month ago 3/10 Menu met accessibility tools V1
Na aanleiding van mijn ontwerp en de oude code van de web minor (#125 ), heb ik het menu van de toegankelijkheidsfuncties gebouwd. Dit is nu nog met voornamelijk dezelfde code als de web minor, met een paar semantische verbeteringen in de HTML.
Dit menu is een component in de folder lib/organisms/, namelijk accessibility-menu.svelte. Deze staat in de +layout.svelte geïmporteerd, omdat het op elke pagina moet staan.
+layout.svelte:
<script>
export let data;
import { Menu, AccessibilityMenu, Footer } from '$lib/index.js';
import Viewtransition from '$lib/viewtransition.svelte';
</script>
<Viewtransition />
<Menu />
<AccessibilityMenu />
<slot/>
<Footer {data}/>
Zo ziet de HTML er nu uit:
<form aria-label="Accessibility Options">
<label for="menu" class="accessibilityIcon">
<input type="checkbox" id="menu"> <!-- Dit zorgt voor het openen en sluiten van het menu -->
<Accessibility />
</label>
<div class="accessibilityContent">
<ul>
<li>
<label for="toggle-darkmode">
<div class="label-container">
<Moon/> <!-- Dit is een component voor de SVG -->
<span>Dark mode</span>
</div>
<input type="checkbox" id="toggle-darkmode" role="switch"> <!-- Dit zorgt voor het aan/uit zetten van de feature -->
<span class="state"> <!-- Deze spans maken de switch -->
<span class="container">
<span class="position"> </span>
</span>
</span>
</label>
</li>
<li>
<label for="font-size">
<div class="label-container">
<FontIncrease />
<span>Grotere letters</span>
</div>
<input type="checkbox" id="font-size" role="switch">
<span class="state">
<span class="container">
<span class="position"> </span>
</span>
</span>
</label>
</li>
<li id="google_translate_element">
<div class="label-container">
<Translate />
<span>Vertaal deze website</span>
</div>
</li>
</ul>
</div>
</form>In onderstaande CSS kan je zien hoe het menu opent en sluit door middel van het veranderen van de waarde van left: ... ;:
form {
position: fixed;
top: 20vh;
left: -14rem; /* Hidden by default */
z-index: 10000;
display: flex;
flex-direction: row-reverse;
width: calc(13rem + 5rem);
transition: left .3s;
}
/* Menu is shown when checkbox is checked */
form:has(.accessibilityIcon input:checked) {
transition: left .3s;
left: -1rem; /* Slide out to show the menu */
}
/* Hide the content when checkbox is unchecked */
form:not(:has(.accessibilityIcon input:checked)) > .accessibilityContent ul {
display: none;
transition: left .3s;
}
/* Extra's */
/* When the accessibility menu is closed (i.e., the input checkbox inside `.accessibilityIcon` is not checked),
this CSS rule sets a fixed height for `.accessibilityContent`. This ensures that when the menu is hidden,
it shrinks to a specific height instead of expanding to fit its full content. */
form:not(:has(.accessibilityIcon input:checked)) > .accessibilityContent {
height: 117.781px;
}
/* This hides the checkbox with `id^="menu"`, which is the checkbox controlling the visibility of the menu.
It is positioned off-screen (`left: -50%`) so it remains functional (it can still be checked/unchecked)
but invisible to users. The visibility is handled entirely by the image or label, not the checkbox itself. */
input[type="checkbox"][id^="menu"] {
position: absolute;
left: -50%;
}De switches heb ik gemaakt aan de hand van deze bron van W3, om goede toegankelijkheid te behouden.
Omdat :has() in een aantal oude browserversies niet ondersteund word, wil ik mij nog gaan verdiepen in hoe ik de functionaliteit van het menu zoals het openen, sluiten, en de features anders kan aanpakken volgens het principe PE.
Ook probeerde ik van de switch een component te maken, wat ook gelukt was. Echter leverde dat mij beperkingen op bij het stylen van specifieke elementen en labels hier binnen. Hierdoor heb ik het voor nu toch niet als component gebruikt. Ik ben benieuwd of hier nog een andere oplossing voor is.
Andere dingen waar ik nog tegen aan loop/wat ik nog moet doen:
- (onnodige) classnames veranderen/weghalen
- DRY/nette code
- Beter maken met input:checked i.p.v has?
- JS om te enhancen
- Font aanpassen
- Custom kleuren/properties gebruiken?
- Geen een
inputis focusbaar op dit moment, waarom? - De vertaalfunctie moet er nog in
- Hover states van de switches
Hoe het er uit ziet op dit moment:
Nazneen05x
User story: Als bezoeker wil ik toegankelijkheid features zien en kunnen aanpassen
Taak: Button popup maken met daarin de accessibility tools (html/css)