@adobe-commerce/elsie 2.0.0-alpha-20260713104057 → 2.0.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +3 -2
  2. package/package.json +11 -11
  3. package/src/components/CartItem/CartItem.css +1 -0
  4. package/src/components/Header/Header.css +1 -0
  5. package/src/components/ToggleButton/ToggleButton.tsx +8 -5
package/CHANGELOG.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @adobe-commerce/elsie
2
2
 
3
- ## 2.0.0-alpha-20260713104057
3
+ ## 2.0.0-beta.0
4
4
 
5
5
  ### Major Changes
6
6
 
@@ -112,12 +112,13 @@
112
112
  - 36354d9: Add disableWhenSingle prop to Picker; defaults to true (preserves existing behavior). Pass false to keep the picker interactive when only one option is available.
113
113
  - 09c2100: Declare `preact` as a runtime dependency. It previously sat in `devDependencies` (unlike `@preact/signals` and `preact-i18n`), so standalone consumers of `@adobe-commerce/elsie` had an unmet `preact` — also the unmet peer of `@preact/preset-vite`, `@storybook/preact-vite` and `@testing-library/preact`. It now resolves to the same `~10.22.1` bundled into `@dropins/tools`. The emitted bundle is unchanged.
114
114
  - 4641ab0: Fix `Field` and `InLineAlert` status/error messages not being announced by screen readers. `Field`'s description/hint element now always carries `role="status"` and `aria-live="polite"`, instead of only adding `aria-live` once an error appeared, so assistive technology reliably announces validation and success messages (WCAG 4.1.3). `InLineAlert` now sets `role="alert"`/`aria-live="assertive"` for `type="error"` and `role="status"`/`aria-live="polite"` for `success`/`warning`, since it previously had no live-region semantics at all.
115
+ - ccada8c: Reset default margin on Header and CartItem titles to support rendering them as semantic headings
115
116
  - cb6eb81: Fix `InLineAlert` additional-action buttons announcing the same accessible name across multiple alerts. Each entry in `additionalActions` may now include an optional `'aria-label'` that is applied to the rendered button (falling back to `label` when omitted), so consumers can give visually identical "Undo"/"Dismiss" style buttons unique, descriptive names for assistive technology.
116
117
  - ab5cf32: Fix `Modal` accessibility: the dialog now exposes `role="dialog"`, `aria-modal="true"`, and an `aria-labelledby` linked to its title. Focus moves into the modal when it opens (falling back to the dialog body when there are no focusable elements), Tab/Shift+Tab now cycles between the first and last focusable elements instead of escaping the modal, and focus returns to the previously focused element when the modal closes.
117
118
  - 58da630: Fix `Picker` accessible name and label association. The `<select>` now falls back to `floatingLabel` or `placeholder` for its `aria-label` when no `name` is provided, and the floating `<label>` is now correctly associated with the rendered `<select>` via its generated id instead of the raw `id` prop.
118
119
  - 450c408: fix(Picker): auto-select and emit the sole option when the control auto-disables, so single-option narrowing on configurable PDPs no longer leaves the value unselected and Add to Cart permanently disabled
119
120
  - 33ebe8a: Add accessible labels to password validation and input status icons (WCAG 1.1.1)
120
- - 547558a: Fix `ToggleButton`'s underlying radio input announcing the shared radio-group `name` (e.g. `"payment-method"`) as its accessible name for every option instead of the option's own visible label, which violates WCAG 2.5.3 (Label in Name). The `aria-label` now defaults to the string `label` when provided, or can be set explicitly via the new optional `ariaLabel` prop for consumers passing a `VNode` label. Consumers that already pass a `VNode` label without `ariaLabel` keep their previous behavior unchanged.
121
+ - 2ad7316: Fix `ToggleButton`'s underlying radio input announcing the shared radio-group `name` (e.g. "payment-method") as its accessible name for every option instead of the option's own visible label, which violates WCAG 2.4.6 (Headings and Labels) and 2.5.3 (Label in Name). The radio input's accessible name now defaults to `aria-labelledby` pointing at the option's own visible label content (e.g. "Check / Money order"), which works correctly whether `label` is a string or a `VNode`. An optional `ariaLabel` prop is still available for consumers who need to set an explicit accessible name via `aria-label` instead.
121
122
  - 016a558: Fix low-contrast field label text in `Input` when a field is in an error state. The floating label color now meets WCAG AA contrast requirements for normal-size text against light backgrounds, matching the color already used for error text elsewhere (helper text, alerts).
122
123
  - 51fcb35: fix(a11y): darken low-contrast focus indicators to meet WCAG 1.4.11 (3:1 non-text contrast)
123
124
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@adobe-commerce/elsie",
3
- "version": "2.0.0-alpha-20260713104057",
3
+ "version": "2.0.0-beta.0",
4
4
  "license": "SEE LICENSE IN LICENSE.md",
5
5
  "description": "Domain Package SDK",
6
6
  "engines": {
@@ -30,12 +30,12 @@
30
30
  "postpublish": "node ./scripts/publish-tools.mjs"
31
31
  },
