@progress/kendo-angular-label 16.3.0-develop.5 → 16.3.0-develop.7

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 (8) hide show
  1. package/esm2020/floating-label/floating-label.component.mjs +11 -1
  2. package/esm2020/label.directive.mjs +7 -2
  3. package/esm2020/package-metadata.mjs +2 -2
  4. package/esm2020/util.mjs +4 -0
  5. package/fesm2015/progress-kendo-angular-label.mjs +22 -4
  6. package/fesm2020/progress-kendo-angular-label.mjs +22 -4
  7. package/package.json +4 -4
  8. package/util.d.ts +4 -0
package/esm2020/floating-label/floating-label.component.mjs CHANGED
@@ -9,6 +9,7 @@ import { guid, KendoInput, hasObservers, isDocumentAvailable } from '@progress/k
9
9
  import { validatePackage } from '@progress/kendo-licensing';
10
10
  import { packageMetadata } from '../package-metadata';
11
11
  import { FloatingLabelInputAdapter } from './floating-label-input-adapter';
12
+ import { nativeLabelForTargets } from '../util';
12
13
  import * as i0 from "@angular/core";
13
14
  import * as i1 from "@progress/kendo-angular-l10n";
14
15
  import * as i2 from "@angular/common";
@@ -157,7 +158,16 @@ export class FloatingLabelComponent {
157
158
  const componentId = component.focusableId || component.id;
158
159
  if (componentId) {
159
160
  const focusableElement = this.elementRef.nativeElement.querySelector(`#${componentId}`);
160
- this.renderer.setAttribute(focusableElement, 'aria-labelledby', this.labelId);
161
+ if (!focusableElement) {
162
+ return;
163
+ }
164
+ const existingAriaLabelledBy = focusableElement.hasAttribute('aria-labelledby') && focusableElement.getAttribute('aria-labelledby');
165
+ // DropDowns with focusable input elements rely on the aria-labelledby attribute to set the same attribute on their popup listbox element.
166
+ // On the other hand, the aria-labelledby attribute is redundant on the Input element when there is label[for] association -
167
+ // https://feedback.telerik.com/kendo-angular-ui/1648203-remove-aria-labelledby-when-native-html-elements-are-associated.
168
+ // This addresses both cases, setting a special data-kendo-label-id attribute to be used internally by other components when the aria-describedby one is not applicable.
169
+ this.renderer.setAttribute(focusableElement, nativeLabelForTargets.includes(focusableElement.tagName) ?
170
+ 'data-kendo-label-id' : 'aria-labelledby', existingAriaLabelledBy && existingAriaLabelledBy !== this.labelId ? `${existingAriaLabelledBy} ${this.labelId}` : this.labelId);
161
171
  }
162
172
  }
163
173
  setLabelFor(control) {
package/esm2020/label.directive.mjs CHANGED
@@ -2,7 +2,7 @@
2
2
  * Copyright © 2024 Progress Software Corporation. All rights reserved.
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
- import { getRootElement, inputElementHasAttr, isInputElement } from './util';
5
+ import { getRootElement, inputElementHasAttr, isInputElement, nativeLabelForTargets } from './util';
6
6
  import { Directive, Input, HostBinding, ElementRef, Renderer2, NgZone } from '@angular/core';
7
7
  import { isDocumentAvailable, guid } from '@progress/kendo-angular-common';
8
8
  import * as i0 from "@angular/core";
@@ -116,7 +116,12 @@ export class LabelDirective {
116
116
  if (!labelTarget) {
117
117
  return;
118
118
  }
119
- this.renderer.setAttribute(labelTarget, 'aria-labelledby', id);
119
+ const existingAriaLabelledBy = labelTarget.hasAttribute('aria-labelledby') && labelTarget.getAttribute('aria-labelledby');
120
+ // DropDowns with focusable input elements rely on the aria-labelledby attribute to set the same attribute on their popup listbox element
121
+ // On the other hand, the aria-labelledby attribute is redundant on the Input element when there is label[for] association -
122
+ // https://feedback.telerik.com/kendo-angular-ui/1648203-remove-aria-labelledby-when-native-html-elements-are-associated.
123
+ // This addresses both cases, setting a special data-kendo-label-id attribute to be used internally by other components when the aria-describedby one is not applicable.
124
+ this.renderer.setAttribute(labelTarget, nativeLabelForTargets.includes(labelTarget.tagName) ? 'data-kendo-label-id' : 'aria-labelledby', existingAriaLabelledBy && existingAriaLabelledBy !== id ? `${existingAriaLabelledBy} ${id}` : id);
120
125
  }
121
126
  }
