m038/intotheeast-com-content
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(a11y): add aria-pressed to filter buttons and aria-expanded to stats/cycling toggles

Browse Source
This commit is contained in:
Mischa
2026-06-20 20:27:45 +02:00
parent b1e1a5cb9a
commit ce5d520817
1 changed files with 9 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
themes/intotheeast/templates/trip.html.twig
+9 -6
View File
@@ -122,14 +122,14 @@
</span> </span>
<div class="trip-filter-bar"> <div class="trip-filter-bar">
<div class="trip-filter-group"> <div class="trip-filter-group">
<button class="trip-filter-btn is-active" data-filter="all">All content</button> <button class="trip-filter-btn is-active" data-filter="all" aria-pressed="true">All content</button>
<button class="trip-filter-btn" data-filter="journal">Journal</button> <button class="trip-filter-btn" data-filter="journal" aria-pressed="false">Journal</button>
<button class="trip-filter-btn" data-filter="story">Stories</button> <button class="trip-filter-btn" data-filter="story" aria-pressed="false">Stories</button>
</div> </div>
<div class="trip-filter-group"> <div class="trip-filter-group">
<button class="trip-stats-btn" id="trip-stats-toggle">Stats</button> <button class="trip-stats-btn" id="trip-stats-toggle" aria-expanded="false" aria-controls="trip-stats-block">Stats</button>
{% if has_gpx %} {% if has_gpx %}
<button class="trip-stats-btn" id="trip-cycling-toggle">Cycling</button> <button class="trip-stats-btn" id="trip-cycling-toggle" aria-expanded="false" aria-controls="trip-cycling-block">Cycling</button>
{% endif %} {% endif %}
</div> </div>
</div> </div>
@@ -383,8 +383,9 @@ setTimeout(function () { tripMap.resize(); }, 100);
filterBtns.forEach(function(btn) { filterBtns.forEach(function(btn) {
btn.addEventListener('click', function() { btn.addEventListener('click', function() {
filterBtns.forEach(function(b) { b.classList.remove('is-active'); }); filterBtns.forEach(function(b) { b.classList.remove('is-active'); b.setAttribute('aria-pressed', 'false'); });
btn.classList.add('is-active'); btn.classList.add('is-active');
btn.setAttribute('aria-pressed', 'true');
var filter = btn.getAttribute('data-filter'); var filter = btn.getAttribute('data-filter');
var visible = 0; var visible = 0;
@@ -550,6 +551,7 @@ function parseGpxFiles(urls, callback) {
var isOpen = statsBlock.style.display !== 'none'; var isOpen = statsBlock.style.display !== 'none';
statsBlock.style.display = isOpen ? 'none' : ''; statsBlock.style.display = isOpen ? 'none' : '';
statsToggle.classList.toggle('is-active', !isOpen); statsToggle.classList.toggle('is-active', !isOpen);
statsToggle.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
}); });
} }
@@ -561,6 +563,7 @@ function parseGpxFiles(urls, callback) {
var isOpen = cycBlock.style.display !== 'none'; var isOpen = cycBlock.style.display !== 'none';
cycBlock.style.display = isOpen ? 'none' : ''; cycBlock.style.display = isOpen ? 'none' : '';
cycToggle.classList.toggle('is-active', !isOpen); cycToggle.classList.toggle('is-active', !isOpen);
cycToggle.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
}); });
} }
})(); })();