Skip to content

Commit 8f3fb45

Browse files
Neil-Linclaude
Neil-Lin
and
claude
committed
release: 2.0.1
- au-input forwards only its documented attributes to the inner input; hidden, inert, style and inline handlers no longer stick to the field. - au-input keeps a usable field at narrow widths; colour inputs keep their swatch. - au-file-upload's default trigger has a 7.6:1 focus outline, adjustable via --au-file-upload-trigger-focus-outline-*. - au-breadcrumbs shows a focus outline in forced-colors mode. - More browser checks run in CI; demo themes meet their contrast guidance. - Reproducible bundle banner; docs require Node 22. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
1 parent 0a64e90 commit 8f3fb45

42 files changed

Lines changed: 237 additions & 50 deletions

Some content is hidden

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

‎.github/workflows/ci.yml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,11 @@ jobs:
9393
- run: npm run test:form-flow
9494
- run: npm run test:dropdown:chrome
9595
- run: node test/browser/tree.mjs chrome
96+
- run: node test/browser/accordion.mjs chrome
97+
- run: node test/browser/breadcrumbs-html.mjs chrome
98+
- run: node test/browser/card.mjs chrome
99+
- run: node test/browser/carousel.mjs chrome
100+
- run: node test/browser/file-upload.mjs chrome
96101
- name: SSR across Next, Nuxt and Angular
97102
run: npm test --prefix test/ssr
98103
- run: npm ci --prefix test/angular-aot

‎CONTRIBUTING.md‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ This document explains how to set up your development environment, create new co
77

88
## Prerequisites
99

10-
- **Node.js 20 or higher** — components are tested in a real Chromium instance via `@web/test-runner`
10+
- **Node.js 22 or higher** — components are tested in a real Chromium instance via `@web/test-runner`
1111
- **Git**
1212

1313
```bash
@@ -59,7 +59,9 @@ Use `npm run test:css -- chrome`, `npm run test:controls -- chrome`, and
5959
`npm run test:pagination -- chrome` for Chrome-only runs. Omitting the argument
6060
runs Chrome, Firefox and Safari; the latter two require `UI_KIT_WEBDRIVER_MODULE`
6161
pointing to an installed Selenium client, their browser drivers, and (for Safari)
62-
remote automation permission. Safari needs macOS.
62+
remote automation permission. Safari needs macOS. The component scripts in
63+
`test/browser/` take the same argument, for example
64+
`node test/browser/carousel.mjs chrome`.
6365

6466
A full check builds fresh bundles first, then runs the documentation, Chrome
6567
integration, SSR and Angular AOT checks. SSR runs separately through

‎README.md‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -344,6 +344,9 @@ Accesserty UI Kit components are framework-agnostic Web Components. Pass transla
344344
<au-switch label="接收通知" on="開啟" off="關閉"></au-switch>
345345
```
346346

347+
Text attributes use the `data-text-` prefix, except on `au-file-upload`, whose
348+
text attributes use `msg-` (for example `msg-drop-text`).
349+
347350
For framework use, bind these attributes to your normal i18n strings, such as `:label="t('upload.label')"`, `data-text-page-announcement={t('pagination.announcement')}`, or `[attr.data-text-toggle]="treeToggleLabel"`.
348351

349352

@@ -440,6 +443,13 @@ Now change `--color-primary-500` once, and every component you connected follows
440443
stylesheet, define the same tokens in your own CSS; the connections work the same
441444
way.
442445

446+
**Check contrast whenever you change a colour.** Text needs at least 4.5:1
447+
against its background; focus outlines and control borders need at least 3:1
448+
(WCAG 2.2). Several components draw their focus outline *inside* the element,
449+
on top of its background, so a darker or more saturated background also needs a
450+
new focus colour — for example `--au-accordion-heading-focus-shadow-color`.
451+
Check the hover and active backgrounds too, not only the resting state.
452+
443453
**See a complete example.** [`demo/demo.css`](demo/demo.css) connects tokens to a
444454
themed button under `.custom-btn--primary-flat`. The result is on
445455
[`demo/button.html`](demo/button.html).
@@ -598,7 +608,7 @@ transitions. Verify custom themes and application-level accessibility separately
598608

599609
## Development
600610

