@pnx-mixtape/mxds 0.1.0-rc.2 → 0.1.0-rc.4

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 (211) hide show
  1. package/.storybook/{preview.ts → preview.tsx} +4 -0
  2. package/.storybook/src/docs.tsx +29 -0
  3. package/dist/build/accordion.css +1 -1
  4. package/dist/build/accordion.entry.js +1 -1
  5. package/dist/build/autocomplete.css +1 -1
  6. package/dist/build/autocomplete.entry.js +1 -1
  7. package/dist/build/base.css +1 -1
  8. package/dist/build/breadcrumb.css +1 -1
  9. package/dist/build/button.css +1 -1
  10. package/dist/build/card.css +1 -1
  11. package/dist/build/carousel.css +1 -1
  12. package/dist/build/chunks/{Accordion-z-dH6nFH.js → Accordion-GN0sME4W.js} +1 -1
  13. package/dist/build/chunks/{AccordionMobile-BYPPNyf5.js → AccordionMobile-DG5jSe8Q.js} +1 -1
  14. package/dist/build/chunks/{Autocomplete-2L6tLLuh.js → Autocomplete-B4RtkAyh.js} +1 -1
  15. package/dist/build/chunks/{ClosableAlert-DdXbF1J2.js → ClosableAlert-DEhj8Nxm.js} +1 -1
  16. package/dist/build/chunks/{Dialog-Ds8gzhri.js → Dialog-Haahn-Yn.js} +1 -1
  17. package/dist/build/chunks/Gallery-D8NGXy2Q.js +1 -0
  18. package/dist/build/chunks/GlobalToggle-B52fdBQu.js +1 -0
  19. package/dist/build/chunks/{InPageNavigation-CVieEl9u.js → InPageNavigation-Dyn2TR-N.js} +1 -1
  20. package/dist/build/chunks/Navigation-hOrfLq7h.js +1 -0
  21. package/dist/build/chunks/{Sticky-cWUVSOXN.js → Sticky-BGCuuEJK.js} +1 -1
  22. package/dist/build/chunks/{Tabs-DA_Ez8pv.js → Tabs-DYy1YTdU.js} +1 -1
  23. package/dist/build/chunks/enums-DLV_1NAf.js +1 -0
  24. package/dist/build/chunks/utilities-_Bq3TxAQ.js +1 -0
  25. package/dist/build/constants.css +1 -1
  26. package/dist/build/cookie-consent.css +1 -1
  27. package/dist/build/dialog.css +1 -1
  28. package/dist/build/dialog.entry.js +1 -1
  29. package/dist/build/elements.js +1 -1
  30. package/dist/build/filters.css +1 -1
  31. package/dist/build/filters.entry.js +1 -1
  32. package/dist/build/form.css +1 -1
  33. package/dist/build/gallery.entry.js +1 -1
  34. package/dist/build/global-alert.css +1 -1
  35. package/dist/build/global-alert.entry.js +1 -1
  36. package/dist/build/grid.css +1 -1
  37. package/dist/build/header.css +1 -1
  38. package/dist/build/header.entry.js +1 -1
  39. package/dist/build/icon.css +1 -1
  40. package/dist/build/in-page-navigation.entry.js +1 -1
  41. package/dist/build/list-item.css +1 -1
  42. package/dist/build/navigation.css +1 -1
  43. package/dist/build/navigation.entry.js +1 -1
  44. package/dist/build/one-time-code.css +1 -0
  45. package/dist/build/popover.css +1 -1
  46. package/dist/build/print.css +1 -1
  47. package/dist/build/react.js +1 -1
  48. package/dist/build/steps.css +1 -1
  49. package/dist/build/sticky.entry.js +1 -1
  50. package/dist/build/tabs.css +1 -1
  51. package/dist/build/tabs.entry.js +1 -1
  52. package/dist/build/utilities.css +1 -1
  53. package/dist/types/Atom/Link/Link.d.ts.map +1 -1
  54. package/dist/types/Component/Accordion/Accordion.d.ts.map +1 -1
  55. package/dist/types/Component/Dialog/Dialog.d.ts.map +1 -1
  56. package/dist/types/Component/Filters/Elements/Filters.d.ts +20 -1
  57. package/dist/types/Component/Filters/Elements/Filters.d.ts.map +1 -1
  58. package/dist/types/Component/Filters/Filters.d.ts +7 -2
  59. package/dist/types/Component/Filters/Filters.d.ts.map +1 -1
  60. package/dist/types/Component/Gallery/Gallery.d.ts.map +1 -1
  61. package/dist/types/Component/Pagination/Components/PaginationContext.d.ts.map +1 -1
  62. package/dist/types/Component/Tabs/Tabs.d.ts.map +1 -1
  63. package/dist/types/Form/Autocomplete/Autocomplete.d.ts +2 -2
  64. package/dist/types/Form/Autocomplete/Autocomplete.d.ts.map +1 -1
  65. package/dist/types/Form/Autocomplete/Elements/Autocomplete.d.ts +10 -0
  66. package/dist/types/Form/Autocomplete/Elements/Autocomplete.d.ts.map +1 -1
  67. package/dist/types/Form/OneTimeCode/OneTimeCode.d.ts +12 -0
  68. package/dist/types/Form/OneTimeCode/OneTimeCode.d.ts.map +1 -0
  69. package/dist/types/Utility/Hooks/useIsomorphicLayoutEffect.d.ts +4 -0
  70. package/dist/types/Utility/Hooks/useIsomorphicLayoutEffect.d.ts.map +1 -0
  71. package/dist/types/enums.d.ts +4 -0
  72. package/dist/types/enums.d.ts.map +1 -1
  73. package/dist/types/react.d.ts +1 -0
  74. package/dist/types/react.d.ts.map +1 -1
  75. package/package.json +3 -3
  76. package/src/Atom/Button/__snapshots__/Button.stories.ts.snap +2 -3
  77. package/src/Atom/Button/_buttons.css +16 -0
  78. package/src/Atom/Button/button.twig +4 -1
  79. package/src/Atom/DefinitionList/DefinitionList.stories.ts +3 -0
  80. package/src/Atom/Icon/_icon.css +3 -0
  81. package/src/Atom/Link/Link.tsx +16 -3
  82. package/src/Atom/Link/__snapshots__/Link.stories.ts.snap +7 -12
  83. package/src/Atom/Link/__snapshots__/Link.stories.tsx.snap +1 -1
  84. package/src/Atom/Link/_links.css +9 -0
  85. package/src/Atom/Link/link.twig +8 -2
  86. package/src/Atom/LinkedImage/linked-image.twig +1 -2
  87. package/src/Atom/_generic.css +0 -10
  88. package/src/Component/Accordion/Accordion.stories.ts +31 -0
  89. package/src/Component/Accordion/Accordion.tsx +3 -2
  90. package/src/Component/Accordion/AccordionItem.stories.ts +27 -0
  91. package/src/Component/Accordion/__snapshots__/Accordion.stories.ts.snap +36 -0
  92. package/src/Component/Accordion/__snapshots__/AccordionItem.stories.ts.snap +16 -0
  93. package/src/Component/Accordion/accordion.css +3 -1
  94. package/src/Component/Breadcrumb/__snapshots__/Breadcrumb.stories.ts.snap +3 -6
  95. package/src/Component/Breadcrumb/breadcrumb.css +4 -0
  96. package/src/Component/Card/__snapshots__/Card.stories.ts.snap +11 -22
  97. package/src/Component/Card/card.css +2 -2
  98. package/src/Component/Carousel/Carousel.stories.ts +55 -0
  99. package/src/Component/Carousel/Carousel.stories.tsx +74 -0
  100. package/src/Component/Carousel/__snapshots__/Carousel.stories.ts.snap +273 -88
  101. package/src/Component/Carousel/__snapshots__/Carousel.stories.tsx.snap +5 -3
  102. package/src/Component/Carousel/carousel.css +1 -1
  103. package/src/Component/ContentBlock/__snapshots__/ContentBlock.stories.ts.snap +12 -24
  104. package/src/Component/CookieConsent/cookie-consent.css +6 -1
  105. package/src/Component/Dialog/Dialog.stories.ts +33 -0
  106. package/src/Component/Dialog/Dialog.stories.tsx +25 -0
  107. package/src/Component/Dialog/Dialog.tsx +2 -2
  108. package/src/Component/Dialog/__snapshots__/Dialog.stories.ts.snap +33 -2
  109. package/src/Component/Dialog/__snapshots__/Dialog.stories.tsx.snap +2 -0
  110. package/src/Component/Dialog/dialog.css +5 -2
  111. package/src/Component/DropMenu/DropMenu.stories.ts +39 -1
  112. package/src/Component/DropMenu/DropMenu.stories.tsx +29 -0
  113. package/src/Component/DropMenu/DropMenu.tsx +1 -1
  114. package/src/Component/DropMenu/__snapshots__/DropMenu.stories.ts.snap +14 -0
  115. package/src/Component/DropMenu/__snapshots__/DropMenu.stories.tsx.snap +3 -1
  116. package/src/Component/Filters/Elements/Filters.ts +71 -1
  117. package/src/Component/Filters/FilterItem.stories.ts +2 -1
  118. package/src/Component/Filters/FilterItem.tsx +1 -1
  119. package/src/Component/Filters/Filters.figma.ts +1 -1
  120. package/src/Component/Filters/Filters.stories.ts +95 -3
  121. package/src/Component/Filters/Filters.stories.tsx +246 -17
  122. package/src/Component/Filters/Filters.tsx +145 -29
  123. package/src/Component/Filters/README.md +102 -37
  124. package/src/Component/Filters/__snapshots__/FilterItem.stories.tsx.snap +3 -3
  125. package/src/Component/Filters/__snapshots__/Filters.stories.ts.snap +82 -4
  126. package/src/Component/Filters/__snapshots__/Filters.stories.tsx.snap +9 -3
  127. package/src/Component/Filters/filters.css +11 -0
  128. package/src/Component/Gallery/Gallery.tsx +2 -2
  129. package/src/Component/GlobalAlert/global-alert.css +3 -0
  130. package/src/Component/HeroBanner/HeroBanner.stories.ts +1 -1
  131. package/src/Component/HeroBanner/__snapshots__/HeroBanner.stories.ts.snap +4 -8
  132. package/src/Component/HeroSearch/__snapshots__/HeroSearch.stories.ts.snap +5 -10
  133. package/src/Component/InPageAlert/__snapshots__/InPageAlert.stories.ts.snap +6 -12
  134. package/src/Component/InPageNavigation/InPageNavigation.stories.ts +50 -0
  135. package/src/Component/InPageNavigation/InPageNavigation.stories.tsx +78 -0
  136. package/src/Component/InPageNavigation/__snapshots__/InPageNavigation.stories.ts.snap +35 -1
  137. package/src/Component/InPageNavigation/__snapshots__/InPageNavigation.stories.tsx.snap +2 -0
  138. package/src/Component/LinkList/__snapshots__/LinkList.stories.ts.snap +6 -12
  139. package/src/Component/ListItem/__snapshots__/ListItem.stories.ts.snap +7 -14
  140. package/src/Component/ListItem/list-item.css +1 -1
  141. package/src/Component/Navigation/Dropdown.stories.tsx +46 -0
  142. package/src/Component/Navigation/Navigation.stories.ts +56 -0
  143. package/src/Component/Navigation/__snapshots__/Dropdown.stories.tsx.snap +2 -0
  144. package/src/Component/Navigation/__snapshots__/Navigation.stories.ts.snap +57 -0
  145. package/src/Component/Navigation/_navigation-collapsible.css +3 -1
  146. package/src/Component/Navigation/_navigation-dropdown.css +3 -1
  147. package/src/Component/Pagination/Components/PaginationContext.tsx +2 -1
  148. package/src/Component/Pagination/Components/PaginationItem.tsx +1 -1
  149. package/src/Component/Pagination/Pagination.stories.ts +36 -0
  150. package/src/Component/Pagination/Pagination.stories.tsx +31 -0
  151. package/src/Component/Pagination/__snapshots__/Pagination.stories.ts.snap +69 -12
  152. package/src/Component/Pagination/__snapshots__/Pagination.stories.tsx.snap +3 -1
  153. package/src/Component/Pagination/pagination-item.twig +1 -1
  154. package/src/Component/Popover/__snapshots__/Popover.stories.ts.snap +13 -26
  155. package/src/Component/Popover/popover.css +4 -2
  156. package/src/Component/SideNavigation/__snapshots__/SideNavigation.stories.ts.snap +1 -2
  157. package/src/Component/SocialLinks/__snapshots__/SocialLinks.stories.ts.snap +6 -9
  158. package/src/Component/Steps/Steps.stories.ts +1 -1
  159. package/src/Component/Steps/steps.css +13 -0
  160. package/src/Component/Tabs/Tabs.stories.ts +22 -0
  161. package/src/Component/Tabs/Tabs.stories.tsx +24 -0
  162. package/src/Component/Tabs/Tabs.tsx +2 -2
  163. package/src/Component/Tabs/__snapshots__/Tabs.stories.ts.snap +18 -0
  164. package/src/Component/Tabs/__snapshots__/Tabs.stories.tsx.snap +3 -1
  165. package/src/Component/Tabs/tabs.css +6 -5
  166. package/src/Form/Autocomplete/Autocomplete.stories.ts +81 -4
  167. package/src/Form/Autocomplete/Autocomplete.stories.tsx +85 -1
  168. package/src/Form/Autocomplete/Autocomplete.tsx +19 -6
  169. package/src/Form/Autocomplete/Elements/Autocomplete.ts +24 -1
  170. package/src/Form/Autocomplete/__snapshots__/Autocomplete.stories.ts.snap +38 -4
  171. package/src/Form/Autocomplete/__snapshots__/Autocomplete.stories.tsx.snap +8 -4
  172. package/src/Form/Autocomplete/autocomplete.css +12 -1
  173. package/src/Form/Autocomplete/autocomplete.twig +1 -1
  174. package/src/Form/OneTimeCode/OneTimeCode.stories.ts +20 -0
  175. package/src/Form/OneTimeCode/OneTimeCode.stories.tsx +18 -0
  176. package/src/Form/OneTimeCode/OneTimeCode.tsx +56 -0
  177. package/src/Form/OneTimeCode/README.md +83 -0
  178. package/src/Form/OneTimeCode/__snapshots__/OneTimeCode.stories.ts.snap +7 -0
  179. package/src/Form/OneTimeCode/__snapshots__/OneTimeCode.stories.tsx.snap +3 -0
  180. package/src/Form/OneTimeCode/one-time-code.css +13 -0
  181. package/src/Form/OneTimeCode/one-time-code.twig +31 -0
  182. package/src/Form/__snapshots__/Validation.stories.ts.snap +1 -1
  183. package/src/Form/form.css +95 -35
  184. package/src/Layout/Footer/__snapshots__/Footer.stories.ts.snap +18 -33
  185. package/src/Layout/Grid/Grid.stories.ts +1 -0
  186. package/src/Layout/Grid/Grid.stories.tsx +26 -0
  187. package/src/Layout/Grid/__snapshots__/Grid.stories.tsx.snap +2 -0
  188. package/src/Layout/Grid/grid.css +12 -0
  189. package/src/Layout/Header/Header.stories.ts +33 -0
  190. package/src/Layout/Header/Header.stories.tsx +31 -0
  191. package/src/Layout/Header/__snapshots__/Header.stories.ts.snap +50 -0
  192. package/src/Layout/Header/__snapshots__/Header.stories.tsx.snap +2 -0
  193. package/src/Layout/Header/_header.css +4 -2
  194. package/src/Layout/Header/_toggles.css +4 -1
  195. package/src/Layout/Masthead/__snapshots__/Masthead.stories.ts.snap +8 -16
  196. package/src/Layout/Section/__snapshots__/Background.stories.ts.snap +2 -4
  197. package/src/Layout/Section/__snapshots__/Section.stories.ts.snap +4 -8
  198. package/src/Utility/Hooks/useIsomorphicLayoutEffect.ts +8 -0
  199. package/src/Utility/_mixins.css +46 -0
  200. package/src/Utility/print.css +1 -1
  201. package/src/Utility/utilities.css +20 -0
  202. package/src/_custom-media.css +3 -2
  203. package/src/constants.css +3 -13
  204. package/src/enums.ts +5 -0
  205. package/src/react.ts +1 -0
  206. package/tools/test-utils/screen-reader.ts +33 -0
  207. package/dist/build/chunks/Gallery-BT3cxS5m.js +0 -1
  208. package/dist/build/chunks/GlobalToggle-DQHho97V.js +0 -1
  209. package/dist/build/chunks/Navigation-B9Wug-ok.js +0 -1
  210. package/dist/build/chunks/disclosure-widget-BETzOHLO.js +0 -1
  211. package/dist/build/chunks/utilities-C5dAO2YA.js +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../src/react.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../src/react.ts"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@pnx-mixtape/mxds",
