Skip to content

Commit 6626c88

Browse files
deleoniodeleonio
authored
Merge branch 'develop' into fix/9699-table-in-accordion
2 parents bf455fd + cd6696f commit 6626c88

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+1430
-715
lines changed

‎.github/workflows/ci.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ jobs:
6060
continue-on-error: true
6161
strategy:
6262
matrix:
63-
package: ['test-tag-name-transformer', 'theme-default']
63+
package: ['test-tag-name-transformer', 'theme-default', 'theme-kern']
6464
runs-on: ubuntu-latest
6565
steps:
6666
- name: Checkout

‎.github/workflows/update-snapshots.yml‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -84,9 +84,7 @@ jobs:
8484
run: git status
8585

8686
- name: Stage snapshot changes
87-
run: |
88-
shopt -s globstar
89-
git add packages/**/__snapshots__/** packages/**/snapshots/**
87+
run: find packages \( -path '*/node_modules' -prune \) -o \( -path '*/__snapshots__/*' -o -path '*/snapshots/*' \) -print | xargs --no-run-if-empty git add --
9088

9189
- name: Commit and push changes
9290
uses: stefanzweifel/git-auto-commit-action@v7

‎.github/workflows/visual-tests-base.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ jobs:
1515
visual-tests-snapshots:
1616
strategy:
1717
matrix:
18-
package: ['test-tag-name-transformer', 'theme-default', 'theme-ecl']
18+
package: ['test-tag-name-transformer', 'theme-default', 'theme-ecl', 'theme-kern']
1919
runs-on: ubuntu-latest
2020
steps:
2121
- name: Checkout base branch

‎.stylelintrc.json‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,7 @@
11
{
22
"extends": ["stylelint-config-standard", "stylelint-config-recommended-scss"],
3-
"plugins": ["stylelint-scss", "stylelint-order", "./stylelint-rules"],
3+
"plugins": ["stylelint-scss", "stylelint-order", "@public-ui/stylelint-rules"],
44
"rules": {
5-
"kolibri/no-layer-in-utility-files": true,
6-
"kolibri/layer-restrictions-components": true,
7-
"kolibri/layer-restrictions-themes": true,
8-
"kolibri/require-component-layer": true,
9-
"kolibri/css-must-be-in-layer": true,
105
"block-no-empty": true,
116
"color-no-invalid-hex": true,
127
"custom-property-pattern": "^[a-z0-9]+(?:-[a-z0-9]+)*(?:--[a-z0-9]+(?:-[a-z0-9]+)*)*$",

‎KNOWN_ISSUES.md‎

Lines changed: 93 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,97 @@ This is a limitation in Firefox’s ARIA implementation. Until it is resolved, a
146146

147147
### Toaster
148148

149-
Toasts are rendered in a container that's appended as first element of `<body>` and elevated using a high `z-index`.
149+
> **Deprecated** — The `kol-toast-container` component and `ToasterService` are deprecated and will be removed in the next major version. See [#8372](https://github.com/public-ui/kolibri/issues/8372) and [#9110](https://github.com/public-ui/kolibri/issues/9110). Use [`kol-alert`](./packages/components/src/components/alert) for inline notifications and [`kol-dialog`](./packages/components/src/components/dialog) for interactive messages instead.
150150
151-
When using [modal dialogs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) these are rendered above toasts on the [top layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer). Hence, toast messages are always blocked by modal dialogs. We recommend completely avoiding toasts in modals and giving feedback within the modal directly.
151+
#### Why toast notifications are fundamentally inaccessible
152+
153+
The international accessibility community broadly agrees: the classic toast pattern — auto-dismissing, corner-positioned notifications — cannot be made fully WCAG-conformant without removing the traits that define it. The following issues are structural and cannot be resolved through ARIA attributes, focus management, or the Popover API alone.
154+
155+
#### SC 2.2.1 – Timing Adjustable (Level A) — critical
156+
157+
Auto-dismissing toasts set a time limit on content perception. WCAG requires users to be able to turn off, adjust, or extend time limits. A toast only avoids violating SC 2.2.1 if the same information is simultaneously available elsewhere (e.g. a new email visible in the inbox). When the toast is the sole information source and disappears automatically, it violates SC 2.2.1 at **Level A** — the lowest conformance threshold.
158+
159+
The W3C WCAG Working Group clarified this in [issue #1814](https://github.com/w3c/wcag/issues/1814).
160+
161+
#### SC 4.1.3 – Status Messages (Level AA)
162+
163+
Toasts must be announced via ARIA live regions without moving focus. In practice:
164+
165+
- The live region container must exist in the DOM **before** content is inserted. If container and content are injected simultaneously, most screen readers ignore the announcement.
166+
- **JAWS** does not re-announce identical messages — inserting the same text twice results in silence for the second occurrence.
167+
- **NVDA** may drop `polite` announcements under load.
168+
- **VoiceOver (iOS)** historically only handled `assertive` live regions reliably.
169+
170+
#### SC 2.1.1 – Keyboard (Level A)
171+
172+
Interactive elements inside toasts (close button, "Undo" links) must be keyboard-accessible — in a race against the auto-dismiss timer. For users who type slowly or rely on switch access or voice control, this race cannot be won.
173+
174+
#### SC 2.4.3 – Focus Order (Level A)
175+
176+
Toast elements appended to the end of the DOM are barely reachable by keyboard users before they disappear automatically.
177+
178+
#### SC 1.3.2 – Meaningful Sequence (Level A)
179+
180+
Toast markup at the beginning or end of the DOM has no logical relationship to the element that triggered it. The document order does not match the visual or semantic order.
181+
182+
#### SC 1.4.4 / 1.4.10 – Resize Text / Reflow (Level AA)
183+
184+
Enlarged text can cause toasts to overflow or cover content. Toasts that appear outside the visible viewport at 400% zoom are effectively invisible to users relying on screen magnification.
185+
186+
#### SC 2.2.4 – Interruptions (Level AAA)
187+
188+
Toasts are unsolicited interruptions. `role="alert"` literally interrupts the running screen reader output regardless of what the user is currently reading.
189+
190+
#### The toast paradox
191+
192+
> "You can improve the accessibility of toasts by removing the traits that make them toasts."
193+
> — Adam Silver, [Can you make toast messages accessible?](https://adamsilver.io/blog/can-you-make-toast-messages-accessible/)
194+
195+
Every measure that makes a toast genuinely accessible transforms it into a different component:
196+
197+
| Measure | Result |
198+
|---|---|
199+
| No auto-dismiss | → Persistent inline alert |
200+
| Focus moved into the toast | → Non-modal dialog |
201+
| Notification history | → Notification panel / landmark region |
202+
| Plain text only, no interactive elements | → ARIA live region (no longer a visual toast) |
203+
204+
> "If a notification contains an interactive element, it should not be a live region. And it should also not be a toast."
205+
> — Sara Soueidan, [Accessible Notifications with ARIA Live Regions](https://www.sarasoueidan.com/blog/accessible-notifications-with-aria-live-regions-part-2/)
206+
207+
#### Why the Popover API does not solve the structural problems
208+
209+
An exploratory implementation using the native Popover API (`popover="manual"`) was developed on branch `claude/toast-popover-dialog-6ahi8`. It improves the technical infrastructure:
210+
211+
- ✅ No more z-index conflicts — each toast is independently promoted to the browser Top Layer
212+
- ✅ Focus is returned to the triggering element when a toast is closed by the user
213+
- ✅ Auto-fired toasts (where the user never focused into the toast) do not disrupt existing focus
214+
215+
The structural accessibility problems remain unresolved:
216+
217+
- ❌ SC 2.2.1 — auto-dismiss timing
218+
- ❌ SC 4.1.3 — ARIA live region inconsistencies across browser/screen reader combinations
219+
- ❌ SC 2.1.1 — keyboard race condition against the timer
220+
- ❌ Visibility under screen magnification
221+
222+
#### How leading design systems decide
223+
224+
| Design system | Decision |
225+
|---|---|
226+
| **GOV.UK Design System** | No toast — Notification Banner (persistent) instead |
227+
| **U.S. Web Design System** | No toast — Alert + Site Alert instead |
228+
| **GitHub Primer** | Toast officially banned after moderated usability tests with disabled users: "The tests showed significant problems that cannot be addressed with a sprinkling of ARIA." |
229+
| **Adobe Spectrum** | Toast with strict constraints: min. 5 s timeout, pause on hover/focus, F6 landmark navigation |
230+
| **Carbon (IBM) v11** | Split into non-interactive (`role="status"`) and interactive (`role="alertdialog"` with full focus management) |
231+
232+
#### References
233+
234+
- [Adrian Roselli — Defining Toast Messages](https://adrianroselli.com/2020/01/defining-toast-messages.html) — analysis of ~50 implementations, none passed a full WCAG audit
235+
- [Scott O'Hara — A Toast to Accessibility](https://www.scottohara.me/blog/2019/07/08/a-toast-to-a11y-toasts.html)
236+
- [Sara Soueidan — Accessible Notifications with ARIA Live Regions (Part 2)](https://www.sarasoueidan.com/blog/accessible-notifications-with-aria-live-regions-part-2/)
237+
- [Adam Silver — Can you make toast messages accessible?](https://adamsilver.io/blog/can-you-make-toast-messages-accessible/)
238+
- [GitHub Primer — Accessible Notifications and Messages](https://primer.style/accessibility/patterns/accessible-notifications-and-messages/)
239+
- [TetraLogical — Why are my live regions not working?](https://tetralogical.com/blog/2024/05/01/why-are-my-live-regions-not-working/)
240+
- [W3C WCAG Understanding 2.2.1 — Timing Adjustable](https://www.w3.org/WAI/WCAG21/Understanding/timing-adjustable.html)
241+
- [W3C WCAG Working Group Issue #1814](https://github.com/w3c/wcag/issues/1814)
242+
- [Carbon Design System — Notification Pattern](https://carbondesignsystem.com/patterns/notification-pattern/)

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,8 @@
3131
"lint:tsc": "pnpm -r --no-bail lint:tsc",
3232
"unused": "pnpm -r unused",
3333
"ncu:major": "ncu && pnpm -r exec ncu",
34-
"ncu:minor": "ncu -t minor -u && pnpm -r exec ncu -t minor -u -x @kern-ui/*,@stencil/core,@unocss/*",
35-
"ncu:patch": "ncu -t patch -u && pnpm -r exec ncu -t patch -u -x @kern-ui/*,@unocss/*",
34+
"ncu:minor": "ncu -t minor -u && pnpm -r exec ncu -t minor -u -x @kern-ux/*,@stencil/core",
35+
"ncu:patch": "ncu -t patch -u && pnpm -r exec ncu -t patch -u -x @kern-ux/*",
3636
"pack": "pnpm -r exec pnpm pack",
3737
"reinstall": "pnpm clean:pnpm && pnpm i",
3838
"smoketest": "pnpm clean && pnpm i && pnpm build && pnpm format && pnpm lint && pnpm test:unit && pnpm test:e2e && pnpm unused",

‎packages/components/.stylelintrc.json‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,18 @@
11
{
2-
"extends": ["../../.stylelintrc.json"]
2+
"extends": ["../../.stylelintrc.json"],
3+
"rules": {
4+
"kolibri/common-component-css-must-be-in-layer": false,
5+
"kolibri/component-allowed-layer-names": true,
6+
"kolibri/theme-allowed-layer-names": true,
7+
"kolibri/common-no-at-root": false,
8+
"kolibri/common-no-layer-in-reuse-files": true,
9+
"kolibri/common-require-component-layer": [
10+
true,
11+
{
12+
"layerName": "kol-component",
13+
"pathPattern": "/packages/components/src/components/",
14+
"strict": false
15+
}
16+
]
17+
}
318
}

‎packages/components/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,7 @@
108108
"@public-ui/stencil-react-output-target": "0.6.0",
109109
"@public-ui/stencil-solid-output-target": "0.2.0",
110110
"@public-ui/stencil-vue-output-target": "0.9.0",
111+
"@public-ui/stylelint-rules": "workspace:*",
111112
"@revolist/svelte-output-target": "0.0.7",
112113
"@stencil-community/eslint-plugin": "0.10.0",
113114
"@stencil-community/postcss": "2.2.0",

‎packages/themes/default/.prettierignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/assets/**
2+
/node_modules/**

‎packages/themes/default/.stylelintignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
src/assets/
1+
assets/
22

33
**/*.md
44
**/*.mustache
@@ -8,3 +8,4 @@ src/assets/
88
**/*.ts
99
**/*.tsx
1010
**/*.twig
11+
**/*.json

0 commit comments

Comments
 (0)
⚡