chore: reapply dropdowns new spec

dtopalov · dtopalov · commit 345a92ca9f02 · 2026-01-30T20:55:15.000+02:00
diff --git a/aria/autocomplete_aria.md b/aria/autocomplete_aria.md
@@ -33,6 +33,7 @@ The popup element of the AutoComplete has to implement the WAI-ARIA specificatio
 | `.k-autocomplete-popup-container` | `role=region` | When the component container is appended to the `<body>` element of the document, it requires you to assing a `landmark` role to it. Otherwise, append it to an element with an appropriate `landmark` role. |
 |  | `aria-label` or `aria-labelledby` | When the container has a `region` role assigned, povides a label. |
 | `.k-list .k-no-data` | `aria-live=polite` | Identifies the element as a live region in the `polite` state, meaning assistive technology users are informed about changes to the region at the next available opportunity. |
+| `.k-list-item-icon` | `aria-hidden=true` | Ensures that the icon itself is hidden from assistive technologies since it is decorative. |
 | `.k-list-content[role="listbox"]` | `role=listbox` | For grouped lists, the wrapper must have `role=listbox`. For ungrouped lists, the UL element has this role instead. |
 |  | `aria-label` or `aria-labelledby` | Provides a label for grouped listboxes. |
 | `.k-list-ul[role="listbox"]` | `role=listbox` | For ungrouped lists, the `ul` element has `role=listbox` with appropriate aria-label/labelledby. |
@@ -41,7 +42,7 @@ The popup element of the AutoComplete has to implement the WAI-ARIA specificatio
 |  | `id` | List items should have an `id` attribute for `aria-activedescendant` navigation. |
 | `.k-list-item:not(.k-focus)` | `tabindex=-1` | Only the focused option should have `tabindex=0`, all others should be `-1`. |
 | `.k-list-item.k-selected` | `aria-selected=true` | Indicates the selected state of the item. |
-| `.k-list-header` | `role=presentation` | For grouped lists, the group header element should have `role=presentation`. |
+| `.k-list-group-item` | `role=presentation` | For grouped lists, the group header element should have `role=presentation`. |
 |  | `id` | The group header must have an id that the corresponding `ul` element references via `aria-labelledby`. |
 
 ### Adaptive Mode
diff --git a/aria/combobox_aria.md b/aria/combobox_aria.md
@@ -37,6 +37,7 @@ The popup element of the ComboBox has to implement the WAI-ARIA specification fo
 | `.k-combobox-popup-container` | `role=region` | When the component container is appended to the `<body>` element of the document, it requires you to assing a `landmark` role to it. Otherwise, append it to an element with an appropriate `landmark` role. |
 |  | `aria-label` or `aria-labelledby` | When the container has a `region` role assigned, povides a label. |
 | `.k-list .k-no-data` | `aria-live=polite` | Identifies the element as a live region in the `polite` state, meaning assistive technology users are informed about changes to the region at the next available opportunity. |
+| `.k-list-item-icon` | `aria-hidden=true` | Ensures that the icon itself is hidden from assistive technologies since it is decorative. |
 | `.k-list-content[role="listbox"]` | `role=listbox` | For grouped lists, the wrapper must have `role=listbox`. For ungrouped lists, the UL element has this role instead. |
 |  | `aria-label` or `aria-labelledby` | Provides a label for grouped listboxes. |
 | `.k-list-ul[role="listbox"]` | `role=listbox` | For ungrouped lists, the `ul` element has `role=listbox` with appropriate aria-label/labelledby. |
@@ -45,7 +46,7 @@ The popup element of the ComboBox has to implement the WAI-ARIA specification fo
 |  | `id` | List items should have an `id` attribute for `aria-activedescendant` navigation. |
 | `.k-list-item:not(.k-focus)` | `tabindex=-1` | Only the focused option should have `tabindex=0`, all others should be `-1`. |
 | `.k-list-item.k-selected` | `aria-selected=true` | Indicates the selected state of the item. |
-| `.k-list-header` | `role=presentation` | For grouped lists, the group header element should have `role=presentation`. |
+| `.k-list-group-item` | `role=presentation` | For grouped lists, the group header element should have `role=presentation`. |
 |  | `id` | The group header must have an id that the corresponding `ul` element references via `aria-labelledby`. |
 
 ### Adaptive Mode
diff --git a/aria/dropdownlist_aria.md b/aria/dropdownlist_aria.md
@@ -51,6 +51,7 @@ The listbox placed in the popup element of the DropDownList has to implement the
 | `.k-dropdownlist-popup-container` | `role=region` | When the component container is appended to the `<body>` element of the document, it requires you to assing a `landmark` role to it. Otherwise, append it to an element with an appropriate `landmark` role. |
 |  | `aria-label` or `aria-labelledby` | When the container has a `region` role assigned, povides a label. |
 | `.k-list .k-no-data` | `aria-live=polite` | Identifies the element as a live region in the `polite` state, meaning assistive technology users are informed about changes to the region at the next available opportunity. |