122
127
  getFocusableComponent() {
package/esm2020/package-metadata.mjs CHANGED
@@ -9,7 +9,7 @@ export const packageMetadata = {
9
9
  name: '@progress/kendo-angular-label',
10
10
  productName: 'Kendo UI for Angular',
11
11
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
12
- publishDate: 1718196329,
13
- version: '16.3.0-develop.5',
12
+ publishDate: 1718209218,
13
+ version: '16.3.0-develop.7',
14
14
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
15
15
  };
package/esm2020/util.mjs CHANGED
@@ -27,3 +27,7 @@ export const getRootElement = (element) => {
27
27
  }
28
28
  return rootElement;
29
29
  };
30
+ /**
31
+ * @hidden
32
+ */
33
+ export const nativeLabelForTargets = ['BUTTON', 'INPUT', 'METER', 'OUTPUT', 'PROGRESS', 'SELECT', 'TEXTAREA']; // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
package/fesm2015/progress-kendo-angular-label.mjs CHANGED
@@ -38,6 +38,10 @@ const getRootElement = (element) => {
38
38
  }
39
39
  return rootElement;
40
40
  };
41
+ /**
42
+ * @hidden
43
+ */
44
+ const nativeLabelForTargets = ['BUTTON', 'INPUT', 'METER', 'OUTPUT', 'PROGRESS', 'SELECT', 'TEXTAREA']; // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
41
45
 
42
46
  /**
43
47
  * Represents the [Kendo UI Label directive for Angular]({% slug overview_label %}).
@@ -149,7 +153,12 @@ class LabelDirective {
149
153
  if (!labelTarget) {
150
154
  return;
151
155
  }
152
- this.renderer.setAttribute(labelTarget, 'aria-labelledby', id);
156
+ const existingAriaLabelledBy = labelTarget.hasAttribute('aria-labelledby') && labelTarget.getAttribute('aria-labelledby');
157
+ // DropDowns with focusable input elements rely on the aria-labelledby attribute to set the same attribute on their popup listbox element
158
+ // On the other hand, the aria-labelledby attribute is redundant on the Input element when there is label[for] association -
159
+ // https://feedback.telerik.com/kendo-angular-ui/1648203-remove-aria-labelledby-when-native-html-elements-are-associated.
160
+ // This addresses both cases, setting a special data-kendo-label-id attribute to be used internally by other components when the aria-describedby one is not applicable.
161
+ this.renderer.setAttribute(labelTarget, nativeLabelForTargets.includes(labelTarget.tagName) ? 'data-kendo-label-id' : 'aria-labelledby', existingAriaLabelledBy && existingAriaLabelledBy !== id ? `${existingAriaLabelledBy} ${id}` : id);
153
162
  }
154
163
  }
155
164
  getFocusableComponent() {
@@ -289,8 +298,8 @@ const packageMetadata = {
289
298
  name: '@progress/kendo-angular-label',
290
299
  productName: 'Kendo UI for Angular',
291
300
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
292
- publishDate: 1718196329,
293
- version: '16.3.0-develop.5',
301
+ publishDate: 1718209218,
302
+ version: '16.3.0-develop.7',
294
303
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
295
304
  };
296
305
 
@@ -485,7 +494,16 @@ class FloatingLabelComponent {
485
494
  const componentId = component.focusableId || component.id;
486
495
  if (componentId) {
487
496
  const focusableElement = this.elementRef.nativeElement.querySelector(`#${componentId}`);
488
- this.renderer.setAttribute(focusableElement, 'aria-labelledby', this.labelId);
497
+ if (!focusableElement) {
498
+ return;
499
+ }
500
+ const existingAriaLabelledBy = focusableElement.hasAttribute('aria-labelledby') && focusableElement.getAttribute('aria-labelledby');
501
+ // DropDowns with focusable input elements rely on the aria-labelledby attribute to set the same attribute on their popup listbox element.
502
+ // On the other hand, the aria-labelledby attribute is redundant on the Input element when there is label[for] association -
503
+ // https://feedback.telerik.com/kendo-angular-ui/1648203-remove-aria-labelledby-when-native-html-elements-are-associated.
504
+ // This addresses both cases, setting a special data-kendo-label-id attribute to be used internally by other components when the aria-describedby one is not applicable.
505
+ this.renderer.setAttribute(focusableElement, nativeLabelForTargets.includes(focusableElement.tagName) ?
506
+ 'data-kendo-label-id' : 'aria-labelledby', existingAriaLabelledBy && existingAriaLabelledBy !== this.labelId ? `${existingAriaLabelledBy} ${this.labelId}` : this.labelId);
489
507
  }
490
508
  }
491
509
  setLabelFor(control) {
package/fesm2020/progress-kendo-angular-label.mjs CHANGED
@@ -38,6 +38,10 @@ const getRootElement = (element) => {
38
38
  }
39
39
  return rootElement;
40
40
  };
41
+ /**
42
+ * @hidden
43
+ */
44
+ const nativeLabelForTargets = ['BUTTON', 'INPUT', 'METER', 'OUTPUT', 'PROGRESS', 'SELECT', 'TEXTAREA']; // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
41
45
 