601-
Requires **Node.js 20 or higher**.
611+
Requires **Node.js 22 or higher** (the version CI runs).
602612

603613
```bash
604614
# Install dependencies

‎demo/accordion.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33

44
<head>
55
<meta charset="UTF-8" />
6+
<link rel="icon" href="data:,">
67
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
78
<title>Accesserty UI Kit Accordion</title>
89
<link rel="stylesheet" href="../src/css/au-style.css" />

‎demo/breadcrumbs.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33

44
<head>
55
<meta charset="UTF-8" />
6+
<link rel="icon" href="data:,">
67
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
78
<title>Accesserty UI Kit Breadcrumbs</title>
89
<link rel="stylesheet" href="../src/css/au-style.css" />

‎demo/button.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33

44
<head>
55
<meta charset="UTF-8" />
6+
<link rel="icon" href="data:,">
67
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
78
<title>Accesserty UI Kit Button</title>
89
<link rel="stylesheet" href="../src/css/au-style.css" />

‎demo/card.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33

44
<head>
55
<meta charset="UTF-8" />
6+
<link rel="icon" href="data:,">
67
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
78
<title>Accesserty UI Kit Card</title>
89
<link rel="stylesheet" href="../src/css/au-style.css" />

‎demo/carousel.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5+
<link rel="icon" href="data:,">
56
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
67
<title>Accesserty UI Kit — Carousel (&lt;au-carousel&gt;)</title>
78
<!-- The <au-carousel> Web Component ships in this bundle. Slide content below

‎demo/checkbox.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33

44
<head>
55
<meta charset="UTF-8" />
6+
<link rel="icon" href="data:,">
67
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
78
<title>Accesserty UI Kit Checkbox</title>
89
<link rel="stylesheet" href="../src/css/au-style.css" />

‎demo/demo.css‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -241,12 +241,15 @@ code {
241241
/* --au-accordion-heading-border-style:; */
242242
--au-accordion-heading-border-color: var(--color-primary-500);
243243
--au-accordion-heading-bg: var(--color-primary-500);
244-
--au-accordion-heading-hover-bg: var(--color-primary-400);
245-
--au-accordion-heading-hover-border-color: var(--color-primary-400);
246-
--au-accordion-heading-active-bg: var(--color-primary-600);
247-
--au-accordion-heading-active-border-color: var(--color-primary-600);
244+
/* Darker on hover/active: white text stays at 7:1+ (blue-400 would be 3.4:1). */
245+
--au-accordion-heading-hover-bg: var(--color-primary-600);
246+
--au-accordion-heading-hover-border-color: var(--color-primary-600);
247+
--au-accordion-heading-active-bg: var(--color-primary-700);
248+
--au-accordion-heading-active-border-color: var(--color-primary-700);
248249
/* --au-accordion-heading-focus-shadow-width:; */
249-
/* --au-accordion-heading-focus-shadow-color:; */
250+
/* The default dark focus outline is inset over the heading background, so a
251+
blue heading needs a light outline (white on blue-500: 4.7:1). */
252+
--au-accordion-heading-focus-shadow-color: var(--color-white);
250253
--au-accordion-content-bg: var(--color-blue-50);
251254
--au-accordion-content-text-color: var(--color-blue-600);
252255
/* --au-accordion-content-padding-top:; */
@@ -396,6 +399,8 @@ code {
396399
/* --au-file-upload-delete-active-border-color:; */
397400
/* --au-file-upload-delete-focus-shadow-width:; */
398401
/* --au-file-upload-delete-focus-shadow-color:; */
402+
/* --au-file-upload-trigger-focus-outline-width:; */
403+
/* --au-file-upload-trigger-focus-outline-color:; */
399404
&::part(delete) {
400405
text-transform: uppercase;
401406
color: var(--color-danger-700);
@@ -409,7 +414,7 @@ code {
409414
/* --au-input-label-text-size:; */
410415
/* --au-input-padding-vertical:; */
411416
/* --au-input-padding-horizontal:; */
412-
--au-input-text-color: var(--color-green-500);
417+
--au-input-text-color: var(--color-green-600);
413418
/* --au-input-text-size:; */
414419
/* --au-input-border-radius:; */
415420
--au-input-bg: var(--color-gray-100);

0 commit comments

Comments
 (0)