+| `.k-list-item-icon` | `aria-hidden=true` | Ensures that the icon itself is hidden from assistive technologies since it is decorative. |
 | `.k-list-content[role="listbox"]` | `role=listbox` | For grouped lists, the wrapper must have `role=listbox`. For ungrouped lists, the UL element has this role instead. |
 |  | `aria-label` or `aria-labelledby` | Provides a label for grouped listboxes. |
 | `.k-list-ul[role="listbox"]` | `role=listbox` | For ungrouped lists, the `ul` element has `role=listbox` with appropriate aria-label/labelledby. |
@@ -59,7 +60,7 @@ The listbox placed in the popup element of the DropDownList has to implement the
 |  | `id` | List items should have an `id` attribute for `aria-activedescendant` navigation. |
 | `.k-list-item:not(.k-focus)` | `tabindex=-1` | Only the focused option should have `tabindex=0`, all others should be `-1`. |
 | `.k-list-item.k-selected` | `aria-selected=true` | Indicates the selected state of the item. |
-| `.k-list-header` | `role=presentation` | For grouped lists, the group header element should have `role=presentation`. |
+| `.k-list-group-item` | `role=presentation` | For grouped lists, the group header element should have `role=presentation`. |
 |  | `id` | The group header must have an id that the corresponding `ul` element references via `aria-labelledby`. |
 
 ### Adaptive Mode
diff --git a/aria/multiselect_aria.md b/aria/multiselect_aria.md
@@ -37,6 +37,7 @@ The popup element of the MultiSelect must implement the WAI-ARIA specification f
 | `.k-multiselect-popup-container` | `role=region` | When the component container is appended to the `<body>` element of the document, it requires you to assing a `landmark` role to it. Otherwise, append it to an element with an appropriate `landmark` role. |
 |  | `aria-label` or `aria-labelledby` | When the container has a `region` role assigned, povides a label. |
 | `.k-list .k-no-data` | `aria-live=polite` | Identifies the element as a live region in the `polite` state, meaning assistive technology users are informed about changes to the region at the next available opportunity. |
+| `.k-list-item-icon` | `aria-hidden=true` | Ensures that the icon itself is hidden from assistive technologies since it is decorative. |
 | `.k-list-content[role="listbox"]` | `role=listbox` | For grouped lists, the wrapper must have `role=listbox`. For ungrouped lists, the UL element has this role instead. |
 |  | `aria-label` or `aria-labelledby` | Provides a label for grouped listboxes. |
 |  | `aria-multiselectable=true` | Announces multiselection capability of the listbox popup. |
@@ -47,7 +48,7 @@ The popup element of the MultiSelect must implement the WAI-ARIA specification f
 |  | `id` | List items should have an `id` attribute for `aria-activedescendant` navigation. |
 | `.k-list-item:not(.k-focus)` | `tabindex=-1` | Only the focused option should have `tabindex=0`, all others should be `-1`. |
 | `.k-list-item.k-selected` | `aria-selected=true` | Indicates the selected state of the item. |
-| `.k-list-header` | `role=presentation` | For grouped lists, the group header element should have `role=presentation`. |
+| `.k-list-group-item` | `role=presentation` | For grouped lists, the group header element should have `role=presentation`. |
 |  | `id` | The group header must have an id that the corresponding `ul` element references via `aria-labelledby`. |
 
 ### Adaptive Mode
diff --git a/packages/html/src/list/list-item.spec.tsx b/packages/html/src/list/list-item.spec.tsx
@@ -78,7 +78,7 @@ export const ListItem: KendoComponent<KendoListItemProps & KendoListItemState &
             {...(tabIndex !== undefined && { tabIndex })}
         >
             {showCheckbox && <Checkbox checked={checked} />}
-            {iconName && <span className="k-list-item-icon-wrapper"><Icon icon={iconName} className={classNames("k-list-item-icon", iconClassName)} /></span>}
+            {iconName && <span className="k-list-item-icon-wrapper"><Icon icon={iconName} className={classNames("k-list-item-icon", iconClassName)} aria-hidden="true" /></span>}
             <span className="k-list-item-text">{textOrChildren}</span>
             {actions && <div className="k-list-item-actions">{actions}</div>}
             {description && <span className="k-list-item-description">{description}</span>}
diff --git a/tests/_output/wcag-compliance-report.json b/tests/_output/wcag-compliance-report.json

Original file line number	Diff line number	Diff line change
`@@ -78,7 +78,7 @@ export const ListItem: KendoComponent<KendoListItemProps & KendoListItemState &`
`78`	`78`	`{...(tabIndex !== undefined && { tabIndex })}`
`79`	`79`	`>`
`80`	`80`	`{showCheckbox && <Checkbox checked={checked} />}`
`81`		`- {iconName && <span className="k-list-item-icon-wrapper"><Icon icon={iconName} className={classNames("k-list-item-icon", iconClassName)} /></span>}`
	`81`	`+ {iconName && <span className="k-list-item-icon-wrapper"><Icon icon={iconName} className={classNames("k-list-item-icon", iconClassName)} aria-hidden="true" /></span>}`
`82`	`82`	`<span className="k-list-item-text">{textOrChildren}</span>`
`83`	`83`	`{actions && <div className="k-list-item-actions">{actions}</div>}`
`84`	`84`	`{description && <span className="k-list-item-description">{description}</span>}`