rubberducky/milinda-pitch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: update readme and arias

Browse Source
This commit is contained in:
Tim Rijkse
2026-01-16 11:26:39 +01:00
parent 4e650899c8
commit 7367127b50
9 changed files with 178 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
js/components/book-details.js
View File

@@ -331,7 +331,7 @@ class BookDetails extends HTMLElement {
<div class="header">
<div class="title-row">
<h1 class="title">${this.bookTitle}</h1>
<button class="favorite-btn" aria-label="Add to favorites">
<button class="favorite-btn" aria-label="Toevoegen aan favorieten">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
</svg>

2
js/components/horizontal-scroll-nav.js
View File

@@ -110,7 +110,7 @@ class HorizontalScrollNav extends HTMLElement {
background-color: #7a1843;
}
</style>
<nav class="nav-container" role="navigation" aria-label="Book categories">
<nav class="nav-container" role="navigation" aria-label="Boekcategorieën">
${this.categories
.map(
(cat) => `

14
js/components/image-gallery.js
View File

@@ -373,8 +373,8 @@ class ImageGallery extends HTMLElement {
const imagesHtml = this.images
.map(
(img, index) => `
<button class="gallery-item" type="button" aria-label="View image ${index + 1}">
<img src="${img}" alt="Book preview ${index + 1}" class="gallery-image" />
<button class="gallery-item" type="button" aria-label="Bekijk afbeelding ${index + 1}">
<img src="${img}" alt="Boek voorvertoning ${index + 1}" class="gallery-image" />
</button>
`
)
@@ -512,11 +512,11 @@ class ImageGallery extends HTMLElement {
<div class="modal-overlay">
<div class="modal-header">
<div class="zoom-controls">
<button class="zoom-btn zoom-out" type="button" aria-label="Zoom out">−</button>
<button class="zoom-btn zoom-reset" type="button" aria-label="Reset zoom">⟲</button>
<button class="zoom-btn zoom-in" type="button" aria-label="Zoom in">+</button>
<button class="zoom-btn zoom-out" type="button" aria-label="Uitzoomen">−</button>
<button class="zoom-btn zoom-reset" type="button" aria-label="Zoom resetten">⟲</button>
<button class="zoom-btn zoom-in" type="button" aria-label="Inzoomen">+</button>
</div>
<button class="modal-close" type="button" aria-label="Close">
<button class="modal-close" type="button" aria-label="Sluiten">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
@@ -524,7 +524,7 @@ class ImageGallery extends HTMLElement {
</button>
</div>
<div class="modal-content">
<img class="modal-image" src="" alt="Full size preview" />
<img class="modal-image" src="" alt="Volledige afbeelding" />
</div>
</div>
`;

6
js/components/mobile-drawer.js
View File

@@ -14,6 +14,8 @@ class MobileDrawer extends HTMLElement {
connectedCallback() {
this.render();
this.setupEventListeners();
// Set initial aria-hidden state
this.setAttribute("aria-hidden", "true");
}
disconnectedCallback() {
@@ -51,6 +53,7 @@ class MobileDrawer extends HTMLElement {
open() {
this.isOpen = true;
this.shadowRoot.querySelector(".drawer-container").classList.add("open");
this.setAttribute("aria-hidden", "false");
document.body.style.overflow = "hidden";
// Focus trap - focus first focusable element
@@ -63,6 +66,7 @@ class MobileDrawer extends HTMLElement {
close() {
this.isOpen = false;
this.shadowRoot.querySelector(".drawer-container").classList.remove("open");
this.setAttribute("aria-hidden", "true");
document.body.style.overflow = "";
}
@@ -316,7 +320,7 @@ class MobileDrawer extends HTMLElement {
<div class="drawer-container">
<div class="backdrop"></div>
<nav class="drawer" aria-label="Main navigation">
<nav class="drawer" aria-label="Hoofdnavigatie">
<div class="drawer-header">
<a href="index.html" class="drawer-logo">Milinda</a>
<button class="close-button" aria-label="Sluit menu">

4
js/components/site-content.js
View File

@@ -41,9 +41,9 @@ class SiteContent extends HTMLElement {
padding-bottom: var(--spacing-md, 16px);
}
</style>
<main class="content">
<div class="content">
<slot></slot>
</main>
</div>
`;
}
}

1
js/components/site-header.js
View File

@@ -96,6 +96,7 @@ class SiteHeader extends HTMLElement {
}
</style>
<header class="header">
<slot name="skip-link"></slot>
<slot name="top-bar"></slot>
<div class="collapsible">
<slot name="nav"></slot>