3
3
  "description": "The Mixtape Design System",
4
- "version": "0.1.0-rc.2",
4
+ "version": "0.1.0-rc.4",
5
5
  "license": "MIT",
6
6
  "dependencies": {
7
7
  "@floating-ui/dom": "^1.7.6",
@@ -22,6 +22,7 @@
22
22
  "@csstools/postcss-global-data": "^4.0.0",
23
23
  "@csstools/stylelint-formatter-github": "^2.0.0",
24
24
  "@figma/code-connect": "^2.0.0",
25
+ "@guidepup/virtual-screen-reader": "^0.32.1",
25
26
  "@storybook/addon-a11y": "^10.4.6",
26
27
  "@storybook/addon-docs": "^10.4.6",
27
28
  "@storybook/addon-links": "^10.4.6",
@@ -38,7 +39,6 @@
38
39
  "@vitejs/plugin-react": "^6.0.2",
39
40
  "@vitest/browser-playwright": "4.1.11",
40
41
  "@vitest/coverage-v8": "4.1.11",
41
- "axe-playwright": "^2.2.2",
42
42
  "chromatic": "^18.0.1",
43
43
  "concurrently": "^10.0.3",
44
44
  "cz-conventional-changelog": "^3.3.0",
@@ -46,7 +46,7 @@
46
46
  "drupal-twig-extensions": "1.0.0-beta.5",
47
47
  "jsdom": "^30.0.0",
48
48
  "lightningcss": "^1.32.0",
49
- "oxfmt": "^0.68.0",
49
+ "oxfmt": "^0.71.0",
50
50
  "oxlint": "^1.71.0",
51
51
  "playwright": "^1.61.0",
52
52
  "postcss": "^8.5.15",
@@ -78,10 +78,9 @@ exports[`Light 1`] = `
78
78
 
79
79
  exports[`Link 1`] = `
80
80
  "
81
- <a class="mx-button" href="#">
82
-
83
- <span>Button</span>
81
+ <a class="mx-button" href="#">
84
82
 
83
+ Button
85
84
  </a>
86
85
  "
87
86
  `;
@@ -32,6 +32,22 @@
32
32
  &:disabled {
33
33
  cursor: not-allowed;
34
34
  opacity: 0.3;
35
+
36
+ @media (--forced-colors) {
37
+ /* opt out so GrayText survives */
38
+ --forced-colour: GrayText;
39
+
40
+ forced-color-adjust: none;
41
+ opacity: 1;
42
+ color: GrayText;
43
+ border-color: GrayText;
44
+ background-color: ButtonFace;
45
+ }
46
+ }
47
+
48
+ /* system colour for any glyph painted inside a button */
49
+ @media (--forced-colors) {
50
+ --forced-colour: ButtonText;
35
51
  }
36
52
  }
37
53
 
@@ -9,9 +9,12 @@
9
9
  {% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
10
10
 
11
11
  {% if as == "link" %}
12
+ {% if iconOnly %}
13
+ {% set attributes = attributes.setAttribute('aria-label', title) %}
14
+ {% endif %}
12
15
  <a{{ attributes}} href="{{ href }}">
13
16
  {{ iconStart }}
14
- <span{% if iconOnly %} class="sr-only"{% endif %}>{{ title }}</span>
17
+ {% if not iconOnly %}{{ title }}{% endif %}
15
18
  {{ iconEnd }}
16
19
  </a>
17
20
  {% elseif as == 'input' %}
@@ -48,6 +48,9 @@ const meta: Meta<MxDefinitionListType> = {
48
48
  columns: {
49
49
  type: "boolean",
50
50
  },
51
+ summary: {
52
+ type: "boolean",
53
+ },
51
54
  },
52
55
  }
53
56
 
@@ -1,4 +1,5 @@
1
1
  @import "_mixin-icon.css";
2
+ @import "../../Utility/_mixins.css";
2
3
 
3
4
  /**
4
5
  * Icon
@@ -21,6 +22,8 @@
21
22
  mask-repeat: no-repeat;
22
23
  background-color: currentcolor;
23
24
  color: var(--icon-colour, inherit);
25
+
26
+ @add-mixin forced-colors-paint;
24
27
  }
25
28
  }
26
29
 
@@ -1,4 +1,4 @@
1
- import { JSX, ComponentPropsWithoutRef, PropsWithChildren } from "react"
1
+ import { JSX, ComponentPropsWithoutRef, PropsWithChildren, useId } from "react"
2
2
  import classNames from "classnames"
3
3
  import { useLinkComponent } from "../../react"
4
4
 
@@ -28,6 +28,15 @@ const Link = ({
28
28
 
29
29
  const externalAttrs = external ? { target: "_blank", rel: "noopener noreferrer" } : {}
30
30
 
31
+ // `children` can be arbitrary JSX, so this can't fold into a single
32
+ // `aria-label` the way the Twig Link atom does. Instead, the supplemental
33
+ // text is `aria-describedby`'d and `aria-hidden` - kept out of the normal
34
+ // accessibility tree walk (so it isn't announced twice) while still
35
+ // resolving as the link's description, since `aria-hidden` elements remain
36
+ // valid `aria-describedby` targets.
37
+ const descriptionId = useId()
38
+ const hasDescription = external || Boolean(allyText)
39
+
31
40
  return (
32
41
  // oxlint-disable-next-line react/static-components -- LinkComponent is a stable reference from context, not created during render
33
42
  <LinkComponent
@@ -38,12 +47,16 @@ const Link = ({
38
47
  "mx-link--download": download,
39
48
  })}
40
49
  {...(current ? { "aria-current": "page" as const } : {})}
50
+ {...(hasDescription ? { "aria-describedby": descriptionId } : {})}
41
51
  {...externalAttrs}
42
52
  {...props}
43
53
  >
44
54
  {children}
45
- {external && <span className="sr-only">(opens in a new window)</span>}
46
- {allyText && <span className="sr-only">{allyText}</span>}
55
+ {hasDescription && (
56
+ <span id={descriptionId} className="sr-only" aria-hidden="true">
57
+ {[external && "(opens in a new window)", allyText].filter(Boolean).join(" ")}
58
+ </span>
59
+ )}
47
60
  </LinkComponent>
48
61
  )
49
62
  }
@@ -6,18 +6,16 @@ exports[`Download 1`] = `
6
6
 
7
7
  <span class="mx-icon mx-icon--download"></span>
8
8
 
9
- <span>Download (PDF 12kb)</span>
10
-
9
+ Download (PDF 12kb)
11
10
  </a>
12
11
  "
13
12
  `;
14
13
 
15
14
  exports[`External 1`] = `
16
- "
17
- <a href="#" class="mx-link--external" target="_blank" rel="noopener noreferrer">
15
+ "
16
+ <a href="#" class="mx-link--external" target="_blank" rel="noopener noreferrer" aria-label="Hyperlink (opens in a new window)">
18
17
 
19
- <span>Hyperlink</span>
20
- <span class="sr-only">(opens in a new window)</span>
18
+ Hyperlink
21
19
  </a>
22
20
  "
23
21
  `;
@@ -28,8 +26,7 @@ exports[`Icon Link 1`] = `
28
26
 
29
27
  <span class="mx-icon mx-icon--link"></span>
30
28
 
31
- <span>Hyperlink</span>
32
-
29
+ Hyperlink
33
30
  </a>
34
31
  "
35
32
  `;
@@ -38,8 +35,7 @@ exports[`Link 1`] = `
38
35
  "
39
36
  <a href="#">
40
37
 
41
- <span>Hyperlink</span>
42
-
38
+ Hyperlink
43
39
  </a>
44
40
  "
45
41
  `;
@@ -48,8 +44,7 @@ exports[`More 1`] = `
48
44
  "
49
45
  <a href="#" class="mx-link--more">
50
46
 
51
- <span>Hyperlink</span>
52
-
47
+ Hyperlink
53
48
  <span class="mx-icon mx-icon--arrow-right"></span>
54
49
 
55
50
  </a>
@@ -1,6 +1,6 @@
1
1
  // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2
2
 
3
- exports[`External 1`] = `"<a href="http://example.com" class="mx-link mx-link--external" target="_blank" rel="noopener noreferrer">Link<span class="sr-only">(opens in a new window)</span></a>"`;
3
+ exports[`External 1`] = `"<a href="http://example.com" class="mx-link mx-link--external" aria-describedby="_r_1_" target="_blank" rel="noopener noreferrer">Link<span id="_r_1_" class="sr-only" aria-hidden="true">(opens in a new window)</span></a>"`;
4
4
 
5
5
  exports[`Link 1`] = `"<a href="http://example.com" class="mx-link">Link</a>"`;
6
6
 
@@ -1,3 +1,5 @@
1
+ @import "../../Utility/_mixins.css";
2
+
1
3
  @layer design-system.defaults {
2
4
  a[href] {
3
5
  color: var(--link-colour, var(--colour-link));
@@ -10,6 +12,11 @@
10
12
  text-underline-offset: 0.2em;
11
13
  text-decoration-thickness: max(0.09em, 2px);
12
14
  }
15
+
16
+ /* system colour for any glyph painted inside a link */
17
+ @media (--forced-colors) {
18
+ --forced-colour: LinkText;
19
+ }
13
20
  }
14
21
 
15
22
  .mx-link--external {
@@ -27,6 +34,8 @@
27
34
  block-size: var(--spacing-s);
28
35
  inline-size: var(--spacing-s);
29
36
  background-color: currentcolor;
37
+
38
+ @add-mixin forced-colors-paint;
30
39
  }
31
40
  }
