Skip to content
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

Keyboard accessibility for automation-action-row (convert M2->M3) #24121

Open
wants to merge 1 commit into
base: dev
Choose a base branch
from
+100 −103
Open

Keyboard accessibility for automation-action-row (convert M2->M3) #24121

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
203 changes: 100 additions & 103 deletions src/panels/config/automation/action/ha-automation-action-row.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { consume } from "@lit-labs/context";
import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
import {
mdiAlertCircleCheck,
mdiArrowDown,
Expand Down Expand Up @@ -27,7 +26,9 @@ import { stopPropagation } from "../../../../common/dom/stop_propagation";
import { capitalizeFirstLetter } from "../../../../common/string/capitalize-first-letter";
import { handleStructError } from "../../../../common/structs/handle-errors";
import "../../../../components/ha-alert";
import "../../../../components/ha-button-menu";
import "../../../../components/ha-md-button-menu";
import "../../../../components/ha-md-menu-item";
import "../../../../components/ha-md-divider";
import "../../../../components/ha-card";
import "../../../../components/ha-expansion-panel";
import "../../../../components/ha-icon-button";
Expand Down Expand Up @@ -240,89 +241,104 @@ export default class HaAutomationActionRow extends LitElement {
</div> `
: nothing}
<ha-button-menu
<ha-md-button-menu
slot="icons"
@action=${this._handleAction}
@click=${preventDefault}
@keydown=${stopPropagation}
@closed=${stopPropagation}
fixed
positioning="fixed"
>
<ha-icon-button
slot="trigger"
.label=${this.hass.localize("ui.common.menu")}
.path=${mdiDotsVertical}
></ha-icon-button>
<ha-list-item graphic="icon">
<ha-md-menu-item .clickAction=${this._runAction}>
${this.hass.localize(
"ui.panel.config.automation.editor.actions.run"
)}
<ha-svg-icon slot="graphic" .path=${mdiPlay}></ha-svg-icon>
</ha-list-item>
<ha-svg-icon slot="start" .path=${mdiPlay}></ha-svg-icon>
</ha-md-menu-item>
<ha-list-item graphic="icon" .disabled=${this.disabled}>
<ha-md-menu-item
.clickAction=${this._renameAction}
.disabled=${this.disabled}
>
${this.hass.localize(
"ui.panel.config.automation.editor.actions.rename"
)}
<ha-svg-icon slot="graphic" .path=${mdiRenameBox}></ha-svg-icon>
</ha-list-item>
<ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
</ha-md-menu-item>
<li divider role="separator"></li>
<ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
<ha-list-item graphic="icon" .disabled=${this.disabled}>
<ha-md-menu-item
.clickAction=${this._duplicateAction}
.disabled=${this.disabled}
>
${this.hass.localize(
"ui.panel.config.automation.editor.actions.duplicate"
)}
<ha-svg-icon
slot="graphic"
slot="start"
.path=${mdiContentDuplicate}
></ha-svg-icon>
</ha-list-item>
</ha-md-menu-item>
<ha-list-item graphic="icon" .disabled=${this.disabled}>
<ha-md-menu-item
.clickAction=${this._copyAction}
.disabled=${this.disabled}
>
${this.hass.localize(
"ui.panel.config.automation.editor.triggers.copy"
)}
<ha-svg-icon slot="graphic" .path=${mdiContentCopy}></ha-svg-icon>
</ha-list-item>
<ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon>
</ha-md-menu-item>
<ha-list-item graphic="icon" .disabled=${this.disabled}>
<ha-md-menu-item
.clickAction=${this._cutAction}
.disabled=${this.disabled}
>
${this.hass.localize(
"ui.panel.config.automation.editor.triggers.cut"
)}
<ha-svg-icon slot="graphic" .path=${mdiContentCut}></ha-svg-icon>
</ha-list-item>
<ha-svg-icon slot="start" .path=${mdiContentCut}></ha-svg-icon>
</ha-md-menu-item>
<ha-list-item
graphic="icon"
<ha-md-menu-item
.clickAction=${this._moveUp}
.disabled=${this.disabled || this.first}
>
${this.hass.localize("ui.panel.config.automation.editor.move_up")}
<ha-svg-icon slot="graphic" .path=${mdiArrowUp}></ha-svg-icon
></ha-list-item>
<ha-svg-icon slot="start" .path=${mdiArrowUp}></ha-svg-icon
></ha-md-menu-item>
<ha-list-item
graphic="icon"
<ha-md-menu-item
.clickAction=${this._moveDown}
.disabled=${this.disabled || this.last}
>
${this.hass.localize(
"ui.panel.config.automation.editor.move_down"
)}
<ha-svg-icon slot="graphic" .path=${mdiArrowDown}></ha-svg-icon
></ha-list-item>
<ha-svg-icon slot="start" .path=${mdiArrowDown}></ha-svg-icon
></ha-md-menu-item>
<ha-list-item graphic="icon" .disabled=${!this._uiModeAvailable}>
<ha-md-menu-item
.clickAction=${this._toggleYamlMode}
.disabled=${!this._uiModeAvailable}
>
${this.hass.localize(
`ui.panel.config.automation.editor.edit_${!yamlMode ? "yaml" : "ui"}`
)}
<ha-svg-icon
slot="graphic"
.path=${mdiPlaylistEdit}
></ha-svg-icon>
</ha-list-item>
<ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon>
</ha-md-menu-item>
<li divider role="separator"></li>
<ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
<ha-list-item graphic="icon" .disabled=${this.disabled}>
<ha-md-menu-item
.clickAction=${this._onDisable}
.disabled=${this.disabled}
>
${this.action.enabled === false
? this.hass.localize(
"ui.panel.config.automation.editor.actions.enable"
Expand All @@ -331,27 +347,27 @@ export default class HaAutomationActionRow extends LitElement {
"ui.panel.config.automation.editor.actions.disable"
)}
<ha-svg-icon
slot="graphic"
slot="start"
.path=${this.action.enabled === false
? mdiPlayCircleOutline
: mdiStopCircleOutline}
></ha-svg-icon>
</ha-list-item>
<ha-list-item
</ha-md-menu-item>
<ha-md-menu-item
class="warning"
graphic="icon"
.clickAction=${this._onDelete}
.disabled=${this.disabled}
>
${this.hass.localize(
"ui.panel.config.automation.editor.actions.delete"
)}
<ha-svg-icon
class="warning"
slot="graphic"
slot="start"
.path=${mdiDelete}
></ha-svg-icon>
</ha-list-item>
</ha-button-menu>
</ha-md-menu-item>
</ha-md-button-menu>
<div
class=${classMap({
Expand Down Expand Up @@ -424,64 +440,23 @@ export default class HaAutomationActionRow extends LitElement {
}
}

private async _handleAction(ev: CustomEvent<ActionDetail>) {
switch (ev.detail.index) {
case 0:
this._runAction();
break;
case 1:
await this._renameAction();
break;
case 2:
fireEvent(this, "duplicate");
break;
case 3:
this._setClipboard();
break;
case 4:
this._setClipboard();
fireEvent(this, "value-changed", { value: null });
break;
case 5:
fireEvent(this, "move-up");
break;
case 6:
fireEvent(this, "move-down");
break;
case 7:
if (this._yamlMode) {
this._switchUiMode();
} else {
this._switchYamlMode();
}
this.expand();
break;
case 8:
this._onDisable();
break;
case 9:
this._onDelete();
break;
}
}

private _setClipboard() {
this._clipboard = {
...this._clipboard,
action: deepClone(this.action),
};
}

private _onDisable() {
private _onDisable = () => {
const enabled = !(this.action.enabled ?? true);
const value = { ...this.action, enabled };
fireEvent(this, "value-changed", { value });
if (this._yamlMode) {
this._yamlEditor?.setValue(value);
}
}
};

private async _runAction() {
private _runAction = async () => {
const validated = await validateConfig(this.hass, {
actions: this.action,
});
Expand Down Expand Up @@ -513,9 +488,9 @@ export default class HaAutomationActionRow extends LitElement {
"ui.panel.config.automation.editor.actions.run_action_success"
),
});
}
};

private _onDelete() {
private _onDelete = () => {
showConfirmationDialog(this, {
title: this.hass.localize(
"ui.panel.config.automation.editor.actions.delete_confirm_title"
Expand All @@ -530,7 +505,7 @@ export default class HaAutomationActionRow extends LitElement {
fireEvent(this, "value-changed", { value: null });
},
});
}
};

private _onYamlChange(ev: CustomEvent) {
ev.stopPropagation();
Expand Down Expand Up @@ -561,7 +536,7 @@ export default class HaAutomationActionRow extends LitElement {
this._yamlMode = true;
}

private async _renameAction(): Promise<void> {
private _renameAction = async (): Promise<void> => {
const alias = await showPromptDialog(this, {
title: this.hass.localize(
"ui.panel.config.automation.editor.actions.change_alias"
Expand Down Expand Up @@ -598,7 +573,37 @@ export default class HaAutomationActionRow extends LitElement {
this._yamlEditor?.setValue(value);
}
}
}
};

private _duplicateAction = () => {
fireEvent(this, "duplicate");
};

private _copyAction = () => {
this._setClipboard();
};

private _cutAction = () => {
this._setClipboard();
fireEvent(this, "value-changed", { value: null });
};

private _moveUp = () => {
fireEvent(this, "move-up");
};

private _moveDown = () => {
fireEvent(this, "move-down");
};

private _toggleYamlMode = () => {
if (this._yamlMode) {
this._switchUiMode();
} else {
this._switchYamlMode();
}
this.expand();
};

public expand() {
this.updateComplete.then(() => {
Expand All @@ -610,7 +615,6 @@ export default class HaAutomationActionRow extends LitElement {
return [
haStyle,
css`
ha-button-menu,
ha-icon-button {
--mdc-theme-text-primary-on-background: var(--primary-text-color);
}
Expand Down Expand Up @@ -649,18 +653,11 @@ export default class HaAutomationActionRow extends LitElement {
border-top-right-radius: var(--ha-card-border-radius, 12px);
border-top-left-radius: var(--ha-card-border-radius, 12px);
}
mwc-list-item[disabled] {
--mdc-theme-text-primary-on-background: var(--disabled-text-color);
}
mwc-list-item.hidden {
display: none;
}
.warning ul {
margin: 4px 0;
}
li[role="separator"] {
border-bottom-color: var(--divider-color);
ha-md-menu-item > ha-svg-icon {
--mdc-icon-size: 24px;
}
`,
];
Expand Down
Loading