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:
1 parent
6323d55718
commit
e0ba30ea6a
261 files changed
+1197
-1180
No files matched your search
+25
-25
@@ -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';
|
||||
@@ -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;
|
||||
|
||||
Reference in new issue
Block a user