fix(a11y): activities tablist must contain only tabs

The "Become a member" CTA was a direct child of role="tablist", which
violates the ARIA rule that a tablist may only contain role="tab" children
(axe: aria-required-children). Wrap the 4 tabs in an inner
.activities-tabs[role=tablist] and leave the CTA as a sibling; add matching
flex CSS so the layout is unchanged. JS uses `.activities-nav .activity-tab`
(descendant), so tab behavior is unaffected. EN/MK/SI. Cache-bust bump.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
popovskikandClaude Opus 4.8 committed 2026-08-30 17:00:40 +02:00
1 parent 6323d55718
commit e0ba30ea6a
261 files changed
+1197 -1180

No files matched your search

+25 -25
View File
@@ -15,36 +15,36 @@
*/
/* 1. Base Styles */
@import 'base/_base.css?v=cd97d474';
@import 'base/_typography.css?v=cd97d474';
@import 'base/_base.css?v=54203d0c';
@import 'base/_typography.css?v=54203d0c';
/* 2. Layout Components */
@import 'layout/_header.css?v=cd97d474';
@import 'layout/_footer.css?v=cd97d474';
@import 'layout/_header.css?v=54203d0c';
@import 'layout/_footer.css?v=54203d0c';
/* 3. Reusable Components */
@import 'components/_buttons.css?v=cd97d474';
@import 'components/_cards.css?v=cd97d474';
@import 'components/_lang-banner.css?v=cd97d474';
@import 'components/_lightbox.css?v=cd97d474';
@import 'components/_buttons.css?v=54203d0c';
@import 'components/_cards.css?v=54203d0c';
@import 'components/_lang-banner.css?v=54203d0c';
@import 'components/_lightbox.css?v=54203d0c';
/* 4. Page-specific Styles */
@import 'pages/_home.css?v=cd97d474';
@import 'pages/_projects.css?v=cd97d474';
@import 'pages/_article.css?v=cd97d474';
@import 'pages/_about.css?v=cd97d474';
@import 'pages/_timeline.css?v=cd97d474';
@import 'pages/_guide.css?v=cd97d474';
@import 'pages/_faq.css?v=cd97d474';
@import 'pages/_blog.css?v=cd97d474';
@import 'pages/_news.css?v=cd97d474';
@import 'pages/_member.css?v=cd97d474';
@import 'pages/_support.css?v=cd97d474';
@import 'pages/_hub.css?v=cd97d474';
@import 'pages/_legal.css?v=cd97d474';
@import 'pages/_gallery.css?v=cd97d474';
@import 'pages/_press.css?v=cd97d474';
@import 'pages/_event.css?v=cd97d474';
@import 'pages/_home.css?v=54203d0c';
@import 'pages/_projects.css?v=54203d0c';
@import 'pages/_article.css?v=54203d0c';
@import 'pages/_about.css?v=54203d0c';
@import 'pages/_timeline.css?v=54203d0c';
@import 'pages/_guide.css?v=54203d0c';
@import 'pages/_faq.css?v=54203d0c';
@import 'pages/_blog.css?v=54203d0c';
@import 'pages/_news.css?v=54203d0c';
@import 'pages/_member.css?v=54203d0c';
@import 'pages/_support.css?v=54203d0c';
@import 'pages/_hub.css?v=54203d0c';
@import 'pages/_legal.css?v=54203d0c';
@import 'pages/_gallery.css?v=54203d0c';
@import 'pages/_press.css?v=54203d0c';
@import 'pages/_event.css?v=54203d0c';
/* Loaded last so the shared filter bar wins over per-page chip styles. */
@import 'pages/_filterbar.css?v=cd97d474';
@import 'pages/_filterbar.css?v=54203d0c';
+11
View File
@@ -264,6 +264,14 @@
gap: 12px;
}
/* Tablist wrapper — holds only the tabs (the CTA sits outside it so the
role="tablist" contains only role="tab" children, per ARIA). */
.activities-tabs {
display: flex;
flex-direction: column;
gap: 12px;
}
/* Tab buttons — card style with icon + active highlight */
.activity-tab {
display: flex;
@@ -780,6 +788,9 @@
width: 100%;
gap: 10px;
}
.activities-tabs {
gap: 10px;
}
.activity-tab {
padding: 14px 16px;
gap: 14px;