42
46
  /**
43
47
  * Represents the [Kendo UI Label directive for Angular]({% slug overview_label %}).
@@ -149,7 +153,12 @@ class LabelDirective {
149
153
  if (!labelTarget) {
150
154
  return;
151
155
  }
152
- this.renderer.setAttribute(labelTarget, 'aria-labelledby', id);
156
+ const existingAriaLabelledBy = labelTarget.hasAttribute('aria-labelledby') && labelTarget.getAttribute('aria-labelledby');
157
+ // DropDowns with focusable input elements rely on the aria-labelledby attribute to set the same attribute on their popup listbox element
158
+ // On the other hand, the aria-labelledby attribute is redundant on the Input element when there is label[for] association -
159
+ // https://feedback.telerik.com/kendo-angular-ui/1648203-remove-aria-labelledby-when-native-html-elements-are-associated.
160
+ // This addresses both cases, setting a special data-kendo-label-id attribute to be used internally by other components when the aria-describedby one is not applicable.
161
+ this.renderer.setAttribute(labelTarget, nativeLabelForTargets.includes(labelTarget.tagName) ? 'data-kendo-label-id' : 'aria-labelledby', existingAriaLabelledBy && existingAriaLabelledBy !== id ? `${existingAriaLabelledBy} ${id}` : id);
153
162
  }
154
163
  }
155
164
  getFocusableComponent() {
@@ -289,8 +298,8 @@ const packageMetadata = {
289
298
  name: '@progress/kendo-angular-label',
290
299
  productName: 'Kendo UI for Angular',
291
300
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
292
- publishDate: 1718196329,
293
- version: '16.3.0-develop.5',
301
+ publishDate: 1718209218,
302
+ version: '16.3.0-develop.7',
294
303
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
295
304
  };
296
305
 
@@ -485,7 +494,16 @@ class FloatingLabelComponent {
485
494
  const componentId = component.focusableId || component.id;
486
495
  if (componentId) {
487
496
  const focusableElement = this.elementRef.nativeElement.querySelector(`#${componentId}`);
488
- this.renderer.setAttribute(focusableElement, 'aria-labelledby', this.labelId);
497
+ if (!focusableElement) {
498
+ return;
499
+ }
500
+ const existingAriaLabelledBy = focusableElement.hasAttribute('aria-labelledby') && focusableElement.getAttribute('aria-labelledby');
501
+ // DropDowns with focusable input elements rely on the aria-labelledby attribute to set the same attribute on their popup listbox element.
502
+ // On the other hand, the aria-labelledby attribute is redundant on the Input element when there is label[for] association -
503
+ // https://feedback.telerik.com/kendo-angular-ui/1648203-remove-aria-labelledby-when-native-html-elements-are-associated.
504
+ // This addresses both cases, setting a special data-kendo-label-id attribute to be used internally by other components when the aria-describedby one is not applicable.
505
+ this.renderer.setAttribute(focusableElement, nativeLabelForTargets.includes(focusableElement.tagName) ?
506
+ 'data-kendo-label-id' : 'aria-labelledby', existingAriaLabelledBy && existingAriaLabelledBy !== this.labelId ? `${existingAriaLabelledBy} ${this.labelId}` : this.labelId);
489
507
  }
490
508
  }
491
509
  setLabelFor(control) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@progress/kendo-angular-label",
3
- "version": "16.3.0-develop.5",
3
+ "version": "16.3.0-develop.7",
4
4
  "description": "Kendo UI Label for Angular",
5
5
  "license": "SEE LICENSE IN LICENSE.md",
6
6
  "author": "Progress",
@@ -24,13 +24,13 @@
24
24
  "@angular/forms": "15 - 18",
25
25
  "@angular/platform-browser": "15 - 18",
26
26
  "@progress/kendo-licensing": "^1.0.2",
27
- "@progress/kendo-angular-common": "16.3.0-develop.5",
28
- "@progress/kendo-angular-l10n": "16.3.0-develop.5",
27
+ "@progress/kendo-angular-common": "16.3.0-develop.7",
28
+ "@progress/kendo-angular-l10n": "16.3.0-develop.7",
29
29
  "rxjs": "^6.5.3 || ^7.0.0"
30
30
  },
31
31
  "dependencies": {
32
32
  "tslib": "^2.3.1",
33
- "@progress/kendo-angular-schematics": "16.3.0-develop.5"
33
+ "@progress/kendo-angular-schematics": "16.3.0-develop.7"
34
34
  },
35
35
  "schematics": "./schematics/collection.json",
36
36
  "module": "fesm2015/progress-kendo-angular-label.mjs",
package/util.d.ts CHANGED
@@ -18,3 +18,7 @@ export declare const getWrappedNativeInput: (element: HTMLElement) => HTMLElemen
18
18
  * @hidden
19
19
  */
20
20
  export declare const getRootElement: (element: HTMLElement) => HTMLElement;
21
+ /**
22
+ * @hidden
23
+ */
24
+ export declare const nativeLabelForTargets: string[];