Skip to content

Setting correct roles for lists with check/radio options #28684

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
uptimeZERO wants to merge 4 commits into
base: dev
Choose a base branch
from
Open

Setting correct roles for lists with check/radio options #28684

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6d6990a
wip applying aria state
uptimeZERO Dec 22, 2025
da6f350
Revert "wip applying aria state"
uptimeZERO Dec 23, 2025
6699271
wip applying aria state
uptimeZERO Dec 23, 2025
c92f390
setting default role
uptimeZERO Dec 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/data-table/dialog-data-table-settings.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ export class DialogDataTableSettings extends LitElement {
draggable-selector=".draggable"
handle-selector=".handle"
>
<ha-list>
<ha-list innerRole="menu" itemRoles="menuitemcheckbox">
${repeat(
columns,
(col) => col.key,
Expand Down
2 changes: 2 additions & 0 deletions src/components/ha-filter-blueprints.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,8 @@ export class HaFilterBlueprints extends LitElement {
? html`
<ha-list
@selected=${this._blueprintsSelected}
innerRole="menu"
itemRoles="menuitemcheckbox"
multi
class="ha-scrollbar"
>
Expand Down
2 changes: 2 additions & 0 deletions src/components/ha-filter-categories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,8 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
@selected=${this._categorySelected}
class="ha-scrollbar"
activatable
innerRole="menu"
itemRoles="menuitemcheckbox"
>
${this._categories.length > 0
? html`<ha-list-item
Expand Down
7 changes: 6 additions & 1 deletion src/components/ha-filter-devices.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,12 @@ export class HaFilterDevices extends LitElement {
@value-changed=${this._handleSearchChange}
>
</search-input-outlined>
<ha-list class="ha-scrollbar" multi>
<ha-list
class="ha-scrollbar"
multi
innerRole="menu"
itemRoles="menuitemcheckbox"
>
<lit-virtualizer
.items=${this._devices(
this.hass.devices,
Expand Down
2 changes: 2 additions & 0 deletions src/components/ha-filter-domains.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,8 @@ export class HaFilterDomains extends LitElement {
class="ha-scrollbar"
@click=${this._handleItemClick}
multi
innerRole="menu"
itemRoles="menuitemcheckbox"
>
${repeat(
this._domains(this.hass.states, this._filter),
Expand Down
7 changes: 6 additions & 1 deletion src/components/ha-filter-entities.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,12 @@ export class HaFilterEntities extends LitElement {
@value-changed=${this._handleSearchChange}
>
</search-input-outlined>
<ha-list class="ha-scrollbar" multi>
<ha-list
class="ha-scrollbar"
multi
innerRole="menu"
itemRoles="menuitemcheckbox"
>
<lit-virtualizer
.items=${this._entities(
this.hass.states,
Expand Down
6 changes: 5 additions & 1 deletion src/components/ha-filter-floor-areas.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,11 @@ export class HaFilterFloorAreas extends LitElement {
</div>
${this._shouldRender
? html`
<ha-list class="ha-scrollbar">
<ha-list
class="ha-scrollbar"
innerRole="menu"
itemRoles="menuitemcheckbox"
>
${repeat(
areas?.floors || [],
(floor) => floor.floor_id,
Expand Down
2 changes: 2 additions & 0 deletions src/components/ha-filter-integrations.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,8 @@ export class HaFilterIntegrations extends LitElement {
class="ha-scrollbar"
@click=${this._handleItemClick}
multi
innerRole="menu"
itemRoles="menuitemcheckbox"
>
${repeat(
this._integrations(
Expand Down
2 changes: 2 additions & 0 deletions src/components/ha-filter-labels.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,8 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
@selected=${this._labelSelected}
class="ha-scrollbar"
multi
innerRole="menu"
itemRoles="menuitemcheckbox"
>
${repeat(
this._filteredLabels(this._labels, this._filter, this.value),
Expand Down
2 changes: 2 additions & 0 deletions src/components/ha-filter-states.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,8 @@ export class HaFilterStates extends LitElement {
@selected=${this._statesSelected}
multi
class="ha-scrollbar"
innerRole="menu"
itemRoles="menuitemcheckbox"
>
${this.states.map(
(item) =>
Expand Down
6 changes: 6 additions & 0 deletions src/components/ha-list.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,12 @@ import { customElement } from "lit/decorators";
@customElement("ha-list")
export class HaList extends ListBase {
static styles = styles;

constructor() {
super();
if (this.innerRole == null) this.innerRole = "list";
if (this.itemRoles == null) this.itemRoles = "listitem";
}
Comment on lines +9 to +13
Copy link
Member

@bramkragten bramkragten Dec 24, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't set default values like this, but use:

  @property() public innerRole: string | null = "list";

Copy link
Member

@steverep steverep Dec 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This might be a good idea, but I view setting a default like this as dangerous and out of scope for just fixing menus with radios/checkboxes and remove it from this PR. There are just too many lists this would affect and impossible to test them all.

}

declare global {
Expand Down
7 changes: 6 additions & 1 deletion src/components/media-player/dialog-media-manage.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,12 @@ class DialogMediaManage extends LitElement {
: ""}
</div>`
: html`
<ha-list multi @selected=${this._handleSelected}>
<ha-list
multi
@selected=${this._handleSelected}
innerRole="menu"
itemRoles="menuitemcheckbox"
>
${repeat(
children,
(item) => item.media_content_id,
Expand Down
2 changes: 1 addition & 1 deletion src/panels/config/voice-assistants/dialog-expose-entity.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ class DialogExposeEntity extends LitElement {
@value-changed=${this._filterChanged}
></search-input>
</ha-dialog-header>
<ha-list multi>
<ha-list multi innerRole="menu" itemRoles="menuitemcheckbox">
Copy link
Member

@bramkragten bramkragten Dec 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did you test if this works? As the child of ha-list is lit-virtualizer my guess is that the items in the virtualizer are not targeted by this.

<lit-virtualizer
scroller
class="ha-scrollbar"
Expand Down
7 changes: 6 additions & 1 deletion src/panels/lovelace/cards/hui-todo-list-card.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -311,7 +311,12 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
.disabled=${!this._reordering}
@item-moved=${this._itemMoved}
>
<ha-list wrapFocus multi>
<ha-list
wrapFocus
multi
innerRole="menu"
itemRoles="menuitemcheckbox"
>
${!uncheckedItems.length && !itemsWithoutStatus.length
? html`<p class="empty">
${this.hass.localize(
Expand Down
2 changes: 1 addition & 1 deletion src/panels/lovelace/editor/conditions/types/ha-card-condition-user.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export class HaCardConditionUser extends LitElement {
const selectedUsers = this.condition.users ?? [];

return html`
<ha-list>
<ha-list innerRole="menu" itemRoles="menuitemcheckbox">
${this._sortedUsers(this._users).map(
(user) => html`
<ha-check-list-item
Expand Down
6 changes: 5 additions & 1 deletion src/panels/lovelace/editor/select-view/hui-dialog-select-view.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,11 @@ export class HuiDialogSelectView extends LitElement {
>`
: this._config.views.length > 1
? html`
<ha-list dialogInitialFocus>
<ha-list
dialogInitialFocus
innerRole="menu"
itemRoles="menuitemradio"
>
${this._config.views.map((view, idx) => {
const isStrategy = isStrategyView(view);

Expand Down
9 changes: 8 additions & 1 deletion src/panels/todo/ha-panel-todo.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -216,7 +216,14 @@ class PanelTodo extends LitElement {
</ha-button-menu>`
: this.hass.localize("panel.todo")}
</div>
<ha-list slot="pane" activatable>${listItems}</ha-list>
<ha-list
slot="pane"
activatable
innerRole="menu"
itemRoles="menuitemradio"
>
${listItems}
</ha-list>
${showPane && this.hass.user?.is_admin
? html`<ha-list-item
graphic="icon"
Expand Down