Skip to content

Commit

Permalink
fix: accordion explicit aria-expanded="false" (#636)
Browse files Browse the repository at this point in the history 
* test: add test case for accordion explicit aria-expanded use cases

* fix: accordion explicit aria-expanded="false" behavior

* docs: improve accordion explicit aria-expanded explanation
  • Loading branch information
@ppvg
ppvg authored Aug 22, 2024
1 parent 718011b commit 4f10690
Show file tree
Hide file tree
Showing 3 changed files with 100 additions and 3 deletions.
88 changes: 86 additions & 2 deletions docs/src/routes/(docs)/components/accordion-test/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@
</div>
</div>

<h3>HTML-voorbeeld:</h3>
<h4>HTML-voorbeeld:</h4>
<Code
language="html"
code={`
Expand Down Expand Up @@ -229,7 +229,7 @@
</div>
</section>

<h3>HTML-voorbeeld:</h3>
<h4>HTML-voorbeeld:</h4>
<Code
language="html"
code={`
Expand Down Expand Up @@ -275,6 +275,90 @@
</section>
`}
/>

<h3>Expliciete <code>aria-expanded="true"</code> (ander onderdeel standaard opengeklapt)</h3>
<ul class="accordion">
<li>
<button id="example-3-item-1">Voorbeeld-onderwerp 1</button>
<div aria-labelledby="example-3-item-1">
<h1>Titel van de content binnen het accordeon-element</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum suscipit egestas
leo, eu semper erat congue at. Nulla pellentesque nunc nisl, at elementum ex aliquam
ac. Fusce sed justo ullamcorper, eleifend nibh a, fringilla lorem. Aliquam erat
volutpat. Aenean risus sem, tempor at rhoncus in, suscipit hendrerit arcu.
Suspendisse ultricies semper sapien eget lobortis. Phasellus ut sodales sem. Aenean
quis libero gravida, fringilla odio venenatis, condimentum lorem.
</p>
<ul>
<li>Lorem ipsum</li>
<li>Dolor sit amet</li>
<li>Consectetur adepiscing elit.</li>
</ul>
</div>
</li>
<li>
<button aria-expanded="true" id="example-3-item-2">Voorbeeld-onderwerp 2</button>
<div aria-labelledby="example-3-item-2">
<h1>Titel van de content binnen het accordeon-element</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum suscipit egestas
leo, eu semper erat congue at. Nulla pellentesque nunc nisl, at elementum ex aliquam
ac. Fusce sed justo ullamcorper, eleifend nibh a, fringilla lorem. Aliquam erat
volutpat. Aenean risus sem, tempor at rhoncus in, suscipit hendrerit arcu.
Suspendisse ultricies semper sapien eget lobortis. Phasellus ut sodales sem. Aenean
quis libero gravida, fringilla odio venenatis, condimentum lorem.
</p>
<ul>
<li>Lorem ipsum</li>
<li>Dolor sit amet</li>
<li>Consectetur adepiscing elit.</li>
</ul>
</div>
</li>
</ul>

<h3>Expliciete <code>aria-expanded="false"</code> (eerste onderdeel dichtgeklapt)</h3>
<ul class="accordion">
<li>
<button aria-expanded="false" id="example-3-item-1">Voorbeeld-onderwerp 1</button>
<div aria-labelledby="example-3-item-1">
<h1>Titel van de content binnen het accordeon-element</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum suscipit egestas
leo, eu semper erat congue at. Nulla pellentesque nunc nisl, at elementum ex aliquam
ac. Fusce sed justo ullamcorper, eleifend nibh a, fringilla lorem. Aliquam erat
volutpat. Aenean risus sem, tempor at rhoncus in, suscipit hendrerit arcu.
Suspendisse ultricies semper sapien eget lobortis. Phasellus ut sodales sem. Aenean
quis libero gravida, fringilla odio venenatis, condimentum lorem.
</p>
<ul>
<li>Lorem ipsum</li>
<li>Dolor sit amet</li>
<li>Consectetur adepiscing elit.</li>
</ul>
</div>
</li>
<li>
<button id="example-3-item-2">Voorbeeld-onderwerp 2</button>
<div aria-labelledby="example-3-item-2">
<h1>Titel van de content binnen het accordeon-element</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum suscipit egestas
leo, eu semper erat congue at. Nulla pellentesque nunc nisl, at elementum ex aliquam
ac. Fusce sed justo ullamcorper, eleifend nibh a, fringilla lorem. Aliquam erat
volutpat. Aenean risus sem, tempor at rhoncus in, suscipit hendrerit arcu.
Suspendisse ultricies semper sapien eget lobortis. Phasellus ut sodales sem. Aenean
quis libero gravida, fringilla odio venenatis, condimentum lorem.
</p>
<ul>
<li>Lorem ipsum</li>
<li>Dolor sit amet</li>
<li>Consectetur adepiscing elit.</li>
</ul>
</div>
</li>
</ul>
</section>
</div>
</article>
Expand Down
13 changes: 13 additions & 0 deletions docs/src/routes/(docs)/components/accordion/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,19 @@
<li>
Standaard is het eerste onderdeel opengeklapt. Dit kan aangepast worden middels het
<code>aria-expanded</code>-attribuut van de <code>&lt;button&gt;</code>.
<ul>
<li>
Voeg <code>aria-expanded="false"</code> toe aan de <code>{`<button>`}</code> van het
eerste onderdeel om te voorkomen dat het standaard opengeklapt is.
</li>
<li>
Voeg <code>aria-expanded="true"</code> toe aan de <code>{`<button>`}</code> van een
ander onderdeel om te zorgen dat dat onderdeel standaard opengeklapt is. Let op: dit
zorgt ervoor dat het eerste onderdeel niet meer standaard opengeklapt is. Om te
zorgen dat het eerste onderdeel óók standaard opengeklapt is, kan je ook daar
<code>aria-expanded="true"</code> toevoegen.
</li>
</ul>
</li>
</ul>
</section>
Expand Down
2 changes: 1 addition & 1 deletion manon/accordion.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ function initAccordion(accordion) {
}

// Set up the initial `aria-expanded` state.
if (button.getAttribute("aria-expanded") === "true") {
if (button.hasAttribute("aria-expanded")) {
hasAriaExpandedMarkup = true;
} else {
button.setAttribute("aria-expanded", "false");
Expand Down

0 comments on commit 4f10690

Please sign in to comment.