32
41
 
@@ -18,12 +18,18 @@
18
18
  {% if download %}
19
19
  {% set attributes = attributes.setAttribute('download', '') %}
20
20
  {% endif %}
21
+ {% if iconOnly or external %}
22
+ {% set accessibleLabel = title %}
23
+ {% if external %}
24
+ {% set accessibleLabel = accessibleLabel ~ ' (opens in a new window)' %}
25
+ {% endif %}
26
+ {% set attributes = attributes.setAttribute('aria-label', accessibleLabel) %}
27
+ {% endif %}
21
28
 
22
29
  {% if listItem %}<li>{% endif %}
23
30
  <a{{ attributes }}>
24
31
  {{ iconStart }}
25
- <span{% if iconOnly %} class="sr-only"{% endif %}>{{ title }}</span>
26
- {% if external %}<span class="sr-only">(opens in a new window)</span>{% endif %}
32
+ {% if not iconOnly %}{{ title }}{% endif %}
27
33
  {{ iconEnd }}
28
34
  </a>
29
35
  {% if listItem %}</li>{% endif %}
@@ -1,9 +1,8 @@
1
- {% set attributes = attributes ?? create_attribute() %}
1
+ {% set attributes = (attributes ?? create_attribute()).setAttribute('aria-label', title) %}
2
2
  <a href="{{ href }}" {{ attributes }}>
