@justeattakeaway/pie-modal 1.14.1 → 1.15.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 (4) hide show
  1. package/README.md +11 -0
  2. package/dist/index.js +32 -30
  3. package/package.json +1 -1
  4. package/src/index.ts +6 -4
package/README.md CHANGED
@@ -19,6 +19,9 @@
19
19
  - [Events](#events)
20
20
  - [Legacy browser support](#legacy-browser-support)
21
21
  - [Usage Examples](#usage-examples)
22
+ - [Accessibility](#accessibility)
23
+ - [The `<dialog>` element](#the-dialog-element)
24
+ - [Focus management](#focus-management)
22
25
  - [Questions and Support](#questions-and-support)
23
26
  - [Contributing](#contributing)
24
27
 
@@ -139,6 +142,14 @@ import { PieModal } from '@justeattakeaway/pie-webc/react/modal.js';
139
142
 
140
143
  <PieModal heading='My Awesome Heading' headingLevel='h3'>Click me!</PieModal>
141
144
  ```
145
+ ## Accessibility
146
+
147
+ ### The `<dialog>` element
148
+ The Modal component is built using an `html` `<dialog>` element. This element provides some nice accessibility features out of the box. More can be learned [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog). Perhaps the most important to know is that it will make all content outside of the modal inaccessible to the keyboard and screen readers.
149
+ What the `<dialog>` does not provide is a circular focus trap. Instead, users can tab/keyboard navigate outside of the web page to access browser controls. Circular focus traps, i.e. going back to the first focusable element inside of the modal after reaching the last, are not a pattern we currently support, as this goes against the build-in behaviour of the element.
150
+
151
+ ### Focus management
152
+ By default, the `<dialog>` element will automatically focus the first focusable element inside of it when opened. Because our Modal can have close and back buttons, these will likely receive focus when opening the modal. To circumvent this, we would suggest using the `autofocus` attribute on the first element you'd like to receive focus when the modal opens. Please be aware that Safari does not support the `autofocus` attribute, so you may need to manage focus manually in this browser.
142
153
 
143
154
  ## Questions and Support
144
155
 
package/dist/index.js CHANGED
@@ -1,11 +1,11 @@
1
1
  import { LitElement as F, unsafeCSS as P, nothing as m } from "lit";
2
2
  import { html as s, unsafeStatic as T } from "lit/static-html.js";
3
3
  import { property as d, query as K } from "lit/decorators.js";
4
- import { classMap as z } from "lit/directives/class-map.js";
5
- import { ifDefined as u } from "lit/directives/if-defined.js";
4
+ import { classMap as A } from "lit/directives/class-map.js";
5
+ import { ifDefined as h } from "lit/directives/if-defined.js";
6
6
  import "@justeattakeaway/pie-button";
7
7
  import "@justeattakeaway/pie-icon-button";
8
- import { requiredProperty as I, validPropertyValues as C, safeCustomElement as N, dispatchCustomEvent as h } from "@justeattakeaway/pie-webc-core";
8
+ import { requiredProperty as I, validPropertyValues as C, safeCustomElement as N, dispatchCustomEvent as u } from "@justeattakeaway/pie-webc-core";
9
9
  import "@justeattakeaway/pie-icons-webc/dist/IconClose.js";
10
10
  import "@justeattakeaway/pie-icons-webc/dist/IconChevronLeft.js";
11
11
  import "@justeattakeaway/pie-spinner";
@@ -14,7 +14,7 @@ const k = class k extends F {
14
14
  this.getAttribute("v") || this.setAttribute("v", k.v);
15
15
  }
16
16
  };
17
- k.v = "1.14.1";
17
+ k.v = "1.15.0";
18
18
  let x = k;
19
19
  function W(t) {
20
20
  if (Array.isArray(t)) {
@@ -26,20 +26,20 @@ function W(t) {
26
26
  }
27
27
  var B = !1;
28
28
  if (typeof window < "u") {
29
- var A = {
29
+ var S = {
30
30
  get passive() {
31
31
  B = !0;
32
32
  }
33
33
  };
34
- window.addEventListener("testPassive", null, A), window.removeEventListener("testPassive", null, A);
34
+ window.addEventListener("testPassive", null, S), window.removeEventListener("testPassive", null, S);
35
35
  }
36
- var O = typeof window < "u" && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === "MacIntel" && window.navigator.maxTouchPoints > 1), g = [], v = !1, M = -1, f = void 0, b = void 0, D = function(e) {
36
+ var M = typeof window < "u" && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === "MacIntel" && window.navigator.maxTouchPoints > 1), g = [], v = !1, D = -1, f = void 0, b = void 0, $ = function(e) {
37
37
  return g.some(function(o) {
38
38
  return !!(o.options.allowTouchMove && o.options.allowTouchMove(e));
39
39
  });
40
40
  }, y = function(e) {
41
41
  var o = e || window.event;
42
- return D(o.target) || o.touches.length > 1 ? !0 : (o.preventDefault && o.preventDefault(), !1);
42
+ return $(o.target) || o.touches.length > 1 ? !0 : (o.preventDefault && o.preventDefault(), !1);
43
43
  }, j = function(e) {
44
44
  if (b === void 0) {
45
45
  var o = !1, i = window.innerWidth - document.documentElement.clientWidth;
@@ -51,8 +51,8 @@ var O = typeof window < "u" && window.navigator && window.navigator.platform &&
51
51
  }, V = function(e) {
52
52
  return e ? e.scrollHeight - e.scrollTop <= e.clientHeight : !1;
53
53
  }, Y = function(e, o) {
54
- var i = e.targetTouches[0].clientY - M;
55
- return D(e.target) ? !1 : o && o.scrollTop === 0 && i > 0 || V(o) && i < 0 ? y(e) : (e.stopPropagation(), !0);
54
+ var i = e.targetTouches[0].clientY - D;
55
+ return $(e.target) ? !1 : o && o.scrollTop === 0 && i > 0 || V(o) && i < 0 ? y(e) : (e.stopPropagation(), !0);
56
56
  }, H = function(e, o) {
57
57
  if (!e) {
58
58
  console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");
@@ -65,8 +65,8 @@ var O = typeof window < "u" && window.navigator && window.navigator.platform &&
65
65
  targetElement: e,
66
66
  options: {}
67
67
  };
68
- g = [].concat(W(g), [i]), O ? (e.ontouchstart = function(a) {
69
- a.targetTouches.length === 1 && (M = a.targetTouches[0].clientY);
68
+ g = [].concat(W(g), [i]), M ? (e.ontouchstart = function(a) {
69
+ a.targetTouches.length === 1 && (D = a.targetTouches[0].clientY);
70
70
  }, e.ontouchmove = function(a) {
71
71
  a.targetTouches.length === 1 && Y(a, e);
72
72
  }, v || (document.addEventListener("touchmove", y, B ? { passive: !1 } : void 0), v = !0)) : j();
@@ -78,9 +78,9 @@ var O = typeof window < "u" && window.navigator && window.navigator.platform &&
78
78
  }
79
79
  g = g.filter(function(o) {
80
80
  return o.targetElement !== e;
81
- }), O ? (e.ontouchstart = null, e.ontouchmove = null, v && g.length === 0 && (document.removeEventListener("touchmove", y, B ? { passive: !1 } : void 0), v = !1)) : g.length || R();
81
+ }), M ? (e.ontouchstart = null, e.ontouchmove = null, v && g.length === 0 && (document.removeEventListener("touchmove", y, B ? { passive: !1 } : void 0), v = !1)) : g.length || R();
82
82
  };
83
- const U = '*,*:after,*:before{box-sizing:inherit}dialog{position:absolute;left:0;right:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;border:solid;padding:1em;background:#fff;color:#000;display:block}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000001a}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translateY(-50%)}.c-modal{--modal-size-s: 450px;--modal-size-m: 600px;--modal-size-l: 1080px;--modal-border-radius: var(--dt-radius-rounded-d);--modal-font: var(--dt-font-interactive-l-family);--modal-bg-color: var(--dt-color-container-default);--modal-elevation: var(--dt-elevation-below-20);position:fixed;top:0;border-radius:var(--modal-border-radius);border:none;box-shadow:var(--modal-elevation);font-family:var(--modal-font);color:var(--dt-color-content-default);background-color:var(--modal-bg-color);padding:0;--modal-margin-none: var(--dt-spacing-none);--modal-margin-small: var(--dt-spacing-g);--modal-margin-large: var(--dt-spacing-j);--modal-margin-block: var(--modal-margin-small);--modal-block-size: fit-content;--modal-inline-size: 75%;--modal-max-block-size: calc(100vh - calc(var(--modal-margin-block) * 2));--modal-max-inline-size: var(--modal-size-m);block-size:var(--modal-block-size);inline-size:var(--modal-inline-size);max-block-size:var(--modal-max-block-size);max-inline-size:var(--modal-max-inline-size)}.c-modal:focus-visible{outline:none}@media (max-width: 767px){.c-modal pie-icon-button{--btn-dimension: 40px}}.c-modal[open]{display:flex;flex-direction:column}@media (min-width: 769px){.c-modal{--modal-margin-block: var(--modal-margin-large)}}.c-modal.c-modal--small{--modal-max-inline-size: var(--modal-size-s)}@media (min-width: 769px){.c-modal.c-modal--small{--modal-margin-block: var(--modal-margin-large)}}.c-modal.c-modal--large{--modal-inline-size: 75%;--modal-max-inline-size: var(--modal-size-l);--modal-margin-block: var(--modal-margin-large)}@media (max-width: 767px){.c-modal.c-modal--large,.c-modal.c-modal--medium.c-modal--fullWidthBelowMid{--modal-margin-block: var(--modal-margin-none);--modal-border-radius: var(--dt-radius-rounded-none);--modal-block-size: 100%;--modal-inline-size: 100%;--modal-max-inline-size: 100%}.c-modal.c-modal--large>.c-modal-scrollContainer,.c-modal.c-modal--medium.c-modal--fullWidthBelowMid>.c-modal-scrollContainer{block-size:100%}}.c-modal.c-modal--top{margin-block-start:var(--dt-spacing-j);max-block-size:calc(100% - var(--dt-spacing-j) * 2)}@media (max-width: 767px){.c-modal.c-modal--top.c-modal--large,.c-modal.c-modal--top.c-modal--fullWidthBelowMid.c-modal--medium{margin-block-start:var(--dt-spacing-none);max-block-size:100%}}.c-modal::backdrop{background:var(--dt-color-overlay)}@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none){.c-modal::backdrop{background:#0000008c}}.c-modal .c-modal-footer{--modal-button-spacing: var(--dt-spacing-d);--modal-footer-padding: var(--dt-spacing-d);display:flex;flex-flow:row-reverse;flex-wrap:wrap;gap:var(--modal-button-spacing);padding:var(--modal-footer-padding)}@media (min-width: 769px){.c-modal .c-modal-footer{--modal-footer-padding: var(--dt-spacing-e)}}@media (max-width: 767px){.c-modal .c-modal-footer.c-modal-footer--stackedActions{flex-direction:column}}.c-modal ::slotted([slot=footer]){display:flex;width:100%}.c-modal ::slotted([slot=headerContent]){grid-area:content;padding-inline-start:var(--dt-spacing-e);padding-inline-end:var(--dt-spacing-e);margin-block-end:var(--dt-spacing-d)}.c-modal .c-modal-header{display:grid;grid-template-areas:"back heading close" "content content content";grid-template-columns:minmax(0,max-content) minmax(0,1fr) minmax(0,max-content);align-items:start}.c-modal .c-modal-heading{--modal-header-font-size: calc(var(--dt-font-heading-m-size--narrow) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-m-line-height--narrow) * 1px);--modal-header-font-weight: var(--dt-font-heading-m-weight);font-size:var(--modal-header-font-size);line-height:var(--modal-header-font-line-height);font-weight:var(--modal-header-font-weight);margin:0;grid-area:heading;margin-inline-start:var(--dt-spacing-d);margin-inline-end:var(--dt-spacing-d);margin-block:14px}@media (min-width: 769px){.c-modal .c-modal-heading{--modal-header-font-size: calc(var(--dt-font-heading-m-size--wide) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-m-line-height--wide) * 1px);margin-inline-start:var(--dt-spacing-e);margin-inline-end:var(--dt-spacing-e);margin-block:20px}}.c-modal .c-modal-backBtn+.c-modal-heading{margin-inline-start:var(--dt-spacing-b)}@media (min-width: 769px){.c-modal .c-modal-backBtn+.c-modal-heading{margin-inline-start:var(--dt-spacing-c)}}.c-modal.c-modal--dismissible .c-modal-heading{margin-inline-end:var(--dt-spacing-d)}@media (min-width: 769px){.c-modal.c-modal--dismissible .c-modal-heading{margin-inline-end:var(--dt-spacing-e)}}.c-modal .c-modal-backBtn{grid-area:back;margin-block-start:var(--dt-spacing-b);margin-block-end:var(--dt-spacing-b);margin-inline-start:var(--dt-spacing-b);margin-inline-end:var(--dt-spacing-none)}@media (min-width: 769px){.c-modal .c-modal-backBtn{margin-block-start:var(--dt-spacing-c);margin-block-end:var(--dt-spacing-c);margin-inline-start:var(--dt-spacing-c);margin-inline-end:var(--dt-spacing-none)}}.c-modal .c-modal-closeBtn{grid-area:close;margin-block-start:var(--dt-spacing-b);margin-block-end:var(--dt-spacing-b);margin-inline-start:var(--dt-spacing-none);margin-inline-end:var(--dt-spacing-b)}@media (min-width: 769px){.c-modal .c-modal-closeBtn{margin-block-start:var(--dt-spacing-c);margin-block-end:var(--dt-spacing-c);margin-inline-start:var(--dt-spacing-none);margin-inline-end:var(--dt-spacing-c)}}.c-modal .c-modal-content{--modal-content-font-size: calc(var(--dt-font-size-16) * 1px);--modal-content-font-weight: var(--dt-font-weight-regular);--modal-content-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--modal-content-padding-block: var(--dt-spacing-a);--modal-content-padding-inline: var(--dt-spacing-d);--modal-content-padding-block-end: var(--dt-spacing-e);--modal-content-min-block-size: var(--dt-spacing-j);position:relative;min-block-size:calc(var(--modal-content-min-block-size) + var(--modal-content-padding-block) + var(--modal-content-padding-block-end));font-size:var(--modal-content-font-size);line-height:var(--modal-content-line-height);font-weight:var(--modal-content-font-weight);padding-inline-start:var(--modal-content-padding-inline);padding-inline-end:var(--modal-content-padding-inline);padding-block-start:var(--modal-content-padding-block);padding-block-end:var(--modal-content-padding-block-end);flex-grow:1}@media (min-width: 769px){.c-modal .c-modal-content{--modal-content-padding-inline: var(--dt-spacing-e)}}.c-modal .c-modal-content:has(+slot>footer){padding-block-end:var(--modal-content-padding-block);min-block-size:var(--modal-content-min-block-size)}.c-modal .c-modal-content--scrollable{background:linear-gradient(to bottom,transparent,var(--dt-color-container-default) 75%) center bottom,linear-gradient(transparent,var(--dt-color-border-strong)) center bottom;background-repeat:no-repeat;background-size:100% 48px,100% 12px;background-attachment:local,scroll}.c-modal>.c-modal-scrollContainer{display:flex;flex-direction:column;overflow-y:auto;--bg-scroll-end: linear-gradient(rgba(255, 255, 255, 0), var(--dt-color-container-default) 70%) 0 100%;--bg-scroll-bottom: radial-gradient(farthest-corner at 50% 100%, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0)) 0 100%;--bg-size-scroll-end: 100% 40px;--bg-size-scroll-bottom: 100% 8px;background:var(--bg-scroll-end),var(--bg-scroll-bottom);background-repeat:no-repeat;background-size:var(--bg-size-scroll-end),var(--bg-size-scroll-bottom);background-attachment:local,scroll}.c-modal>.c-modal-scrollContainer .c-modal-content{flex-shrink:0}.c-modal.c-modal--pinnedFooter .c-modal-content{overflow-y:auto}.c-modal.c-modal--loading .c-modal-content pie-spinner{position:absolute;left:50%;top:calc(50% - (var(--modal-content-padding-block-end) - var(--modal-content-padding-block)) / 2);transform:translate(-50%,-50%)}.c-modal.c-modal--loading .c-modal-content .c-modal-contentInner{display:none}.c-modal.c-modal--loading .c-modal-content:not(:last-child) pie-spinner{top:50%}@supports not (aspect-ratio: 1/1){.c-modal .c-modal-scrollContainer{background:none}}.c-modal .c-modal-backBtn-icon:dir(rtl){transform:rotate(180deg)}', X = ["h1", "h2", "h3", "h4", "h5", "h6"], G = ["small", "medium", "large"], J = ["top", "center"], S = "pie-modal-close", _ = "pie-modal-open", L = "pie-modal-back", Q = "pie-modal-leading-action-click", Z = "pie-modal-supporting-action-click", r = {
83
+ const U = '*,*:after,*:before{box-sizing:inherit}dialog{position:absolute;left:0;right:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;border:solid;padding:1em;background:#fff;color:#000;display:block}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000001a}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translateY(-50%)}.c-modal{--modal-size-s: 450px;--modal-size-m: 600px;--modal-size-l: 1080px;--modal-border-radius: var(--dt-radius-rounded-d);--modal-font: var(--dt-font-interactive-l-family);--modal-bg-color: var(--dt-color-container-default);--modal-elevation: var(--dt-elevation-below-20);position:fixed;top:0;border-radius:var(--modal-border-radius);border:none;box-shadow:var(--modal-elevation);font-family:var(--modal-font);color:var(--dt-color-content-default);background-color:var(--modal-bg-color);padding:0;--modal-margin-none: var(--dt-spacing-none);--modal-margin-small: var(--dt-spacing-g);--modal-margin-large: var(--dt-spacing-j);--modal-margin-block: var(--modal-margin-small);--modal-block-size: fit-content;--modal-inline-size: 75%;--modal-max-block-size: calc(100vh - calc(var(--modal-margin-block) * 2));--modal-max-inline-size: var(--modal-size-m);block-size:var(--modal-block-size);inline-size:var(--modal-inline-size);max-block-size:var(--modal-max-block-size);max-inline-size:var(--modal-max-inline-size)}.c-modal:focus-visible{outline:none}@media (max-width: 767px){.c-modal pie-icon-button{--btn-dimension: 40px}}.c-modal[open]{display:flex;flex-direction:column}@media (min-width: 769px){.c-modal{--modal-margin-block: var(--modal-margin-large)}}.c-modal.c-modal--small{--modal-max-inline-size: var(--modal-size-s)}@media (min-width: 769px){.c-modal.c-modal--small{--modal-margin-block: var(--modal-margin-large)}}.c-modal.c-modal--large{--modal-inline-size: 75%;--modal-max-inline-size: var(--modal-size-l);--modal-margin-block: var(--modal-margin-large)}@media (max-width: 767px){.c-modal.c-modal--large,.c-modal.c-modal--medium.c-modal--fullWidthBelowMid{--modal-margin-block: var(--modal-margin-none);--modal-border-radius: var(--dt-radius-rounded-none);--modal-block-size: 100%;--modal-inline-size: 100%;--modal-max-inline-size: 100%}.c-modal.c-modal--large>.c-modal-scrollContainer,.c-modal.c-modal--medium.c-modal--fullWidthBelowMid>.c-modal-scrollContainer{block-size:100%}}.c-modal.c-modal--top{margin-block-start:var(--dt-spacing-j);max-block-size:calc(100% - var(--dt-spacing-j) * 2)}@media (max-width: 767px){.c-modal.c-modal--top.c-modal--large,.c-modal.c-modal--top.c-modal--fullWidthBelowMid.c-modal--medium{margin-block-start:var(--dt-spacing-none);max-block-size:100%}}.c-modal::backdrop{background:var(--dt-color-overlay)}@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none){.c-modal::backdrop{background:#0000008c}}.c-modal .c-modal-footer{--modal-button-spacing: var(--dt-spacing-d);--modal-footer-padding: var(--dt-spacing-d);display:flex;flex-flow:row-reverse;flex-wrap:wrap;gap:var(--modal-button-spacing);padding:var(--modal-footer-padding)}@media (min-width: 769px){.c-modal .c-modal-footer{--modal-footer-padding: var(--dt-spacing-e)}}@media (max-width: 767px){.c-modal .c-modal-footer.c-modal-footer--stackedActions{flex-direction:column}}.c-modal ::slotted([slot=footer]){display:flex;width:100%}.c-modal ::slotted([slot=headerContent]){grid-area:content;padding-inline-start:var(--dt-spacing-e);padding-inline-end:var(--dt-spacing-e);margin-block-end:var(--dt-spacing-d)}.c-modal .c-modal-header{display:grid;grid-template-areas:"back heading close" "content content content";grid-template-columns:minmax(0,max-content) minmax(0,1fr) minmax(0,max-content);align-items:start}.c-modal .c-modal-heading{--modal-header-font-size: calc(var(--dt-font-heading-m-size--narrow) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-m-line-height--narrow) * 1px);--modal-header-font-weight: var(--dt-font-heading-m-weight);font-size:var(--modal-header-font-size);line-height:var(--modal-header-font-line-height);font-weight:var(--modal-header-font-weight);margin:0;grid-area:heading;margin-inline-start:var(--dt-spacing-d);margin-inline-end:var(--dt-spacing-d);margin-block:14px}@media (min-width: 769px){.c-modal .c-modal-heading{--modal-header-font-size: calc(var(--dt-font-heading-m-size--wide) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-m-line-height--wide) * 1px);margin-inline-start:var(--dt-spacing-e);margin-inline-end:var(--dt-spacing-e);margin-block:20px}}.c-modal .c-modal-backBtn+.c-modal-heading{margin-inline-start:var(--dt-spacing-b)}@media (min-width: 769px){.c-modal .c-modal-backBtn+.c-modal-heading{margin-inline-start:var(--dt-spacing-c)}}.c-modal.c-modal--dismissible .c-modal-heading{margin-inline-end:var(--dt-spacing-d)}@media (min-width: 769px){.c-modal.c-modal--dismissible .c-modal-heading{margin-inline-end:var(--dt-spacing-e)}}.c-modal .c-modal-backBtn{grid-area:back;margin-block-start:var(--dt-spacing-b);margin-block-end:var(--dt-spacing-b);margin-inline-start:var(--dt-spacing-b);margin-inline-end:var(--dt-spacing-none)}@media (min-width: 769px){.c-modal .c-modal-backBtn{margin-block-start:var(--dt-spacing-c);margin-block-end:var(--dt-spacing-c);margin-inline-start:var(--dt-spacing-c);margin-inline-end:var(--dt-spacing-none)}}.c-modal .c-modal-closeBtn{grid-area:close;margin-block-start:var(--dt-spacing-b);margin-block-end:var(--dt-spacing-b);margin-inline-start:var(--dt-spacing-none);margin-inline-end:var(--dt-spacing-b)}@media (min-width: 769px){.c-modal .c-modal-closeBtn{margin-block-start:var(--dt-spacing-c);margin-block-end:var(--dt-spacing-c);margin-inline-start:var(--dt-spacing-none);margin-inline-end:var(--dt-spacing-c)}}.c-modal .c-modal-content{--modal-content-font-size: calc(var(--dt-font-size-16) * 1px);--modal-content-font-weight: var(--dt-font-weight-regular);--modal-content-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--modal-content-padding-block: var(--dt-spacing-a);--modal-content-padding-inline: var(--dt-spacing-d);--modal-content-padding-block-end: var(--dt-spacing-e);--modal-content-min-block-size: var(--dt-spacing-j);position:relative;min-block-size:calc(var(--modal-content-min-block-size) + var(--modal-content-padding-block) + var(--modal-content-padding-block-end));font-size:var(--modal-content-font-size);line-height:var(--modal-content-line-height);font-weight:var(--modal-content-font-weight);padding-inline-start:var(--modal-content-padding-inline);padding-inline-end:var(--modal-content-padding-inline);padding-block-start:var(--modal-content-padding-block);padding-block-end:var(--modal-content-padding-block-end);flex-grow:1}@media (min-width: 769px){.c-modal .c-modal-content{--modal-content-padding-inline: var(--dt-spacing-e)}}.c-modal .c-modal-content:has(+slot>footer){padding-block-end:var(--modal-content-padding-block);min-block-size:var(--modal-content-min-block-size)}.c-modal .c-modal-content--scrollable{background:linear-gradient(to bottom,transparent,var(--dt-color-container-default) 75%) center bottom,linear-gradient(transparent,var(--dt-color-border-strong)) center bottom;background-repeat:no-repeat;background-size:100% 48px,100% 12px;background-attachment:local,scroll}.c-modal>.c-modal-scrollContainer{display:flex;flex-direction:column;overflow-y:auto;--bg-scroll-end: linear-gradient(rgba(255, 255, 255, 0), var(--dt-color-container-default) 70%) 0 100%;--bg-scroll-bottom: radial-gradient(farthest-corner at 50% 100%, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0)) 0 100%;--bg-size-scroll-end: 100% 40px;--bg-size-scroll-bottom: 100% 8px;background:var(--bg-scroll-end),var(--bg-scroll-bottom);background-repeat:no-repeat;background-size:var(--bg-size-scroll-end),var(--bg-size-scroll-bottom);background-attachment:local,scroll}.c-modal>.c-modal-scrollContainer .c-modal-content{flex-shrink:0}.c-modal.c-modal--pinnedFooter .c-modal-content{overflow-y:auto}.c-modal.c-modal--loading .c-modal-content pie-spinner{position:absolute;left:50%;top:calc(50% - (var(--modal-content-padding-block-end) - var(--modal-content-padding-block)) / 2);transform:translate(-50%,-50%)}.c-modal.c-modal--loading .c-modal-content .c-modal-contentInner{display:none}.c-modal.c-modal--loading .c-modal-content:not(:last-child) pie-spinner{top:50%}@supports not (aspect-ratio: 1/1){.c-modal .c-modal-scrollContainer{background:none}}.c-modal .c-modal-backBtn-icon:dir(rtl){transform:rotate(180deg)}', X = ["h1", "h2", "h3", "h4", "h5", "h6"], G = ["small", "medium", "large"], J = ["top", "center"], L = "pie-modal-close", _ = "pie-modal-open", O = "pie-modal-back", Q = "pie-modal-leading-action-click", Z = "pie-modal-supporting-action-click", r = {
84
84
  hasBackButton: !1,
85
85
  hasStackedActions: !1,
86
86
  headingLevel: "h2",
@@ -123,7 +123,7 @@ let n = class extends x {
123
123
  connectedCallback() {
124
124
  super.connectedCallback(), this._abortController = new AbortController();
125
125
  const { signal: t } = this._abortController;
126
- this.addEventListener("click", (e) => this._handleDialogLightDismiss(e)), this._setupEscKeyListener(), document.addEventListener(_, (e) => this._handleModalOpened(e), { signal: t }), document.addEventListener(S, (e) => this._handleModalClosed(e), { signal: t }), document.addEventListener(L, (e) => this._handleModalClosed(e), { signal: t });
126
+ this.addEventListener("click", (e) => this._handleDialogLightDismiss(e)), this._setupEscKeyListener(), document.addEventListener(_, (e) => this._handleModalOpened(e), { signal: t }), document.addEventListener(L, (e) => this._handleModalClosed(e), { signal: t }), document.addEventListener(O, (e) => this._handleModalClosed(e), { signal: t });
127
127
  }
128
128
  disconnectedCallback() {
129
129
  super.disconnectedCallback(), this._abortController.abort(), this._enableBodyScroll(), this._removeEscKeyEventListener();
@@ -181,15 +181,15 @@ let n = class extends x {
181
181
  }
182
182
  // Handles the value of the isOpen property on first render of the component
183
183
  _handleModalOpenStateOnFirstRender(t) {
184
- t.get("isOpen") === void 0 && this.isOpen && h(this, _, { targetModal: this });
184
+ t.get("isOpen") === void 0 && this.isOpen && u(this, _, { targetModal: this });
185
185
  }
186
186
  // Handles changes to the modal isOpen property by dispatching any appropriate events
187
187
  _handleModalOpenStateChanged(t) {
188
188
  const e = t.get("isOpen");
189
- e !== void 0 && (e ? this._backButtonClicked ? (this._backButtonClicked = !1, h(this, L, { targetModal: this })) : h(this, S, { targetModal: this }) : h(this, _, { targetModal: this }));
189
+ e !== void 0 && (e ? this._backButtonClicked ? (this._backButtonClicked = !1, u(this, O, { targetModal: this })) : u(this, L, { targetModal: this }) : u(this, _, { targetModal: this }));
190
190
  }
191
191
  _handleActionClick(t) {
192
- t === "leading" ? (this._dialog.close("leading"), h(this, Q, { targetModal: this })) : t === "supporting" && (this._dialog.close("supporting"), h(this, Z, { targetModal: this }));
192
+ t === "leading" ? (this._dialog.close("leading"), u(this, Q, { targetModal: this })) : t === "supporting" && (this._dialog.close("supporting"), u(this, Z, { targetModal: this }));
193
193
  }
194
194
  /**
195
195
  * Return focus to the specified element, providing the selector is valid
@@ -227,7 +227,7 @@ let n = class extends x {
227
227
  }}"
228
228
  variant="ghost-secondary"
229
229
  class="c-modal-closeBtn"
230
- .aria=${u((t = this.aria) == null ? void 0 : t.close) ? { label: (e = this.aria) == null ? void 0 : e.close } : m}
230
+ .aria=${h((t = this.aria) == null ? void 0 : t.close) ? { label: (e = this.aria) == null ? void 0 : e.close } : m}
231
231
  data-test-id="modal-close-button">
232
232
  <icon-close></icon-close>
233
233
  </pie-icon-button>` : m;
@@ -247,7 +247,7 @@ let n = class extends x {
247
247
  }}"
248
248
  variant="ghost-secondary"
249
249
  class="c-modal-backBtn"
250
- .aria=${u((t = this.aria) == null ? void 0 : t.back) ? { label: (e = this.aria) == null ? void 0 : e.back } : m}
250
+ .aria=${h((t = this.aria) == null ? void 0 : t.back) ? { label: (e = this.aria) == null ? void 0 : e.back } : m}
251
251
  data-test-id="modal-back-button">
252
252
  <icon-chevron-left class="c-modal-backBtn-icon"></icon-chevron-left>
253
253
  </pie-icon-button>
@@ -267,7 +267,7 @@ let n = class extends x {
267
267
  return e ? s`
268
268
  <pie-button
269
269
  variant="${o}"
270
- aria-label="${u(t)}"
270
+ aria-label="${h(t)}"
271
271
  type="submit"
272
272
  ?isFullWidth="${this.hasStackedActions}"
273
273
  @click="${() => this._handleActionClick("leading")}"
@@ -292,7 +292,7 @@ let n = class extends x {
292
292
  return !e || !((i = this.leadingAction) != null && i.text) ? m : s`
293
293
  <pie-button
294
294
  variant="${o}"
295
- aria-label="${u(t)}"
295
+ aria-label="${h(t)}"
296
296
  type="reset"
297
297
  ?isFullWidth="${this.hasStackedActions}"
298
298
  @click="${() => this._handleActionClick("supporting")}"
@@ -315,7 +315,7 @@ let n = class extends x {
315
315
  "c-modal-footer": !0,
316
316
  "c-modal-footer--stackedActions": this.hasStackedActions
317
317
  }, o = t ? s`
318
- <footer class="${z(e)}" data-test-id="pie-modal-footer">
318
+ <footer class="${A(e)}" data-test-id="pie-modal-footer">
319
319
  ${this.renderLeadingAction()}
320
320
  ${this.renderSupportingAction()}
321
321
  </footer>` : m;
@@ -352,7 +352,7 @@ let n = class extends x {
352
352
  renderHeading() {
353
353
  const { heading: t, headingLevel: e } = this, o = T(e);
354
354
  return s`
355
- <${o} class="c-modal-heading">
355
+ <${o} id="modal-heading" class="c-modal-heading">
356
356
  ${t}
357
357
  </${o}>
358
358
  `;
@@ -366,7 +366,7 @@ let n = class extends x {
366
366
  isLoading: a,
367
367
  position: c,
368
368
  size: p
369
- } = this, $ = a && (t == null ? void 0 : t.loading) || void 0, E = {
369
+ } = this, E = {
370
370
  "c-modal": !0,
371
371
  [`c-modal--${p}`]: !0,
372
372
  "c-modal--top": c === "top",
@@ -374,13 +374,15 @@ let n = class extends x {
374
374
  "c-modal--loading": a,
375
375
  "c-modal--pinnedFooter": o,
376
376
  "c-modal--fullWidthBelowMid": i
377
- };
377
+ }, z = a && (t == null ? void 0 : t.loading) || void 0;
378
378
  return s`
379
379
  <dialog
380
380
  id="dialog"
381
- class="${z(E)}"
381
+ aria-label="${h(z)}"
382
+ aria-labelledby="${h(z ? void 0 : "modal-heading")}"
383
+ class="${A(E)}"
384
+ aria-live="polite"
382
385
  aria-busy="${a ? "true" : "false"}"
383
- aria-label="${u($)}"
384
386
  data-test-id="pie-modal">
385
387
  <header class="c-modal-header" data-test-id="modal-header">
386
388
  ${this.renderBackButton()}
@@ -453,8 +455,8 @@ n = l([
453
455
  N("pie-modal")
454
456
  ], n);
455
457
  export {
456
- L as ON_MODAL_BACK_EVENT,
457
- S as ON_MODAL_CLOSE_EVENT,
458
+ O as ON_MODAL_BACK_EVENT,
459
+ L as ON_MODAL_CLOSE_EVENT,
458
460
  Q as ON_MODAL_LEADING_ACTION_CLICK,
459
461
  _ as ON_MODAL_OPEN_EVENT,
460
462
  Z as ON_MODAL_SUPPORTING_ACTION_CLICK,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-modal",
3
- "version": "1.14.1",
3
+ "version": "1.15.0",
4
4
  "description": "PIE design system modal built using web components",
5
5
  "repository": {
6
6
  "type": "git",
package/src/index.ts CHANGED
@@ -508,7 +508,7 @@ export class PieModal extends PieElement implements ModalProps {
508
508
  const headingTag = unsafeStatic(headingLevel);
509
509
 
510
510
  return html`
511
- <${headingTag} class="c-modal-heading">
511
+ <${headingTag} id="modal-heading" class="c-modal-heading">
512
512
  ${heading}
513
513
  </${headingTag}>
514
514
  `;
@@ -525,8 +525,6 @@ export class PieModal extends PieElement implements ModalProps {
525
525
  size,
526
526
  } = this;
527
527
 
528
- const ariaLabel = (isLoading && aria?.loading) || undefined;
529
-
530
528
  const modalClasses = {
531
529
  'c-modal': true,
532
530
  [`c-modal--${size}`]: true,
@@ -537,12 +535,16 @@ export class PieModal extends PieElement implements ModalProps {
537
535
  'c-modal--fullWidthBelowMid': isFullWidthBelowMid,
538
536
  };
539
537
 
538
+ const ariaLabelForLoading = (isLoading && aria?.loading) || undefined;
539
+
540
540
  return html`
541
541
  <dialog
542
542
  id="dialog"
543
+ aria-label="${ifDefined(ariaLabelForLoading)}"
544
+ aria-labelledby="${ifDefined(ariaLabelForLoading ? undefined : 'modal-heading')}"
543
545
  class="${classMap(modalClasses)}"
546
+ aria-live="polite"
544
547
  aria-busy="${isLoading ? 'true' : 'false'}"
545
- aria-label="${ifDefined(ariaLabel)}"
546
548
  data-test-id="pie-modal">
547
549
  <header class="c-modal-header" data-test-id="modal-header">
548
550
  ${this.renderBackButton()}