@justeattakeaway/pie-radio 1.1.17 → 1.2.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.
- package/custom-elements.json +19 -0
- package/dist/index.d.ts +8 -0
- package/dist/index.js +145 -78
- package/dist/react.d.ts +8 -0
- package/package.json +5 -4
- package/src/index.ts +34 -0
package/custom-elements.json
CHANGED
|
@@ -75,6 +75,14 @@
|
|
|
75
75
|
"privacy": "private",
|
|
76
76
|
"default": "false"
|
|
77
77
|
},
|
|
78
|
+
{
|
|
79
|
+
"kind": "field",
|
|
80
|
+
"name": "_contextAria",
|
|
81
|
+
"type": {
|
|
82
|
+
"text": "ContextualAria | undefined"
|
|
83
|
+
},
|
|
84
|
+
"privacy": "private"
|
|
85
|
+
},
|
|
78
86
|
{
|
|
79
87
|
"kind": "field",
|
|
80
88
|
"name": "checked",
|
|
@@ -198,6 +206,17 @@
|
|
|
198
206
|
}
|
|
199
207
|
}
|
|
200
208
|
]
|
|
209
|
+
},
|
|
210
|
+
{
|
|
211
|
+
"kind": "method",
|
|
212
|
+
"name": "_applyContextAria",
|
|
213
|
+
"privacy": "private",
|
|
214
|
+
"return": {
|
|
215
|
+
"type": {
|
|
216
|
+
"text": "void"
|
|
217
|
+
}
|
|
218
|
+
},
|
|
219
|
+
"description": "When an ancestor provides ARIA (for example a `pie-list-item`), applies the name and\ndescription to the host, which carries `role=\"radio\"` and so is the element assistive tech\nannounces. Guarded to only run when a provider exists (in a list), so a standalone radio's\nconsumer-set `aria-*` is never removed."
|
|
201
220
|
}
|
|
202
221
|
],
|
|
203
222
|
"events": [
|
package/dist/index.d.ts
CHANGED
|
@@ -18,6 +18,7 @@ export declare const defaultProps: DefaultProps;
|
|
|
18
18
|
export declare class PieRadio extends PieRadio_base implements RadioProps {
|
|
19
19
|
private _disabledByParent;
|
|
20
20
|
private _isAnimationAllowed;
|
|
21
|
+
private _contextAria?;
|
|
21
22
|
checked: boolean;
|
|
22
23
|
defaultChecked: boolean;
|
|
23
24
|
disabled: boolean;
|
|
@@ -51,6 +52,13 @@ export declare class PieRadio extends PieRadio_base implements RadioProps {
|
|
|
51
52
|
formResetCallback(): void;
|
|
52
53
|
private _handleClick;
|
|
53
54
|
updated(): void;
|
|
55
|
+
/**
|
|
56
|
+
* When an ancestor provides ARIA (for example a `pie-list-item`), applies the name and
|
|
57
|
+
* description to the host, which carries `role="radio"` and so is the element assistive tech
|
|
58
|
+
* announces. Guarded to only run when a provider exists (in a list), so a standalone radio's
|
|
59
|
+
* consumer-set `aria-*` is never removed.
|
|
60
|
+
*/
|
|
61
|
+
private _applyContextAria;
|
|
54
62
|
render(): TemplateResult<1>;
|
|
55
63
|
static styles: CSSResult;
|
|
56
64
|
}
|
package/dist/index.js
CHANGED
|
@@ -1,38 +1,91 @@
|
|
|
1
|
-
import { LitElement as
|
|
2
|
-
import { state as
|
|
3
|
-
import { ifDefined as
|
|
4
|
-
import { live as
|
|
5
|
-
import { classMap as
|
|
6
|
-
import { FormControlMixin as
|
|
7
|
-
const b = class b extends
|
|
1
|
+
import { LitElement as m, html as x, unsafeCSS as y } from "lit";
|
|
2
|
+
import { state as v, property as l, query as w } from "lit/decorators.js";
|
|
3
|
+
import { ifDefined as _ } from "lit/directives/if-defined.js";
|
|
4
|
+
import { live as C } from "lit/directives/live.js";
|
|
5
|
+
import { classMap as A } from "lit/directives/class-map.js";
|
|
6
|
+
import { FormControlMixin as z, RtlMixin as q, wrapNativeEvent as P, requiredProperty as E, validPropertyValues as $, safeCustomElement as B, ariaContext as S } from "@justeattakeaway/pie-webc-core";
|
|
7
|
+
const b = class b extends m {
|
|
8
8
|
willUpdate() {
|
|
9
9
|
this.getAttribute("v") || this.setAttribute("v", b.v);
|
|
10
10
|
}
|
|
11
11
|
};
|
|
12
|
-
b.v = "1.
|
|
13
|
-
let
|
|
14
|
-
|
|
12
|
+
b.v = "1.2.0";
|
|
13
|
+
let u = b;
|
|
14
|
+
/**
|
|
15
|
+
* @license
|
|
16
|
+
* Copyright 2021 Google LLC
|
|
17
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
18
|
+
*/
|
|
19
|
+
let F = class extends Event {
|
|
20
|
+
constructor(t, e, i, o) {
|
|
21
|
+
super("context-request", { bubbles: !0, composed: !0 }), this.context = t, this.contextTarget = e, this.callback = i, this.subscribe = o ?? !1;
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
/**
|
|
25
|
+
* @license
|
|
26
|
+
* Copyright 2021 Google LLC
|
|
27
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
28
|
+
*/
|
|
29
|
+
class f {
|
|
30
|
+
constructor(t, e, i, o) {
|
|
31
|
+
if (this.subscribe = !1, this.provided = !1, this.value = void 0, this.t = (a, s) => {
|
|
32
|
+
this.unsubscribe && (this.unsubscribe !== s && (this.provided = !1, this.unsubscribe()), this.subscribe || this.unsubscribe()), this.value = a, this.host.requestUpdate(), this.provided && !this.subscribe || (this.provided = !0, this.callback && this.callback(a, s)), this.unsubscribe = s;
|
|
33
|
+
}, this.host = t, e.context !== void 0) {
|
|
34
|
+
const a = e;
|
|
35
|
+
this.context = a.context, this.callback = a.callback, this.subscribe = a.subscribe ?? !1;
|
|
36
|
+
} else this.context = e, this.callback = i, this.subscribe = o ?? !1;
|
|
37
|
+
this.host.addController(this);
|
|
38
|
+
}
|
|
39
|
+
hostConnected() {
|
|
40
|
+
this.dispatchRequest();
|
|
41
|
+
}
|
|
42
|
+
hostDisconnected() {
|
|
43
|
+
this.unsubscribe && (this.unsubscribe(), this.unsubscribe = void 0);
|
|
44
|
+
}
|
|
45
|
+
dispatchRequest() {
|
|
46
|
+
this.host.dispatchEvent(new F(this.context, this.host, this.t, this.subscribe));
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
/**
|
|
50
|
+
* @license
|
|
51
|
+
* Copyright 2022 Google LLC
|
|
52
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
53
|
+
*/
|
|
54
|
+
function D({ context: r, subscribe: t }) {
|
|
55
|
+
return (e, i) => {
|
|
56
|
+
typeof i == "object" ? i.addInitializer((function() {
|
|
57
|
+
new f(this, { context: r, callback: (o) => {
|
|
58
|
+
e.set.call(this, o);
|
|
59
|
+
}, subscribe: t });
|
|
60
|
+
})) : e.constructor.addInitializer(((o) => {
|
|
61
|
+
new f(o, { context: r, callback: (a) => {
|
|
62
|
+
o[i] = a;
|
|
63
|
+
}, subscribe: t });
|
|
64
|
+
}));
|
|
65
|
+
};
|
|
66
|
+
}
|
|
67
|
+
const R = ["default", "error"], n = {
|
|
15
68
|
checked: !1,
|
|
16
69
|
defaultChecked: !1,
|
|
17
70
|
disabled: !1,
|
|
18
71
|
required: !1,
|
|
19
72
|
status: "default"
|
|
20
|
-
},
|
|
21
|
-
var
|
|
22
|
-
for (var
|
|
23
|
-
(
|
|
24
|
-
return
|
|
73
|
+
}, O = '*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-radio{--radio-font-family: var(--dt-font-body-l-family);--radio-font-size: calc(var(--dt-font-body-l-size) * 1px);--radio-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--radio-font-weight: var(--dt-font-body-l-weight);--radio-text-color: var(--dt-color-content-default-solid);--radio-cursor: pointer;display:flex;align-items:center;gap:var(--dt-spacing-b);cursor:var(--radio-cursor);font-family:var(--radio-font-family);font-size:var(--radio-font-size);line-height:var(--radio-line-height);font-weight:var(--radio-font-weight);color:var(--radio-text-color)}.c-radio.is-disabled{--radio-cursor: not-allowed}.c-radio .c-radio-input{--radio-dot-bg-color: var(--dt-color-content-interactive-primary);--radio-bg-color: transparent;--radio-bg-color--checked: var(--dt-color-interactive-brand);--radio-border-color: var(--dt-color-border-form);--radio-size: 24px;--radio-dot-size: 8px;--radio-cursor: pointer;--radio-motion-easing: var(--dt-motion-easing-persistent-functional);--radio-border-width: 1px;-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;position:relative;inline-size:var(--radio-size);block-size:var(--radio-size);border:var(--radio-border-width) solid var(--radio-border-color);border-radius:50%;margin:0;cursor:var(--radio-cursor);background-color:var(--radio-bg-color);flex-shrink:0}.c-radio .c-radio-input:before{--circle-size: calc(var(--radio-border-width) * -1);content:"";display:block;inset:var(--circle-size);border-radius:inherit;background-color:var(--radio-bg-color--checked);position:absolute;transform:scale(0)}.c-radio .c-radio-input:after{content:"";position:absolute;top:50%;left:50%;width:var(--radio-dot-size);height:var(--radio-dot-size);background-color:var(--radio-dot-bg-color);border-radius:50%;transform:translate(-50%,-50%) scale(0)}.c-radio .c-radio-input:checked:after{transform:translate(-50%,-50%) scale(1)}.c-radio .c-radio-input:checked:before{transform:scale(1)}.c-radio .c-radio-input:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-radio .c-radio-input:disabled{--radio-bg-color: var(--dt-color-disabled-01);--radio-border-color: var(--dt-color-border-default);--radio-cursor: not-allowed}.c-radio .c-radio-input:checked:disabled{--radio-dot-bg-color: var(--dt-color-content-disabled);--radio-bg-color--checked: var(--dt-color-disabled-01)}.c-radio .c-radio-input:hover:not(:checked,:disabled){--radio-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--dt-color-hover-01))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio .c-radio-input:hover:not(:checked,:disabled){--radio-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), transparent)}}.c-radio .c-radio-input:active:not(:checked,:disabled){--radio-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--dt-color-active-01))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio .c-radio-input:active:not(:checked,:disabled){--radio-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), transparent)}}.c-radio .c-radio-input:hover:checked:not(:disabled):before{--radio-bg-color--checked: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)));--radio-border-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio .c-radio-input:hover:checked:not(:disabled):before{--radio-bg-color--checked: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-brand))}}.c-radio .c-radio-input:active:checked:not(:disabled):before{--radio-bg-color--checked: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)));--radio-border-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio .c-radio-input:active:checked:not(:disabled):before{--radio-bg-color--checked: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-brand))}}.c-radio .c-radio-input{transition:background-color var(--dt-motion-timing-100) var(--radio-motion-easing)}@media(prefers-reduced-motion:no-preference){.c-radio .c-radio-input:not(:disabled):before{transition:all var(--dt-motion-timing-100) var(--radio-motion-easing)}}@media(prefers-reduced-motion:no-preference){.c-radio .c-radio-input:not(:disabled):after{transition:all var(--dt-motion-timing-100) var(--radio-motion-easing)}}@media(prefers-reduced-motion:no-preference){.c-radio .c-radio-input:not(:disabled):checked:after{transition:all var(--dt-motion-timing-150) var(--radio-motion-easing)}}.c-radio .c-radio-input{align-self:flex-start}.c-radio.has-error .c-radio-input{--radio-bg-color--checked: var(--dt-color-support-error);--radio-border-color: var(--dt-color-support-error)}.c-radio.has-error .c-radio-input:hover:not(:checked,:disabled){--radio-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--dt-color-hover-01))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio.has-error .c-radio-input:hover:not(:checked,:disabled){--radio-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), transparent)}}.c-radio.has-error .c-radio-input:active:not(:checked,:disabled){--radio-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--dt-color-active-01))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio.has-error .c-radio-input:active:not(:checked,:disabled){--radio-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), transparent)}}.c-radio.has-error .c-radio-input:hover:checked:not(:disabled):before{--radio-bg-color--checked: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-hover-01)));--radio-border-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-hover-01)))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio.has-error .c-radio-input:hover:checked:not(:disabled):before{--radio-bg-color--checked: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-support-error))}}.c-radio.has-error .c-radio-input:active:checked:not(:disabled):before{--radio-bg-color--checked: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-active-01)));--radio-border-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-active-01)))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio.has-error .c-radio-input:active:checked:not(:disabled):before{--radio-bg-color--checked: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-support-error))}}:host(:focus-visible){outline:none}:host(:focus-visible) .c-radio .c-radio-input{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}';
|
|
74
|
+
var j = Object.defineProperty, I = Object.getOwnPropertyDescriptor, d = (r, t, e, i) => {
|
|
75
|
+
for (var o = i > 1 ? void 0 : i ? I(t, e) : t, a = r.length - 1, s; a >= 0; a--)
|
|
76
|
+
(s = r[a]) && (o = (i ? s(t, e, o) : s(o)) || o);
|
|
77
|
+
return i && o && j(t, e, o), o;
|
|
25
78
|
};
|
|
26
|
-
const
|
|
27
|
-
let
|
|
79
|
+
const g = "pie-radio";
|
|
80
|
+
let c = class extends z(q(u)) {
|
|
28
81
|
constructor() {
|
|
29
|
-
super(...arguments), this._disabledByParent = !1, this._isAnimationAllowed = !1, this.checked =
|
|
82
|
+
super(...arguments), this._disabledByParent = !1, this._isAnimationAllowed = !1, this.checked = n.checked, this.defaultChecked = n.defaultChecked, this.disabled = n.disabled, this.required = n.required, this.status = n.status;
|
|
30
83
|
}
|
|
31
84
|
connectedCallback() {
|
|
32
85
|
super.connectedCallback(), this._abortController = new AbortController();
|
|
33
86
|
const { signal: r } = this._abortController;
|
|
34
|
-
this.setAttribute("role", "radio"), this.addEventListener("pie-radio-group-disabled", (
|
|
35
|
-
this._disabledByParent =
|
|
87
|
+
this.setAttribute("role", "radio"), this.addEventListener("pie-radio-group-disabled", (t) => {
|
|
88
|
+
this._disabledByParent = t.detail.disabled;
|
|
36
89
|
}, { signal: r }), this.addEventListener("click", this._handleClick, { signal: r });
|
|
37
90
|
}
|
|
38
91
|
disconnectedCallback() {
|
|
@@ -49,10 +102,10 @@ let o = class extends A(z(v)) {
|
|
|
49
102
|
* @param {Event} event - This should be the change event that was listened for on an input element with `type="radio"`.
|
|
50
103
|
*/
|
|
51
104
|
_handleChange(r) {
|
|
52
|
-
const { checked:
|
|
53
|
-
this.checked =
|
|
54
|
-
const
|
|
55
|
-
this._isAnimationAllowed || (this._isAnimationAllowed = !0), this.dispatchEvent(
|
|
105
|
+
const { checked: t } = r == null ? void 0 : r.currentTarget;
|
|
106
|
+
this.checked = t;
|
|
107
|
+
const e = P(r);
|
|
108
|
+
this._isAnimationAllowed || (this._isAnimationAllowed = !0), this.dispatchEvent(e), this._handleFormAssociation();
|
|
56
109
|
}
|
|
57
110
|
/**
|
|
58
111
|
* (Read-only) returns a ValidityState with the validity states that this element is in.
|
|
@@ -79,81 +132,95 @@ let o = class extends A(z(v)) {
|
|
|
79
132
|
r.composedPath()[0] !== this._radio && (this.disabled || this._disabledByParent || this._radio.click());
|
|
80
133
|
}
|
|
81
134
|
updated() {
|
|
82
|
-
this.setAttribute("aria-checked", String(this.checked)), this._handleFormAssociation();
|
|
135
|
+
this.setAttribute("aria-checked", String(this.checked)), this._handleFormAssociation(), this._applyContextAria();
|
|
136
|
+
}
|
|
137
|
+
/**
|
|
138
|
+
* When an ancestor provides ARIA (for example a `pie-list-item`), applies the name and
|
|
139
|
+
* description to the host, which carries `role="radio"` and so is the element assistive tech
|
|
140
|
+
* announces. Guarded to only run when a provider exists (in a list), so a standalone radio's
|
|
141
|
+
* consumer-set `aria-*` is never removed.
|
|
142
|
+
*/
|
|
143
|
+
_applyContextAria() {
|
|
144
|
+
const r = this._contextAria;
|
|
145
|
+
r && (r.label ? this.setAttribute("aria-label", r.label) : this.removeAttribute("aria-label"), r.description ? this.setAttribute("aria-description", r.description) : this.removeAttribute("aria-description"));
|
|
83
146
|
}
|
|
84
147
|
render() {
|
|
85
148
|
const {
|
|
86
149
|
checked: r,
|
|
87
|
-
disabled:
|
|
88
|
-
_disabledByParent:
|
|
89
|
-
_isAnimationAllowed:
|
|
90
|
-
name:
|
|
91
|
-
required:
|
|
92
|
-
value:
|
|
150
|
+
disabled: t,
|
|
151
|
+
_disabledByParent: e,
|
|
152
|
+
_isAnimationAllowed: i,
|
|
153
|
+
name: o,
|
|
154
|
+
required: a,
|
|
155
|
+
value: s,
|
|
93
156
|
status: p
|
|
94
|
-
} = this, h =
|
|
157
|
+
} = this, h = t || e, k = {
|
|
95
158
|
"c-radio": !0,
|
|
96
159
|
"is-disabled": h,
|
|
97
160
|
[`has-${p}`]: !h,
|
|
98
|
-
"is-animated":
|
|
161
|
+
"is-animated": i
|
|
99
162
|
};
|
|
100
|
-
return
|
|
101
|
-
<label class=${
|
|
163
|
+
return x`
|
|
164
|
+
<label class=${A(k)}>
|
|
102
165
|
<input
|
|
103
166
|
tabindex="-1"
|
|
104
167
|
class="c-radio-input"
|
|
105
168
|
type="radio"
|
|
106
169
|
id="radioId"
|
|
107
170
|
data-test-id="pie-radio-input"
|
|
108
|
-
.checked="${
|
|
109
|
-
.value="${
|
|
110
|
-
name="${
|
|
171
|
+
.checked="${C(r)}"
|
|
172
|
+
.value="${s}"
|
|
173
|
+
name="${_(o)}"
|
|
111
174
|
?disabled="${h}"
|
|
112
|
-
?required="${
|
|
175
|
+
?required="${a}"
|
|
113
176
|
aria-invalid=${p === "error" ? "true" : "false"}
|
|
114
177
|
@change="${this._handleChange}">
|
|
115
178
|
<slot></slot>
|
|
116
179
|
</label>`;
|
|
117
180
|
}
|
|
118
181
|
};
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
],
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
],
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
],
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
],
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
]
|
|
182
|
+
c.styles = y(O);
|
|
183
|
+
d([
|
|
184
|
+
v()
|
|
185
|
+
], c.prototype, "_disabledByParent", 2);
|
|
186
|
+
d([
|
|
187
|
+
v()
|
|
188
|
+
], c.prototype, "_isAnimationAllowed", 2);
|
|
189
|
+
d([
|
|
190
|
+
D({ context: S, subscribe: !0 }),
|
|
191
|
+
v()
|
|
192
|
+
], c.prototype, "_contextAria", 2);
|
|
193
|
+
d([
|
|
194
|
+
l({ type: Boolean, reflect: !0 })
|
|
195
|
+
], c.prototype, "checked", 2);
|
|
196
|
+
d([
|
|
197
|
+
l({ type: Boolean, reflect: !0 })
|
|
198
|
+
], c.prototype, "defaultChecked", 2);
|
|
199
|
+
d([
|
|
200
|
+
l({ type: Boolean, reflect: !0 })
|
|
201
|
+
], c.prototype, "disabled", 2);
|
|
202
|
+
d([
|
|
203
|
+
l({ type: String, reflect: !0 })
|
|
204
|
+
], c.prototype, "name", 2);
|
|
205
|
+
d([
|
|
206
|
+
l({ type: Boolean, reflect: !0 })
|
|
207
|
+
], c.prototype, "required", 2);
|
|
208
|
+
d([
|
|
209
|
+
l({ type: String }),
|
|
210
|
+
E(g)
|
|
211
|
+
], c.prototype, "value", 2);
|
|
212
|
+
d([
|
|
213
|
+
l({ type: String }),
|
|
214
|
+
$(g, R, n.status)
|
|
215
|
+
], c.prototype, "status", 2);
|
|
216
|
+
d([
|
|
217
|
+
w('input[type="radio"]')
|
|
218
|
+
], c.prototype, "_radio", 2);
|
|
219
|
+
c = d([
|
|
220
|
+
B("pie-radio")
|
|
221
|
+
], c);
|
|
155
222
|
export {
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
223
|
+
c as PieRadio,
|
|
224
|
+
n as defaultProps,
|
|
225
|
+
R as statusTypes
|
|
159
226
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -21,6 +21,7 @@ export declare const PieRadio: React_2.ForwardRefExoticComponent<React_2.PropsWi
|
|
|
21
21
|
declare class PieRadio_2 extends PieRadio_base implements RadioProps {
|
|
22
22
|
private _disabledByParent;
|
|
23
23
|
private _isAnimationAllowed;
|
|
24
|
+
private _contextAria?;
|
|
24
25
|
checked: boolean;
|
|
25
26
|
defaultChecked: boolean;
|
|
26
27
|
disabled: boolean;
|
|
@@ -54,6 +55,13 @@ declare class PieRadio_2 extends PieRadio_base implements RadioProps {
|
|
|
54
55
|
formResetCallback(): void;
|
|
55
56
|
private _handleClick;
|
|
56
57
|
updated(): void;
|
|
58
|
+
/**
|
|
59
|
+
* When an ancestor provides ARIA (for example a `pie-list-item`), applies the name and
|
|
60
|
+
* description to the host, which carries `role="radio"` and so is the element assistive tech
|
|
61
|
+
* announces. Guarded to only run when a provider exists (in a list), so a standalone radio's
|
|
62
|
+
* consumer-set `aria-*` is never removed.
|
|
63
|
+
*/
|
|
64
|
+
private _applyContextAria;
|
|
57
65
|
render(): TemplateResult<1>;
|
|
58
66
|
static styles: CSSResult;
|
|
59
67
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-radio",
|
|
3
3
|
"description": "PIE Design System Radio built using Web Components",
|
|
4
|
-
"version": "1.
|
|
4
|
+
"version": "1.2.0",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/justeattakeaway/pie",
|
|
@@ -44,11 +44,12 @@
|
|
|
44
44
|
"license": "Apache-2.0",
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@justeattakeaway/pie-components-config": "0.21.3",
|
|
47
|
-
"@justeattakeaway/pie-css": "1.
|
|
48
|
-
"@justeattakeaway/pie-monorepo-utils": "0.9.
|
|
47
|
+
"@justeattakeaway/pie-css": "1.3.1",
|
|
48
|
+
"@justeattakeaway/pie-monorepo-utils": "0.9.7"
|
|
49
49
|
},
|
|
50
50
|
"dependencies": {
|
|
51
|
-
"@justeattakeaway/pie-webc-core": "
|
|
51
|
+
"@justeattakeaway/pie-webc-core": "16.1.0",
|
|
52
|
+
"@lit/context": "1.1.6"
|
|
52
53
|
},
|
|
53
54
|
"customElements": "custom-elements.json",
|
|
54
55
|
"sideEffects": [
|
package/src/index.ts
CHANGED
|
@@ -6,6 +6,7 @@ import {
|
|
|
6
6
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
7
7
|
import { live } from 'lit/directives/live.js';
|
|
8
8
|
import { classMap } from 'lit/directives/class-map.js';
|
|
9
|
+
import { consume } from '@lit/context';
|
|
9
10
|
|
|
10
11
|
import {
|
|
11
12
|
FormControlMixin,
|
|
@@ -14,6 +15,8 @@ import {
|
|
|
14
15
|
wrapNativeEvent,
|
|
15
16
|
validPropertyValues,
|
|
16
17
|
safeCustomElement,
|
|
18
|
+
ariaContext,
|
|
19
|
+
type ContextualAria,
|
|
17
20
|
} from '@justeattakeaway/pie-webc-core';
|
|
18
21
|
|
|
19
22
|
import { type RadioProps, defaultProps, statusTypes } from './defs';
|
|
@@ -37,6 +40,13 @@ export class PieRadio extends FormControlMixin(RtlMixin(PieElement)) implements
|
|
|
37
40
|
@state()
|
|
38
41
|
private _isAnimationAllowed = false;
|
|
39
42
|
|
|
43
|
+
// Optional ARIA supplied by an ancestor (for example a `pie-list-item`). A radio's host carries
|
|
44
|
+
// `role="radio"`, so it is the element assistive tech announces and where the name/description
|
|
45
|
+
// belong. Undefined when standalone, so a consumer's own aria-* is left untouched.
|
|
46
|
+
@consume({ context: ariaContext, subscribe: true })
|
|
47
|
+
@state()
|
|
48
|
+
private _contextAria?: ContextualAria;
|
|
49
|
+
|
|
40
50
|
@property({ type: Boolean, reflect: true })
|
|
41
51
|
public checked = defaultProps.checked;
|
|
42
52
|
|
|
@@ -159,6 +169,30 @@ export class PieRadio extends FormControlMixin(RtlMixin(PieElement)) implements
|
|
|
159
169
|
this.setAttribute('aria-checked', String(this.checked));
|
|
160
170
|
|
|
161
171
|
this._handleFormAssociation();
|
|
172
|
+
this._applyContextAria();
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
/**
|
|
176
|
+
* When an ancestor provides ARIA (for example a `pie-list-item`), applies the name and
|
|
177
|
+
* description to the host, which carries `role="radio"` and so is the element assistive tech
|
|
178
|
+
* announces. Guarded to only run when a provider exists (in a list), so a standalone radio's
|
|
179
|
+
* consumer-set `aria-*` is never removed.
|
|
180
|
+
*/
|
|
181
|
+
private _applyContextAria (): void {
|
|
182
|
+
const aria = this._contextAria;
|
|
183
|
+
if (!aria) return;
|
|
184
|
+
|
|
185
|
+
if (aria.label) {
|
|
186
|
+
this.setAttribute('aria-label', aria.label);
|
|
187
|
+
} else {
|
|
188
|
+
this.removeAttribute('aria-label');
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
if (aria.description) {
|
|
192
|
+
this.setAttribute('aria-description', aria.description);
|
|
193
|
+
} else {
|
|
194
|
+
this.removeAttribute('aria-description');
|
|
195
|
+
}
|
|
162
196
|
}
|
|
163
197
|
|
|
164
198
|
render () {
|