32
32
  "devDependencies": {
33
- "@adobe-commerce/event-bus": "1.1.1-alpha-20260713104057",
34
- "@adobe-commerce/fetch-graphql": "1.3.1-alpha-20260713104057",
35
- "@adobe-commerce/recaptcha": "1.2.1-alpha-20260713104057",
36
- "@adobe-commerce/storefront-design": "1.1.1-alpha-20260713104057",
33
+ "@adobe-commerce/event-bus": "~1.1.1-beta.0",
34
+ "@adobe-commerce/fetch-graphql": "~1.3.1-beta.0",
35
+ "@adobe-commerce/recaptcha": "1.2.1-beta.0",
36
+ "@adobe-commerce/storefront-design": "~1.1.1-beta.0",
37
37
  "@chromatic-com/storybook": "^5",
38
- "@dropins/build-tools": "1.2.1-alpha-20260713104057"
38
+ "@dropins/build-tools": "~1.2.1-beta.0"
39
39
  },
40
40
  "peerDependencies": {
41
41
  "eslint-plugin-cypress": ">=3.0.0"
@@ -53,12 +53,12 @@
53
53
  "@babel/traverse": "^7.24.0",
54
54
  "@changesets/cli": "^2.30.0",
55
55
  "@graphql-codegen/cli": "^5.0.0",
56
- "@graphql-codegen/client-preset": "^4.1.0",
56
+ "@graphql-codegen/client-preset": "^6.0.1",
57
57
  "@graphql-codegen/typescript-operations": "^4.0.1",
58
58
  "@preact/preset-vite": "^2.8.2",
59
59
  "@preact/signals": "1.3.0",
60
60
  "@storybook/addon-a11y": "^10.4.6",
61
- "@storybook/addon-coverage": "^3.0.1",
61
+ "@storybook/addon-coverage": "^3.0.2",
62
62
  "@storybook/addon-docs": "^10.4.6",
63
63
  "@storybook/preact-vite": "^10.4.6",
64
64
  "@storybook/test-runner": "^0.24.4",
@@ -73,12 +73,12 @@
73
73
  "core-js": "^3.24.0",
74
74
  "deepmerge": "^4.2.2",
75
75
  "dotenv": "^16.0.1",
76
- "eslint": "^9.0.0",
76
+ "eslint": "^9.39.5",
77
77
  "eslint-config-preact": "^2.0.0",
78
78
  "eslint-config-prettier": "^10.0.0",
79
79
  "eslint-plugin-mdx": "^3.8.1",
80
80
  "eslint-plugin-storybook": "^10.4.6",
81
- "glob": "^10.3.15",
81
+ "glob": "^13.0.6",
82
82
  "globals": "^15.0.0",
83
83
  "graphql": "^16.14.2",
84
84
  "graphql-codegen-typescript-mock-data": "^3.5.0",
@@ -101,7 +101,7 @@
101
101
  "vite": "^5.2.10",
102
102
  "vite-plugin-banner": "^0.8.0",
103
103
  "vite-plugin-css-injected-by-js": "^3.5.1",
104
- "vite-plugin-svgr": "^4.2.0",
104
+ "vite-plugin-svgr": "^5.2.0",
105
105
  "vite-tsconfig-paths": "^4.3.2",
106
106
  "wait-on": "^9.0.10",
107
107
  "yargs": "^17.5.1"
package/src/components/CartItem/CartItem.css CHANGED
@@ -46,6 +46,7 @@
46
46
  }
47
47
 
48
48
  .dropin-cart-item__title {
49
+ margin: 0;
49
50
  font: var(--type-body-1-default-font);
50
51
  letter-spacing: var(--type-body-1-default-letter-spacing);
51
52
  color: var(--color-neutral-800);
package/src/components/Header/Header.css CHANGED
@@ -20,6 +20,7 @@
20
20
 
21
21
  .dropin-header-container__title {
22
22
  grid-area: title;
23
+ margin: 0;
23
24
  color: var(--color-neutral-800);
24
25
  }
25
26
 
package/src/components/ToggleButton/ToggleButton.tsx CHANGED
@@ -2,9 +2,9 @@
2
2
  * Copyright 2024 Adobe
3
3
  * All Rights Reserved.
4
4
  *
5
- * NOTICE: Adobe permits you to use, modify, and distribute this
6
- * file in accordance with the terms of the Adobe license agreement
7
- * accompanying it.
5
+ * NOTICE: Adobe permits you to use, modify, and distribute this
6
+ * file in accordance with the terms of the Adobe license agreement
7
+ * accompanying it.
8
8
  *******************************************************************/
9
9
 
10
10
  import { FunctionComponent, VNode } from 'preact';
@@ -42,6 +42,8 @@ export const ToggleButton: FunctionComponent<ToggleButtonProps> = ({
42
42
  selected = true,
43
43
  ...props
44
44
  }) => {
45
+ const contentId = `dropin-toggle-button__content-${name}-${value}`;
46
+
45
47
  return (
46
48
  <div
47
49
  {...props}
@@ -60,12 +62,13 @@ export const ToggleButton: FunctionComponent<ToggleButtonProps> = ({
60
62
  checked={selected}
61
63
  disabled={disabled}
62
64
  onChange={() => onChange && onChange(value)}
63
- aria-label={ariaLabel ?? (typeof label === 'string' ? label : name)}
65
+ aria-label={ariaLabel}
66
+ aria-labelledby={ariaLabel ? undefined : contentId}
64
67
  busy={busy}
65
68
  className={classes([className, 'dropin-toggle-button__radioButton'])}
66
69
  />
67
70
 
68
- <span className="dropin-toggle-button__content">
71
+ <span className="dropin-toggle-button__content" id={contentId}>
69
72
  {icon && (
70
73
  // @ts-ignore
71
74
  <icon.type