3
3
  {% if image.src is defined %}
4
4
  {% include '@mixtape/Atom/Image/image.twig' with image only %}
5
5
  {% else %}
6
6
  {{ image }}
7
7
  {% endif %}
8
- <span class="sr-only">{{ title }}</span>
9
8
  </a>
@@ -9,16 +9,6 @@
9
9
  box-sizing: border-box;
10
10
  background-repeat: no-repeat;
11
11
  margin: 0;
12
- opacity: 1;
13
- transition-property:
14
- opacity, color, background-color, border-color, transform, rotate, display, overlay;
15
- transition-duration: 0.5s;
16
- transition-timing-function: var(--ease);
17
- transition-behavior: allow-discrete;
18
-
19
- @starting-style {
20
- opacity: 0;
21
- }
22
12
  }
23
13
 
24
14
  :focus {
@@ -8,6 +8,7 @@ import "./Elements/AccordionGroup"
8
8
  import "./Elements/AccordionMobile"
9
9
  import "./accordion.css"
10
10
  import { Accordion as AccordionType, HeadingTypes } from "@pnx-mixtape/ids-shape"
11
+ import { runScreenReaderWalkthrough } from "../../../tools/test-utils/screen-reader"
11
12
 
12
13
  const meta: Meta<AccordionType> = {
13
14
  tags: ["autodocs", "ids-mvp"],
@@ -87,6 +88,36 @@ export const ToggleAll: Story = {
87
88
  },
88
89
  }
89
90
 
91
+ /**
92
+ * Steps a virtual screen reader through the page with one item open, and asserts on what it announces.
93
+ */
94
+ export const ScreenReaderAnnouncements: Story = {
95
+ play: async ({ canvas, userEvent }) => {
96
+ const summary = canvas.getByText("Music")
97
+ const [accordion] = canvas.getAllByRole("group")
98
+
99
+ await userEvent.click(summary)
100
+ await expect(accordion).toHaveAttribute("open")
101
+
102
+ const log = await runScreenReaderWalkthrough()
103
+ await expect(log).toEqual([
104
+ "document",
105
+ "heading, Accordion group, level 2",
106
+ "group",
107
+ "Music",
108
+ "I'm baby air plant hashtag letterpress blue bottle. Cloud bread dreamcatcher everyday carry lumbersexual, iceland cardigan swag chicharrones lo-fi fanny pack affogato freegan XOXO shaman. Shoreditch cloud bread waistcoat tbh XOXO. Chillwave pour-over umami pug glossier health goth.",
109
+ "end of group",
110
+ "group",
111
+ "Performances",
112
+ "end of group",
113
+ "end of document",
114
+ ])
115
+
116
+ await userEvent.click(summary)
117
+ await expect(accordion).not.toHaveAttribute("open")
118
+ },
119
+ }
120
+
90
121
  export const Test: Story = {
91
122
  parameters: {
92
123
  docs: {
@@ -1,6 +1,7 @@
1
- import { JSX, PropsWithChildren, useEffect, useId, createContext, use, useMemo } from "react"
1
+ import { JSX, PropsWithChildren, useId, createContext, use, useMemo } from "react"
2
2
  import classNames from "classnames"
3
3
  import { useDisclosureState } from "react-stately"
4
+ import useIsomorphicLayoutEffect from "../../Utility/Hooks/useIsomorphicLayoutEffect"
4
5
 
5
6
  type AccordionContextValues = {
6
7
  toggle: (value?: boolean) => void
@@ -28,7 +29,7 @@ const Accordion = ({
28
29
  const rId = useId()
29
30
  const accordionId: string = id || rId
30
31
 
31
- useEffect(() => {
32
+ useIsomorphicLayoutEffect(() => {
32
33
  if (typeof window === "undefined") return
33
34
  if (window.location.hash && window.location.hash === `#${accordionId}`) {
34
35
  expand()
@@ -1,6 +1,7 @@
1
1
  import { Meta, StoryObj } from "@storybook/html-vite"
2
2
  import { expect } from "storybook/test"
3
3
  import { modes } from "../../../.storybook/modes"
4
+ import { runScreenReaderWalkthrough } from "../../../tools/test-utils/screen-reader"
4
5
  import Component from "./accordion-item.twig"
5
6
  import AccordionMobile from "./twig/accordion-mobile.twig"
6
7
  import AccordionDiv from "./twig/accordion-div.twig"
@@ -72,6 +73,32 @@ type Story = StoryObj<AccordionItemType>
72
73
 
73
74
  export const AccordionItem: Story = {}
74
75
 
76
+ /**
77
+ * Steps a virtual screen reader through the page with the item open, and asserts on what it announces.
78
+ */
79
+ export const ScreenReaderAnnouncements: Story = {
80
+ play: async ({ canvas, userEvent }) => {
81
+ const summary = canvas.getByText("Music")
82
+ const accordion = canvas.getByRole("group")
83
+
84
+ await userEvent.click(summary)
85
+ await expect(accordion).toHaveAttribute("open")
86
+
87
+ const log = await runScreenReaderWalkthrough()
88
+ await expect(log).toEqual([
89
+ "document",
90
+ "group",
91
+ "Music",
92
+ "I'm baby air plant hashtag letterpress blue bottle. Cloud bread dreamcatcher everyday carry lumbersexual, iceland cardigan swag chicharrones lo-fi fanny pack affogato freegan XOXO shaman. Shoreditch cloud bread waistcoat tbh XOXO. Chillwave pour-over umami pug glossier health goth.",
93
+ "end of group",
94
+ "end of document",
95
+ ])
96
+
97
+ await userEvent.click(summary)
98
+ await expect(accordion).not.toHaveAttribute("open")
99
+ },
100
+ }
101
+
75
102
  /**
76
103
  * Open by default accordion.
77
104
  */
@@ -72,6 +72,42 @@ exports[`Default Open 1`] = `
72
72
  "
73
73
  `;
74
74
 
75
+ exports[`Screen Reader Announcements 1`] = `
76
+ "<div class="mx-accordions">
77
+ <div class="mx-accordion__title">
78
+
79
+ <h2>Accordion group</h2>
80
+
81
+ </div>
82
+
83
+ <mx-accordion>
84
+ <details class="mx-accordion mx-accordion--divided" id="music">
85
+ <summary class="mx-accordion__toggle">
86
+ Music
87
+ <span class="mx-button mx-icon mx-button--small mx-button--icon-only mx-icon--chevron-down" aria-hidden="true"></span>
88
+ </summary>
89
+ <div class="mx-accordion__content mx-rich-text mx-vertical-flow">
90
+ I'm baby air plant hashtag letterpress blue bottle. Cloud bread dreamcatcher everyday carry lumbersexual, iceland cardigan swag chicharrones lo-fi fanny pack affogato freegan XOXO shaman. Shoreditch cloud bread waistcoat tbh XOXO. Chillwave pour-over umami pug glossier health goth.
91
+ </div>
92
+ </details>
93
+ </mx-accordion>
94
+
95
+ <mx-accordion>
96
+ <details class="mx-accordion mx-accordion--divided" id="performances">
97
+ <summary class="mx-accordion__toggle">
98
+ Performances
99
+ <span class="mx-button mx-icon mx-button--small mx-button--icon-only mx-icon--chevron-down" aria-hidden="true"></span>
100
+ </summary>
101
+ <div class="mx-accordion__content mx-rich-text mx-vertical-flow">
102
+ I'm baby air plant hashtag letterpress blue bottle. Cloud bread dreamcatcher everyday carry lumbersexual, iceland cardigan swag chicharrones lo-fi fanny pack affogato freegan XOXO shaman. Shoreditch cloud bread waistcoat tbh XOXO. Chillwave pour-over umami pug glossier health goth.
103
+ </div>
104
+ </details>
105
+ </mx-accordion>
106
+
107
+ </div>
108
+ "
109
+ `;
110
+
75
111
  exports[`Test 1`] = `
76
112
  "<div class="mx-accordions">
77
113
  <mx-accordion-group>
@@ -59,3 +59,19 @@ exports[`Open 1`] = `
59
59
  </mx-accordion>
60
60
  "
61
61
  `;
62
+
63
+ exports[`Screen Reader Announcements 1`] = `
64
+ "
65
+ <mx-accordion>
66
+ <details class="mx-accordion mx-accordion--divided" id="music-accordion">
67
+ <summary class="mx-accordion__toggle">
68
+ Music
69
+ <span class="mx-button mx-icon mx-button--small mx-button--icon-only mx-icon--chevron-down" aria-hidden="true"></span>
70
+ </summary>
71
+ <div class="mx-accordion__content mx-rich-text mx-vertical-flow">
72
+ I'm baby air plant hashtag letterpress blue bottle. Cloud bread dreamcatcher everyday carry lumbersexual, iceland cardigan swag chicharrones lo-fi fanny pack affogato freegan XOXO shaman. Shoreditch cloud bread waistcoat tbh XOXO. Chillwave pour-over umami pug glossier health goth.
73
+ </div>
74
+ </details>
75
+ </mx-accordion>
76
+ "
77
+ `;
@@ -1,6 +1,7 @@
1
1
  /**
2
2
  * Accordion
3
3
  */
4
+ @import "../../Utility/_mixins.css";
4
5
 
5
6
  @layer design-system.defaults {
6
7
  details {
@@ -59,8 +60,9 @@
59
60
  }
60
61
 
61
62
  & > .mx-accordion__content {
63
+ @add-mixin transition;
64
+
62
65
  display: none;
63
- opacity: 0;
64
66
  overflow: hidden;
65
67
  }
66
68
 
@@ -7,22 +7,19 @@ exports[`Breadcrumb 1`] = `
7
7
  <li>
8
8
  <a href="#">
9
9
 
10
- <span>Home</span>
11
-
10
+ Home
12
11
  </a>
13
12
  </li>
14
13
  <li>
15
14
  <a href="#">
16
15
 
17
- <span>About</span>
18
-
16
+ About
19
17
  </a>
20
18
  </li>
21
19
  <li>
22
20
  <a href="#" aria-current="page">
23
21
 
24
- <span>Join the team</span>
25
-
22
+ Join the team
26
23
  </a>
27
24
  </li>
28
25
  </ul>
@@ -1,3 +1,5 @@
1
+ @import "../../Utility/_mixins.css";
2
+
1
3
  /**
2
4
  * Breadcrumb Navigation
3
5
  */
@@ -35,6 +37,8 @@
35
37
  block-size: var(--spacing-m);
36
38
  inline-size: var(--spacing-m);
37
39
  background-color: currentcolor;
40
+
41
+ @add-mixin forced-colors-paint;
38
42
  }
39
43
  }
40
44
 
@@ -14,8 +14,7 @@ exports[`Block Link 1`] = `
14
14
 
15
15
  <a href="#" class="mx-link--more">
16
16
 
17
- <span>Find out more</span>
18
-
17
+ Find out more
19
18
  </a>
20
19
 
21
20
  </div>
@@ -44,8 +43,7 @@ exports[`Card 1`] = `
44
43
 
45
44
  <a href="#" class="mx-link--more">
46
45
 
47
- <span>Find out more</span>
48
-
46
+ Find out more
49
47
  </a>
50
48
 
51
49
  </div>
@@ -75,8 +73,7 @@ exports[`Collapse 1`] = `
75
73
 
76
74
  <a href="#" class="mx-link--more">
77
75
 
78
- <span>Find out more</span>
79
-
76
+ Find out more
80
77
  </a>
81
78
 
82
79
  </div>
@@ -106,8 +103,7 @@ exports[`Date 1`] = `
106
103
 
107
104
  <a href="#" class="mx-link--more">
108
105
 
109
- <span>Find out more</span>
110
-
106
+ Find out more
111
107
  </a>
112
108
 
113
109
  </div>
@@ -141,8 +137,7 @@ exports[`Icon Tile 1`] = `
141
137
 
142
138
  <a href="#" class="mx-link--more">
143
139
 
144
- <span>Find out more</span>
145
-
140
+ Find out more
146
141
  </a>
147
142
 
148
143
  </div>
@@ -165,8 +160,7 @@ exports[`Reverse 1`] = `
165
160
 
166
161
  <a href="#" class="mx-link--more">
167
162
 
168
- <span>Find out more</span>
169
-
163
+ Find out more
170
164
  </a>
171
165
 
172
166
  </div>
@@ -195,8 +189,7 @@ exports[`Tile 1`] = `
195
189
 
196
190
  <a href="#" class="mx-link--more">
197
191
 
198
- <span>Find out more</span>
199
-
192
+ Find out more
200
193
  </a>
201
194
 
202
195
  </div>
@@ -221,24 +214,21 @@ exports[`With Link List 1`] = `
221
214
 
222
215
  <li><a href="#">
223
216
 
224
- <span>Link one</span>
225
-
217
+ Link one
226
218
  <span class="mx-icon mx-icon--chevron-right"></span>
227
219
 
228
220
  </a>
229
221
  </li>
230
222
  <li><a href="#">
231
223
 
232
- <span>Link two</span>
233
-
224
+ Link two
234
225
  <span class="mx-icon mx-icon--chevron-right"></span>
235
226
 
236
227
  </a>
237
228
  </li>
238
229
  <li><a href="#">
239
230
 
240
- <span>Link three</span>
241
-
231
+ Link three
242
232
  <span class="mx-icon mx-icon--chevron-right"></span>
243
233
 
244
234
  </a>
@@ -286,8 +276,7 @@ exports[`With Tags 1`] = `
286
276
 
287
277
  <a href="#" class="mx-link--more">
288
278
 
289
- <span>Find out more</span>
290
-
279
+ Find out more
291
280
  </a>
292
281
 
293
282
  </div>
@@ -145,8 +145,8 @@
145
145
  }
146
146
  }
147
147
 
148
- &:has(a .sr-only:only-child) {
149
- & a {
148
+ &:has(a[aria-label]) {
149
+ & a:not(:has(.mx-icon)) {
150
150
  margin-block-start: calc(var(--flow-gap, var(--gap)) * -1);
151
151
  }
152
152