@justeattakeaway/pie-modal 1.14.0 → 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 +122 -120
  3. package/package.json +4 -4
  4. package/src/index.ts +9 -7
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
- import { LitElement as F, unsafeCSS as P, nothing as g } from "lit";
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 b } 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,73 +14,73 @@ 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.0";
17
+ k.v = "1.15.0";
18
18
  let x = k;
19
- function W(e) {
20
- if (Array.isArray(e)) {
21
- for (var t = 0, o = Array(e.length); t < e.length; t++)
22
- o[t] = e[t];
19
+ function W(t) {
20
+ if (Array.isArray(t)) {
21
+ for (var e = 0, o = Array(t.length); e < t.length; e++)
22
+ o[e] = t[e];
23
23
  return o;
24
24
  } else
25
- return Array.from(e);
25
+ return Array.from(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), m = [], v = !1, M = -1, u = void 0, f = void 0, D = function(t) {
37
- return m.some(function(o) {
38
- return !!(o.options.allowTouchMove && o.options.allowTouchMove(t));
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
+ return g.some(function(o) {
38
+ return !!(o.options.allowTouchMove && o.options.allowTouchMove(e));
39
39
  });
40
- }, y = function(t) {
41
- var o = t || window.event;
42
- return D(o.target) || o.touches.length > 1 ? !0 : (o.preventDefault && o.preventDefault(), !1);
43
- }, j = function(t) {
44
- if (f === void 0) {
40
+ }, y = function(e) {
41
+ var o = e || window.event;
42
+ return $(o.target) || o.touches.length > 1 ? !0 : (o.preventDefault && o.preventDefault(), !1);
43
+ }, j = function(e) {
44
+ if (b === void 0) {
45
45
  var o = !1, i = window.innerWidth - document.documentElement.clientWidth;
46
- o && i > 0 && (f = document.body.style.paddingRight, document.body.style.paddingRight = i + "px");
46
+ o && i > 0 && (b = document.body.style.paddingRight, document.body.style.paddingRight = i + "px");
47
47
  }
48
- u === void 0 && (u = document.body.style.overflow, document.body.style.overflow = "hidden");
48
+ f === void 0 && (f = document.body.style.overflow, document.body.style.overflow = "hidden");
49
49
  }, R = function() {
50
- f !== void 0 && (document.body.style.paddingRight = f, f = void 0), u !== void 0 && (document.body.style.overflow = u, u = void 0);
51
- }, V = function(t) {
52
- return t ? t.scrollHeight - t.scrollTop <= t.clientHeight : !1;
53
- }, Y = function(t, o) {
54
- var i = t.targetTouches[0].clientY - M;
55
- return D(t.target) ? !1 : o && o.scrollTop === 0 && i > 0 || V(o) && i < 0 ? y(t) : (t.stopPropagation(), !0);
56
- }, H = function(t, o) {
57
- if (!t) {
50
+ b !== void 0 && (document.body.style.paddingRight = b, b = void 0), f !== void 0 && (document.body.style.overflow = f, f = void 0);
51
+ }, V = function(e) {
52
+ return e ? e.scrollHeight - e.scrollTop <= e.clientHeight : !1;
53
+ }, Y = function(e, o) {
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
+ }, H = function(e, o) {
57
+ if (!e) {
58
58
  console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");
59
59
  return;
60
60
  }
61
- if (!m.some(function(a) {
62
- return a.targetElement === t;
61
+ if (!g.some(function(a) {
62
+ return a.targetElement === e;
63
63
  })) {
64
64
  var i = {
65
- targetElement: t,
65
+ targetElement: e,
66
66
  options: {}
67
67
  };
68
- m = [].concat(W(m), [i]), O ? (t.ontouchstart = function(a) {
69
- a.targetTouches.length === 1 && (M = a.targetTouches[0].clientY);
70
- }, t.ontouchmove = function(a) {
71
- a.targetTouches.length === 1 && Y(a, t);
68
+ g = [].concat(W(g), [i]), M ? (e.ontouchstart = function(a) {
69
+ a.targetTouches.length === 1 && (D = a.targetTouches[0].clientY);
70
+ }, e.ontouchmove = function(a) {
71
+ a.targetTouches.length === 1 && Y(a, e);
72
72
  }, v || (document.addEventListener("touchmove", y, B ? { passive: !1 } : void 0), v = !0)) : j();
73
73
  }
74
- }, q = function(t) {
75
- if (!t) {
74
+ }, q = function(e) {
75
+ if (!e) {
76
76
  console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.");
77
77
  return;
78
78
  }
79
- m = m.filter(function(o) {
80
- return o.targetElement !== t;
81
- }), O ? (t.ontouchstart = null, t.ontouchmove = null, v && m.length === 0 && (document.removeEventListener("touchmove", y, B ? { passive: !1 } : void 0), v = !1)) : m.length || R();
79
+ g = g.filter(function(o) {
80
+ return o.targetElement !== e;
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",
@@ -92,62 +92,62 @@ const U = '*,*:after,*:before{box-sizing:inherit}dialog{position:absolute;left:0
92
92
  position: "center",
93
93
  size: "medium"
94
94
  };
95
- var ee = Object.defineProperty, te = Object.getOwnPropertyDescriptor, l = (e, t, o, i) => {
96
- for (var a = i > 1 ? void 0 : i ? te(t, o) : t, c = e.length - 1, p; c >= 0; c--)
97
- (p = e[c]) && (a = (i ? p(t, o, a) : p(a)) || a);
98
- return i && a && ee(t, o, a), a;
95
+ var ee = Object.defineProperty, te = Object.getOwnPropertyDescriptor, l = (t, e, o, i) => {
96
+ for (var a = i > 1 ? void 0 : i ? te(e, o) : e, c = t.length - 1, p; c >= 0; c--)
97
+ (p = t[c]) && (a = (i ? p(e, o, a) : p(a)) || a);
98
+ return i && a && ee(e, o, a), a;
99
99
  };
100
100
  const w = "pie-modal";
101
101
  let n = class extends x {
102
102
  constructor() {
103
- super(...arguments), this.headingLevel = r.headingLevel, this.hasBackButton = r.hasBackButton, this.hasStackedActions = r.hasStackedActions, this.isDismissible = r.isDismissible, this.isFooterPinned = r.isFooterPinned, this.isFullWidthBelowMid = r.isFullWidthBelowMid, this.isLoading = r.isLoading, this.isOpen = r.isOpen, this.position = r.position, this.size = r.size, this._scrollableContainer = null, this._backButtonClicked = !1, this._escKeyAbortController = null, this._preventModalKeyboardDismissal = (e) => {
104
- e.key === "Escape" && e.preventDefault();
105
- }, this._handleDialogLightDismiss = (e) => {
106
- if (!this.isDismissible || e.target !== e.currentTarget)
103
+ super(...arguments), this.headingLevel = r.headingLevel, this.hasBackButton = r.hasBackButton, this.hasStackedActions = r.hasStackedActions, this.isDismissible = r.isDismissible, this.isFooterPinned = r.isFooterPinned, this.isFullWidthBelowMid = r.isFullWidthBelowMid, this.isLoading = r.isLoading, this.isOpen = r.isOpen, this.position = r.position, this.size = r.size, this._scrollableContainer = null, this._backButtonClicked = !1, this._escKeyAbortController = null, this._preventModalKeyboardDismissal = (t) => {
104
+ t.key === "Escape" && t.preventDefault();
105
+ }, this._handleDialogLightDismiss = (t) => {
106
+ if (!this.isDismissible || t.target !== t.currentTarget)
107
107
  return;
108
- const t = this._dialog.getBoundingClientRect(), {
108
+ const e = this._dialog.getBoundingClientRect(), {
109
109
  top: o = 0,
110
110
  bottom: i = 0,
111
111
  left: a = 0,
112
112
  right: c = 0
113
- } = t || {};
113
+ } = e || {};
114
114
  if (o === 0 && i === 0 && a === 0 && c === 0)
115
115
  return;
116
- (e.clientY < o || e.clientY > i || e.clientX < a || e.clientX > c) && (this.isOpen = !1);
116
+ (t.clientY < o || t.clientY > i || t.clientX < a || t.clientX > c) && (this.isOpen = !1);
117
117
  };
118
118
  }
119
119
  get _modalScrollContainer() {
120
- var e;
121
- return this._scrollableContainer || (this._scrollableContainer = (e = this._dialog) == null ? void 0 : e.querySelector(".c-modal-scrollContainer")), this._scrollableContainer;
120
+ var t;
121
+ return this._scrollableContainer || (this._scrollableContainer = (t = this._dialog) == null ? void 0 : t.querySelector(".c-modal-scrollContainer")), this._scrollableContainer;
122
122
  }
123
123
  connectedCallback() {
124
124
  super.connectedCallback(), this._abortController = new AbortController();
125
- const { signal: e } = this._abortController;
126
- this.addEventListener("click", (t) => this._handleDialogLightDismiss(t)), this._setupEscKeyListener(), document.addEventListener(_, (t) => this._handleModalOpened(t), { signal: e }), document.addEventListener(S, (t) => this._handleModalClosed(t), { signal: e }), document.addEventListener(L, (t) => this._handleModalClosed(t), { signal: e });
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(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();
130
130
  }
131
- async firstUpdated(e) {
131
+ async firstUpdated(t) {
132
132
  (await import("./dialog-polyfill.esm-CbjBMXAG.js").then((i) => i.default)).registerDialog(this._dialog);
133
133
  const { signal: o } = this._abortController;
134
134
  this._dialog.addEventListener("close", () => {
135
135
  this.isOpen = !1;
136
- }, { signal: o }), this._handleModalOpenStateOnFirstRender(e);
136
+ }, { signal: o }), this._handleModalOpenStateOnFirstRender(t);
137
137
  }
138
- updated(e) {
139
- this._handleModalOpenStateChanged(e), this._handleIsDismissibleChanged(e);
138
+ updated(t) {
139
+ this._handleModalOpenStateChanged(t), this._handleIsDismissibleChanged(t);
140
140
  }
141
- _handleIsDismissibleChanged(e) {
142
- const t = e.get("isDismissible"), o = this.isDismissible;
143
- !t && o && this._removeEscKeyEventListener(), t && !o && this._setupEscKeyListener();
141
+ _handleIsDismissibleChanged(t) {
142
+ const e = t.get("isDismissible"), o = this.isDismissible;
143
+ !e && o && this._removeEscKeyEventListener(), e && !o && this._setupEscKeyListener();
144
144
  }
145
145
  /**
146
146
  * Opens the dialog element and disables page scrolling
147
147
  */
148
- _handleModalOpened(e) {
149
- const { targetModal: t } = e.detail;
150
- if (t === this) {
148
+ _handleModalOpened(t) {
149
+ const { targetModal: e } = t.detail;
150
+ if (e === this) {
151
151
  if (this._dialog.hasAttribute("open") || !this._dialog.isConnected)
152
152
  return;
153
153
  this._dialog.showModal(), requestAnimationFrame(() => {
@@ -158,9 +158,9 @@ let n = class extends x {
158
158
  /**
159
159
  * Closes the dialog element and re-enables page scrolling
160
160
  */
161
- _handleModalClosed(e) {
162
- const { targetModal: t } = e.detail;
163
- t === this && (this._enableBodyScroll(), this._dialog.close(), this._returnFocus(), this._removeEscKeyEventListener());
161
+ _handleModalClosed(t) {
162
+ const { targetModal: e } = t.detail;
163
+ e === this && (this._enableBodyScroll(), this._dialog.close(), this._returnFocus(), this._removeEscKeyEventListener());
164
164
  }
165
165
  /**
166
166
  * Sets up an event listener on the Escape key to prevent dismissing the modal if isDismissible is false
@@ -168,37 +168,37 @@ let n = class extends x {
168
168
  _setupEscKeyListener() {
169
169
  if (!this._escKeyAbortController && !this.isDismissible) {
170
170
  this._escKeyAbortController = new AbortController();
171
- const { signal: e } = this._escKeyAbortController;
172
- document.addEventListener("keydown", (t) => this._preventModalKeyboardDismissal(t), { signal: e });
171
+ const { signal: t } = this._escKeyAbortController;
172
+ document.addEventListener("keydown", (e) => this._preventModalKeyboardDismissal(e), { signal: t });
173
173
  }
174
174
  }
175
175
  /**
176
176
  * Removes any event listeners set up that are listening to keyboard events and nulls the existing AbortController.
177
177
  */
178
178
  _removeEscKeyEventListener() {
179
- var e;
180
- (e = this._escKeyAbortController) == null || e.abort(), this._escKeyAbortController = null;
179
+ var t;
180
+ (t = this._escKeyAbortController) == null || t.abort(), this._escKeyAbortController = null;
181
181
  }
182
182
  // Handles the value of the isOpen property on first render of the component
183
- _handleModalOpenStateOnFirstRender(e) {
184
- e.get("isOpen") === void 0 && this.isOpen && h(this, _, { targetModal: this });
183
+ _handleModalOpenStateOnFirstRender(t) {
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
- _handleModalOpenStateChanged(e) {
188
- const t = e.get("isOpen");
189
- t !== void 0 && (t ? this._backButtonClicked ? (this._backButtonClicked = !1, h(this, L, { targetModal: this })) : h(this, S, { targetModal: this }) : h(this, _, { targetModal: this }));
187
+ _handleModalOpenStateChanged(t) {
188
+ const e = t.get("isOpen");
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
- _handleActionClick(e) {
192
- e === "leading" ? (this._dialog.close("leading"), h(this, Q, { targetModal: this })) : e === "supporting" && (this._dialog.close("supporting"), h(this, Z, { targetModal: this }));
191
+ _handleActionClick(t) {
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
196
196
  * and the chosen element can be found.
197
197
  */
198
198
  _returnFocus() {
199
- var t, o;
200
- const e = (t = this.returnFocusAfterCloseSelector) == null ? void 0 : t.trim();
201
- e && ((o = document.querySelector(e)) == null || o.focus());
199
+ var e, o;
200
+ const t = (e = this.returnFocusAfterCloseSelector) == null ? void 0 : e.trim();
201
+ t && ((o = document.querySelector(t)) == null || o.focus());
202
202
  }
203
203
  /**
204
204
  * Enables body scroll by unlocking the scroll container.
@@ -219,7 +219,7 @@ let n = class extends x {
219
219
  * @private
220
220
  */
221
221
  renderCloseButton() {
222
- var e;
222
+ var t, e;
223
223
  return this.isDismissible ? s`
224
224
  <pie-icon-button
225
225
  @click="${() => {
@@ -227,10 +227,10 @@ let n = class extends x {
227
227
  }}"
228
228
  variant="ghost-secondary"
229
229
  class="c-modal-closeBtn"
230
- aria-label="${((e = this.aria) == null ? void 0 : e.close) || g}"
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
- </pie-icon-button>` : g;
233
+ </pie-icon-button>` : m;
234
234
  }
235
235
  /**
236
236
  * Template for the back button element. Called within the
@@ -239,7 +239,7 @@ let n = class extends x {
239
239
  * @private
240
240
  */
241
241
  renderBackButton() {
242
- var e;
242
+ var t, e;
243
243
  return this.hasBackButton ? s`
244
244
  <pie-icon-button
245
245
  @click="${() => {
@@ -247,11 +247,11 @@ let n = class extends x {
247
247
  }}"
248
248
  variant="ghost-secondary"
249
249
  class="c-modal-backBtn"
250
- aria-label="${b((e = this.aria) == null ? void 0 : e.back)}"
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
- <icon-chevron-left class="c-modal-backBtn-icon"></icon-chevron-right>
252
+ <icon-chevron-left class="c-modal-backBtn-icon"></icon-chevron-left>
253
253
  </pie-icon-button>
254
- ` : g;
254
+ ` : m;
255
255
  }
256
256
  /**
257
257
  * Renders the "leadingAction" button if the text is provided.
@@ -263,18 +263,18 @@ let n = class extends x {
263
263
  * @private
264
264
  */
265
265
  renderLeadingAction() {
266
- const { ariaLabel: e, text: t, variant: o = "primary" } = this.leadingAction || {};
267
- return t ? s`
266
+ const { ariaLabel: t, text: e, variant: o = "primary" } = this.leadingAction || {};
267
+ return e ? s`
268
268
  <pie-button
269
269
  variant="${o}"
270
- aria-label="${b(e)}"
270
+ aria-label="${h(t)}"
271
271
  type="submit"
272
272
  ?isFullWidth="${this.hasStackedActions}"
273
273
  @click="${() => this._handleActionClick("leading")}"
274
274
  data-test-id="modal-leading-action">
275
- ${t}
275
+ ${e}
276
276
  </pie-button>
277
- ` : g;
277
+ ` : m;
278
278
  }
279
279
  /**
280
280
  * Renders the "supportingAction" button if the text is provided.
@@ -288,16 +288,16 @@ let n = class extends x {
288
288
  */
289
289
  renderSupportingAction() {
290
290
  var i;
291
- const { ariaLabel: e, text: t, variant: o = "ghost" } = this.supportingAction || {};
292
- return !t || !((i = this.leadingAction) != null && i.text) ? g : s`
291
+ const { ariaLabel: t, text: e, variant: o = "ghost" } = this.supportingAction || {};
292
+ return !e || !((i = this.leadingAction) != null && i.text) ? m : s`
293
293
  <pie-button
294
294
  variant="${o}"
295
- aria-label="${b(e)}"
295
+ aria-label="${h(t)}"
296
296
  type="reset"
297
297
  ?isFullWidth="${this.hasStackedActions}"
298
298
  @click="${() => this._handleActionClick("supporting")}"
299
299
  data-test-id="modal-supporting-action">
300
- ${t}
300
+ ${e}
301
301
  </pie-button>
302
302
  `;
303
303
  }
@@ -309,16 +309,16 @@ let n = class extends x {
309
309
  */
310
310
  renderModalFooter() {
311
311
  var i, a;
312
- const e = (i = this.leadingAction) == null ? void 0 : i.text;
313
- e || (a = this.supportingAction) != null && a.text && console.warn("You cannot have a supporting action without a leading action. If you only need one button then use a leading action instead.");
314
- const t = {
312
+ const t = (i = this.leadingAction) == null ? void 0 : i.text;
313
+ t || (a = this.supportingAction) != null && a.text && console.warn("You cannot have a supporting action without a leading action. If you only need one button then use a leading action instead.");
314
+ const e = {
315
315
  "c-modal-footer": !0,
316
316
  "c-modal-footer--stackedActions": this.hasStackedActions
317
- }, o = e ? s`
318
- <footer class="${z(t)}" data-test-id="pie-modal-footer">
317
+ }, o = t ? s`
318
+ <footer class="${A(e)}" data-test-id="pie-modal-footer">
319
319
  ${this.renderLeadingAction()}
320
320
  ${this.renderSupportingAction()}
321
- </footer>` : g;
321
+ </footer>` : m;
322
322
  return s`
323
323
  <slot name="footer">
324
324
  ${o}
@@ -329,7 +329,7 @@ let n = class extends x {
329
329
  * @private
330
330
  */
331
331
  renderLoadingSpinner() {
332
- return this.isLoading ? s`<pie-spinner size="xlarge" variant="secondary"></pie-spinner>` : g;
332
+ return this.isLoading ? s`<pie-spinner size="xlarge" variant="secondary"></pie-spinner>` : m;
333
333
  }
334
334
  /**
335
335
  * Renders the modal inner content and footer of the modal.
@@ -350,37 +350,39 @@ let n = class extends x {
350
350
  * @private
351
351
  */
352
352
  renderHeading() {
353
- const { heading: e, headingLevel: t } = this, o = T(t);
353
+ const { heading: t, headingLevel: e } = this, o = T(e);
354
354
  return s`
355
- <${o} class="c-modal-heading">
356
- ${e}
355
+ <${o} id="modal-heading" class="c-modal-heading">
356
+ ${t}
357
357
  </${o}>
358
358
  `;
359
359
  }
360
360
  render() {
361
361
  const {
362
- aria: e,
363
- isDismissible: t,
362
+ aria: t,
363
+ isDismissible: e,
364
364
  isFooterPinned: o,
365
365
  isFullWidthBelowMid: i,
366
366
  isLoading: a,
367
367
  position: c,
368
368
  size: p
369
- } = this, $ = a && (e == null ? void 0 : e.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",
373
- "c-modal--dismissible": t,
373
+ "c-modal--dismissible": e,
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="${b($)}"
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.0",
3
+ "version": "1.15.0",
4
4
  "description": "PIE design system modal built using web components",
5
5
  "repository": {
6
6
  "type": "git",
@@ -40,7 +40,7 @@
40
40
  "devDependencies": {
41
41
  "@custom-elements-manifest/analyzer": "0.9.0",
42
42
  "@justeat/pie-design-tokens": "7.4.0",
43
- "@justeattakeaway/pie-button": "1.6.7",
43
+ "@justeattakeaway/pie-button": "1.7.0",
44
44
  "@justeattakeaway/pie-components-config": "0.21.0",
45
45
  "@justeattakeaway/pie-css": "0.21.0",
46
46
  "@justeattakeaway/pie-monorepo-utils": "0.7.0",
@@ -53,8 +53,8 @@
53
53
  "extends": "../../../package.json"
54
54
  },
55
55
  "dependencies": {
56
- "@justeattakeaway/pie-button": "1.6.7",
57
- "@justeattakeaway/pie-icon-button": "2.0.6",
56
+ "@justeattakeaway/pie-button": "1.7.0",
57
+ "@justeattakeaway/pie-icon-button": "2.1.0",
58
58
  "@justeattakeaway/pie-icons-webc": "1.14.2",
59
59
  "@justeattakeaway/pie-spinner": "1.2.5",
60
60
  "@justeattakeaway/pie-webc-core": "1.1.0",
package/src/index.ts CHANGED
@@ -355,7 +355,7 @@ export class PieModal extends PieElement implements ModalProps {
355
355
  @click="${() => { this.isOpen = false; }}"
356
356
  variant="ghost-secondary"
357
357
  class="c-modal-closeBtn"
358
- aria-label="${this.aria?.close || nothing}"
358
+ .aria=${ifDefined(this.aria?.close) ? { label: this.aria?.close } : nothing}
359
359
  data-test-id="modal-close-button">
360
360
  <icon-close></icon-close>
361
361
  </pie-icon-button>`;
@@ -377,9 +377,9 @@ export class PieModal extends PieElement implements ModalProps {
377
377
  @click="${() => { this._backButtonClicked = true; this.isOpen = false; }}"
378
378
  variant="ghost-secondary"
379
379
  class="c-modal-backBtn"
380
- aria-label="${ifDefined(this.aria?.back)}"
380
+ .aria=${ifDefined(this.aria?.back) ? { label: this.aria?.back } : nothing}
381
381
  data-test-id="modal-back-button">
382
- <icon-chevron-left class="c-modal-backBtn-icon"></icon-chevron-right>
382
+ <icon-chevron-left class="c-modal-backBtn-icon"></icon-chevron-left>
383
383
  </pie-icon-button>
384
384
  `;
385
385
  }
@@ -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()}