@nectary/components 5.44.0 → 5.44.1

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 (5) hide show
  1. package/bundle.js +27 -2
  2. package/button-group-item/index.d.ts +1 -1
  3. package/button-group-item/index.js +26 -2
  4. package/package.json +1 -1
  5. package/time-picker/index.js +1 -0
package/bundle.js CHANGED
@@ -2329,17 +2329,32 @@ class ButtonGroupItem extends NectaryElement {
2329
2329
  "size",
2330
2330
  "text",
2331
2331
  "disabled",
2332
- "toggled"
2332
+ "toggled",
2333
+ "aria-label"
2333
2334
  ];
2334
2335
  }
2335
2336
  attributeChangedCallback(name, oldVal, newVal) {
2337
+ if (name === "aria-label") {
2338
+ if (newVal === null) {
2339
+ this.#syncButtonAccessibleName();
2340
+ return;
2341
+ }
2342
+ updateAttribute(this.#$sinchButton, name, newVal);
2343
+ this.removeAttribute(name);
2344
+ this.#syncButtonAccessibleName();
2345
+ return;
2346
+ }
2336
2347
  updateAttribute(this.#$sinchButton, name, newVal);
2348
+ if (name === "text") {
2349
+ this.#syncButtonAccessibleName();
2350
+ }
2337
2351
  }
2338
2352
  connectedCallback() {
2339
2353
  super.connectedCallback();
2340
2354
  this.#controller = new AbortController();
2341
2355
  const { signal } = this.#controller;
2342
- this.setAttribute("role", "button");
2356
+ this.removeAttribute("aria-label");
2357
+ this.#syncButtonAccessibleName();
2343
2358
  const forwardEvent = (e) => this.dispatchEvent(new CustomEvent(e.type, { ...e }));
2344
2359
  this.addEventListener("-click", (e) => this.#onClickReactHandler(e), { signal });
2345
2360
  this.addEventListener("-focus", () => this.#onFocusReactHandler(), { signal });
@@ -2378,6 +2393,15 @@ class ButtonGroupItem extends NectaryElement {
2378
2393
  #onBlurReactHandler = () => {
2379
2394
  getReactEventHandler(this, "on-blur")?.();
2380
2395
  };
2396
+ #syncButtonAccessibleName() {
2397
+ const ariaLabel = this.#$sinchButton.getAttribute("aria-label");
2398
+ const hasAccessibleName = ariaLabel !== null && ariaLabel.trim().length > 0;
2399
+ if (hasAccessibleName) {
2400
+ return;
2401
+ }
2402
+ const text = this.text.trim();
2403
+ updateAttribute(this.#$sinchButton, "aria-label", text.length > 0 ? text : null);
2404
+ }
2381
2405
  }
2382
2406
  defineCustomElement("sinch-button-group-item", ButtonGroupItem);
2383
2407
  const typeValues$4 = [
@@ -17318,6 +17342,7 @@ class TimePicker extends NectaryElement {
17318
17342
  this.#$pickerMinutes.appendChild(minutesFrag);
17319
17343
  }
17320
17344
  connectedCallback() {
17345
+ this.setAttribute("role", "group");
17321
17346
  this.#controller = new AbortController();
17322
17347
  const options = {
17323
17348
  signal: this.#controller.signal
package/button-group-item/index.d.ts CHANGED
@@ -5,7 +5,7 @@ export declare class ButtonGroupItem extends NectaryElement {
5
5
  #private;
6
6
  constructor();
7
7
  static get observedAttributes(): string[];
8
- attributeChangedCallback(name: (keyof NectaryComponentVanilla<'sinch-button'>), oldVal: string | null, newVal: string | null): void;
8
+ attributeChangedCallback(name: (keyof NectaryComponentVanilla<'sinch-button'>) | 'aria-label', oldVal: string | null, newVal: string | null): void;
9
9
  connectedCallback(): void;
10
10
  set text(value: string);
11
11
  get text(): string;
package/button-group-item/index.js CHANGED
@@ -21,17 +21,32 @@ class ButtonGroupItem extends NectaryElement {
21
21
  "size",
22
22
  "text",
23
23
  "disabled",
24
- "toggled"
24
+ "toggled",
25
+ "aria-label"
25
26
  ];
26
27
  }
27
28
  attributeChangedCallback(name, oldVal, newVal) {
29
+ if (name === "aria-label") {
30
+ if (newVal === null) {
31
+ this.#syncButtonAccessibleName();
32
+ return;
33
+ }
34
+ updateAttribute(this.#$sinchButton, name, newVal);
35
+ this.removeAttribute(name);
36
+ this.#syncButtonAccessibleName();
37
+ return;
38
+ }
28
39
  updateAttribute(this.#$sinchButton, name, newVal);
40
+ if (name === "text") {
41
+ this.#syncButtonAccessibleName();
42
+ }
29
43
  }
30
44
  connectedCallback() {
31
45
  super.connectedCallback();
32
46
  this.#controller = new AbortController();
33
47
  const { signal } = this.#controller;
34
- this.setAttribute("role", "button");
48
+ this.removeAttribute("aria-label");
49
+ this.#syncButtonAccessibleName();
35
50
  const forwardEvent = (e) => this.dispatchEvent(new CustomEvent(e.type, { ...e }));
36
51
  this.addEventListener("-click", (e) => this.#onClickReactHandler(e), { signal });
37
52
  this.addEventListener("-focus", () => this.#onFocusReactHandler(), { signal });
@@ -70,6 +85,15 @@ class ButtonGroupItem extends NectaryElement {
70
85
  #onBlurReactHandler = () => {
71
86
  getReactEventHandler(this, "on-blur")?.();
72
87
  };
88
+ #syncButtonAccessibleName() {
89
+ const ariaLabel = this.#$sinchButton.getAttribute("aria-label");
90
+ const hasAccessibleName = ariaLabel !== null && ariaLabel.trim().length > 0;
91
+ if (hasAccessibleName) {
92
+ return;
93
+ }
94
+ const text = this.text.trim();
95
+ updateAttribute(this.#$sinchButton, "aria-label", text.length > 0 ? text : null);
96
+ }
73
97
  }
74
98
  defineCustomElement("sinch-button-group-item", ButtonGroupItem);
75
99
  export {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nectary/components",
3
- "version": "5.44.0",
3
+ "version": "5.44.1",
4
4
  "files": [
5
5
  "**/*/*.css",
6
6
  "**/*/*.json",
package/time-picker/index.js CHANGED
@@ -109,6 +109,7 @@ class TimePicker extends NectaryElement {
109
109
  this.#$pickerMinutes.appendChild(minutesFrag);
110
110
  }
111
111
  connectedCallback() {
112
+ this.setAttribute("role", "group");
112
113
  this.#controller = new AbortController();
113
114
  const options = {
114
115
  signal: this.#controller.signal