@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.
- package/.storybook/{preview.ts → preview.tsx} +4 -0
- package/.storybook/src/docs.tsx +29 -0
- package/dist/build/accordion.css +1 -1
- package/dist/build/accordion.entry.js +1 -1
- package/dist/build/autocomplete.css +1 -1
- package/dist/build/autocomplete.entry.js +1 -1
- package/dist/build/base.css +1 -1
- package/dist/build/breadcrumb.css +1 -1
- package/dist/build/button.css +1 -1
- package/dist/build/card.css +1 -1
- package/dist/build/carousel.css +1 -1
- package/dist/build/chunks/{Accordion-z-dH6nFH.js → Accordion-GN0sME4W.js} +1 -1
- package/dist/build/chunks/{AccordionMobile-BYPPNyf5.js → AccordionMobile-DG5jSe8Q.js} +1 -1
- package/dist/build/chunks/{Autocomplete-2L6tLLuh.js → Autocomplete-B4RtkAyh.js} +1 -1
- package/dist/build/chunks/{ClosableAlert-DdXbF1J2.js → ClosableAlert-DEhj8Nxm.js} +1 -1
- package/dist/build/chunks/{Dialog-Ds8gzhri.js → Dialog-Haahn-Yn.js} +1 -1
- package/dist/build/chunks/Gallery-D8NGXy2Q.js +1 -0
- package/dist/build/chunks/GlobalToggle-B52fdBQu.js +1 -0
- package/dist/build/chunks/{InPageNavigation-CVieEl9u.js → InPageNavigation-Dyn2TR-N.js} +1 -1
- package/dist/build/chunks/Navigation-hOrfLq7h.js +1 -0
- package/dist/build/chunks/{Sticky-cWUVSOXN.js → Sticky-BGCuuEJK.js} +1 -1
- package/dist/build/chunks/{Tabs-DA_Ez8pv.js → Tabs-DYy1YTdU.js} +1 -1
- package/dist/build/chunks/enums-DLV_1NAf.js +1 -0
- package/dist/build/chunks/utilities-_Bq3TxAQ.js +1 -0
- package/dist/build/constants.css +1 -1
- package/dist/build/cookie-consent.css +1 -1
- package/dist/build/dialog.css +1 -1
- package/dist/build/dialog.entry.js +1 -1
- package/dist/build/elements.js +1 -1
- package/dist/build/filters.css +1 -1
- package/dist/build/filters.entry.js +1 -1
- package/dist/build/form.css +1 -1
- package/dist/build/gallery.entry.js +1 -1
- package/dist/build/global-alert.css +1 -1
- package/dist/build/global-alert.entry.js +1 -1
- package/dist/build/grid.css +1 -1
- package/dist/build/header.css +1 -1
- package/dist/build/header.entry.js +1 -1
- package/dist/build/icon.css +1 -1
- package/dist/build/in-page-navigation.entry.js +1 -1
- package/dist/build/list-item.css +1 -1
- package/dist/build/navigation.css +1 -1
- package/dist/build/navigation.entry.js +1 -1
- package/dist/build/one-time-code.css +1 -0
- package/dist/build/popover.css +1 -1
- package/dist/build/print.css +1 -1
- package/dist/build/react.js +1 -1
- package/dist/build/steps.css +1 -1
- package/dist/build/sticky.entry.js +1 -1
- package/dist/build/tabs.css +1 -1
- package/dist/build/tabs.entry.js +1 -1
- package/dist/build/utilities.css +1 -1
- package/dist/types/Atom/Link/Link.d.ts.map +1 -1
- package/dist/types/Component/Accordion/Accordion.d.ts.map +1 -1
- package/dist/types/Component/Dialog/Dialog.d.ts.map +1 -1
- package/dist/types/Component/Filters/Elements/Filters.d.ts +20 -1
- package/dist/types/Component/Filters/Elements/Filters.d.ts.map +1 -1
- package/dist/types/Component/Filters/Filters.d.ts +7 -2
- package/dist/types/Component/Filters/Filters.d.ts.map +1 -1
- package/dist/types/Component/Gallery/Gallery.d.ts.map +1 -1
- package/dist/types/Component/Pagination/Components/PaginationContext.d.ts.map +1 -1
- package/dist/types/Component/Tabs/Tabs.d.ts.map +1 -1
- package/dist/types/Form/Autocomplete/Autocomplete.d.ts +2 -2
- package/dist/types/Form/Autocomplete/Autocomplete.d.ts.map +1 -1
- package/dist/types/Form/Autocomplete/Elements/Autocomplete.d.ts +10 -0
- package/dist/types/Form/Autocomplete/Elements/Autocomplete.d.ts.map +1 -1
- package/dist/types/Form/OneTimeCode/OneTimeCode.d.ts +12 -0
- package/dist/types/Form/OneTimeCode/OneTimeCode.d.ts.map +1 -0
- package/dist/types/Utility/Hooks/useIsomorphicLayoutEffect.d.ts +4 -0
- package/dist/types/Utility/Hooks/useIsomorphicLayoutEffect.d.ts.map +1 -0
- package/dist/types/enums.d.ts +4 -0
- package/dist/types/enums.d.ts.map +1 -1
- package/dist/types/react.d.ts +1 -0
- package/dist/types/react.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/Atom/Button/__snapshots__/Button.stories.ts.snap +2 -3
- package/src/Atom/Button/_buttons.css +16 -0
- package/src/Atom/Button/button.twig +4 -1
- package/src/Atom/DefinitionList/DefinitionList.stories.ts +3 -0
- package/src/Atom/Icon/_icon.css +3 -0
- package/src/Atom/Link/Link.tsx +16 -3
- package/src/Atom/Link/__snapshots__/Link.stories.ts.snap +7 -12
- package/src/Atom/Link/__snapshots__/Link.stories.tsx.snap +1 -1
- package/src/Atom/Link/_links.css +9 -0
- package/src/Atom/Link/link.twig +8 -2
- package/src/Atom/LinkedImage/linked-image.twig +1 -2
- package/src/Atom/_generic.css +0 -10
- package/src/Component/Accordion/Accordion.stories.ts +31 -0
- package/src/Component/Accordion/Accordion.tsx +3 -2
- package/src/Component/Accordion/AccordionItem.stories.ts +27 -0
- package/src/Component/Accordion/__snapshots__/Accordion.stories.ts.snap +36 -0
- package/src/Component/Accordion/__snapshots__/AccordionItem.stories.ts.snap +16 -0
- package/src/Component/Accordion/accordion.css +3 -1
- package/src/Component/Breadcrumb/__snapshots__/Breadcrumb.stories.ts.snap +3 -6
- package/src/Component/Breadcrumb/breadcrumb.css +4 -0
- package/src/Component/Card/__snapshots__/Card.stories.ts.snap +11 -22
- package/src/Component/Card/card.css +2 -2
- package/src/Component/Carousel/Carousel.stories.ts +55 -0
- package/src/Component/Carousel/Carousel.stories.tsx +74 -0
- package/src/Component/Carousel/__snapshots__/Carousel.stories.ts.snap +273 -88
- package/src/Component/Carousel/__snapshots__/Carousel.stories.tsx.snap +5 -3
- package/src/Component/Carousel/carousel.css +1 -1
- package/src/Component/ContentBlock/__snapshots__/ContentBlock.stories.ts.snap +12 -24
- package/src/Component/CookieConsent/cookie-consent.css +6 -1
- package/src/Component/Dialog/Dialog.stories.ts +33 -0
- package/src/Component/Dialog/Dialog.stories.tsx +25 -0
- package/src/Component/Dialog/Dialog.tsx +2 -2
- package/src/Component/Dialog/__snapshots__/Dialog.stories.ts.snap +33 -2
- package/src/Component/Dialog/__snapshots__/Dialog.stories.tsx.snap +2 -0
- package/src/Component/Dialog/dialog.css +5 -2
- package/src/Component/DropMenu/DropMenu.stories.ts +39 -1
- package/src/Component/DropMenu/DropMenu.stories.tsx +29 -0
- package/src/Component/DropMenu/DropMenu.tsx +1 -1
- package/src/Component/DropMenu/__snapshots__/DropMenu.stories.ts.snap +14 -0
- package/src/Component/DropMenu/__snapshots__/DropMenu.stories.tsx.snap +3 -1
- package/src/Component/Filters/Elements/Filters.ts +71 -1
- package/src/Component/Filters/FilterItem.stories.ts +2 -1
- package/src/Component/Filters/FilterItem.tsx +1 -1
- package/src/Component/Filters/Filters.figma.ts +1 -1
- package/src/Component/Filters/Filters.stories.ts +95 -3
- package/src/Component/Filters/Filters.stories.tsx +246 -17
- package/src/Component/Filters/Filters.tsx +145 -29
- package/src/Component/Filters/README.md +102 -37
- package/src/Component/Filters/__snapshots__/FilterItem.stories.tsx.snap +3 -3
- package/src/Component/Filters/__snapshots__/Filters.stories.ts.snap +82 -4
- package/src/Component/Filters/__snapshots__/Filters.stories.tsx.snap +9 -3
- package/src/Component/Filters/filters.css +11 -0
- package/src/Component/Gallery/Gallery.tsx +2 -2
- package/src/Component/GlobalAlert/global-alert.css +3 -0
- package/src/Component/HeroBanner/HeroBanner.stories.ts +1 -1
- package/src/Component/HeroBanner/__snapshots__/HeroBanner.stories.ts.snap +4 -8
- package/src/Component/HeroSearch/__snapshots__/HeroSearch.stories.ts.snap +5 -10
- package/src/Component/InPageAlert/__snapshots__/InPageAlert.stories.ts.snap +6 -12
- package/src/Component/InPageNavigation/InPageNavigation.stories.ts +50 -0
- package/src/Component/InPageNavigation/InPageNavigation.stories.tsx +78 -0
- package/src/Component/InPageNavigation/__snapshots__/InPageNavigation.stories.ts.snap +35 -1
- package/src/Component/InPageNavigation/__snapshots__/InPageNavigation.stories.tsx.snap +2 -0
- package/src/Component/LinkList/__snapshots__/LinkList.stories.ts.snap +6 -12
- package/src/Component/ListItem/__snapshots__/ListItem.stories.ts.snap +7 -14
- package/src/Component/ListItem/list-item.css +1 -1
- package/src/Component/Navigation/Dropdown.stories.tsx +46 -0
- package/src/Component/Navigation/Navigation.stories.ts +56 -0
- package/src/Component/Navigation/__snapshots__/Dropdown.stories.tsx.snap +2 -0
- package/src/Component/Navigation/__snapshots__/Navigation.stories.ts.snap +57 -0
- package/src/Component/Navigation/_navigation-collapsible.css +3 -1
- package/src/Component/Navigation/_navigation-dropdown.css +3 -1
- package/src/Component/Pagination/Components/PaginationContext.tsx +2 -1
- package/src/Component/Pagination/Components/PaginationItem.tsx +1 -1
- package/src/Component/Pagination/Pagination.stories.ts +36 -0
- package/src/Component/Pagination/Pagination.stories.tsx +31 -0
- package/src/Component/Pagination/__snapshots__/Pagination.stories.ts.snap +69 -12
- package/src/Component/Pagination/__snapshots__/Pagination.stories.tsx.snap +3 -1
- package/src/Component/Pagination/pagination-item.twig +1 -1
- package/src/Component/Popover/__snapshots__/Popover.stories.ts.snap +13 -26
- package/src/Component/Popover/popover.css +4 -2
- package/src/Component/SideNavigation/__snapshots__/SideNavigation.stories.ts.snap +1 -2
- package/src/Component/SocialLinks/__snapshots__/SocialLinks.stories.ts.snap +6 -9
- package/src/Component/Steps/Steps.stories.ts +1 -1
- package/src/Component/Steps/steps.css +13 -0
- package/src/Component/Tabs/Tabs.stories.ts +22 -0
- package/src/Component/Tabs/Tabs.stories.tsx +24 -0
- package/src/Component/Tabs/Tabs.tsx +2 -2
- package/src/Component/Tabs/__snapshots__/Tabs.stories.ts.snap +18 -0
- package/src/Component/Tabs/__snapshots__/Tabs.stories.tsx.snap +3 -1
- package/src/Component/Tabs/tabs.css +6 -5
- package/src/Form/Autocomplete/Autocomplete.stories.ts +81 -4
- package/src/Form/Autocomplete/Autocomplete.stories.tsx +85 -1
- package/src/Form/Autocomplete/Autocomplete.tsx +19 -6
- package/src/Form/Autocomplete/Elements/Autocomplete.ts +24 -1
- package/src/Form/Autocomplete/__snapshots__/Autocomplete.stories.ts.snap +38 -4
- package/src/Form/Autocomplete/__snapshots__/Autocomplete.stories.tsx.snap +8 -4
- package/src/Form/Autocomplete/autocomplete.css +12 -1
- package/src/Form/Autocomplete/autocomplete.twig +1 -1
- package/src/Form/OneTimeCode/OneTimeCode.stories.ts +20 -0
- package/src/Form/OneTimeCode/OneTimeCode.stories.tsx +18 -0
- package/src/Form/OneTimeCode/OneTimeCode.tsx +56 -0
- package/src/Form/OneTimeCode/README.md +83 -0
- package/src/Form/OneTimeCode/__snapshots__/OneTimeCode.stories.ts.snap +7 -0
- package/src/Form/OneTimeCode/__snapshots__/OneTimeCode.stories.tsx.snap +3 -0
- package/src/Form/OneTimeCode/one-time-code.css +13 -0
- package/src/Form/OneTimeCode/one-time-code.twig +31 -0
- package/src/Form/__snapshots__/Validation.stories.ts.snap +1 -1
- package/src/Form/form.css +95 -35
- package/src/Layout/Footer/__snapshots__/Footer.stories.ts.snap +18 -33
- package/src/Layout/Grid/Grid.stories.ts +1 -0
- package/src/Layout/Grid/Grid.stories.tsx +26 -0
- package/src/Layout/Grid/__snapshots__/Grid.stories.tsx.snap +2 -0
- package/src/Layout/Grid/grid.css +12 -0
- package/src/Layout/Header/Header.stories.ts +33 -0
- package/src/Layout/Header/Header.stories.tsx +31 -0
- package/src/Layout/Header/__snapshots__/Header.stories.ts.snap +50 -0
- package/src/Layout/Header/__snapshots__/Header.stories.tsx.snap +2 -0
- package/src/Layout/Header/_header.css +4 -2
- package/src/Layout/Header/_toggles.css +4 -1
- package/src/Layout/Masthead/__snapshots__/Masthead.stories.ts.snap +8 -16
- package/src/Layout/Section/__snapshots__/Background.stories.ts.snap +2 -4
- package/src/Layout/Section/__snapshots__/Section.stories.ts.snap +4 -8
- package/src/Utility/Hooks/useIsomorphicLayoutEffect.ts +8 -0
- package/src/Utility/_mixins.css +46 -0
- package/src/Utility/print.css +1 -1
- package/src/Utility/utilities.css +20 -0
- package/src/_custom-media.css +3 -2
- package/src/constants.css +3 -13
- package/src/enums.ts +5 -0
- package/src/react.ts +1 -0
- package/tools/test-utils/screen-reader.ts +33 -0
- package/dist/build/chunks/Gallery-BT3cxS5m.js +0 -1
- package/dist/build/chunks/GlobalToggle-DQHho97V.js +0 -1
- package/dist/build/chunks/Navigation-B9Wug-ok.js +0 -1
- package/dist/build/chunks/disclosure-widget-BETzOHLO.js +0 -1
- 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.
|
|
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.
|
|
49
|
+
"oxfmt": "^0.71.0",
|
|
50
50
|
"oxlint": "^1.71.0",
|
|
51
51
|
"playwright": "^1.61.0",
|
|
52
52
|
"postcss": "^8.5.15",
|
|
@@ -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
|
-
|
|
17
|
+
{% if not iconOnly %}{{ title }}{% endif %}
|
|
15
18
|
{{ iconEnd }}
|
|
16
19
|
</a>
|
|
17
20
|
{% elseif as == 'input' %}
|
package/src/Atom/Icon/_icon.css
CHANGED
|
@@ -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
|
|
package/src/Atom/Link/Link.tsx
CHANGED
|
@@ -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
|
-
{
|
|
46
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
|
package/src/Atom/Link/_links.css
CHANGED
|
@@ -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
|
|
package/src/Atom/Link/link.twig
CHANGED
|
@@ -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
|
-
|
|
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>
|
package/src/Atom/_generic.css
CHANGED
|
@@ -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,
|
|
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
|
-
|
|
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
|
-
|
|
11
|
-
|
|
10
|
+
Home
|
|
12
11
|
</a>
|
|
13
12
|
</li>
|
|
14
13
|
<li>
|
|
15
14
|
<a href="#">
|
|
16
15
|
|
|
17
|
-
|
|
18
|
-
|
|
16
|
+
About
|
|
19
17
|
</a>
|
|
20
18
|
</li>
|
|
21
19
|
<li>
|
|
22
20
|
<a href="#" aria-current="page">
|
|
23
21
|
|
|
24
|
-
|
|
25
|
-
|
|
22
|
+
Join the team
|
|
26
23
|
</a>
|
|
27
24
|
</li>
|
|
28
25
|
</ul>
|
|
@@ -14,8 +14,7 @@ exports[`Block Link 1`] = `
|
|
|
14
14
|
|
|
15
15
|
<a href="#" class="mx-link--more">
|
|
16
16
|
|
|
17
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
290
|
-
|
|
279
|
+
Find out more
|
|
291
280
|
</a>
|
|
292
281
|
|
|
293
282
|
</div>
|