Improve keyboard nav (#8794)
This commit is contained in:
parent
c11bbcf442
commit
334196799a
|
@ -541,17 +541,20 @@ export class HaAutomationTracer extends LitElement {
|
||||||
this.shadowRoot!.querySelectorAll<HaTimeline>(
|
this.shadowRoot!.querySelectorAll<HaTimeline>(
|
||||||
"ha-timeline[data-path]"
|
"ha-timeline[data-path]"
|
||||||
).forEach((el) => {
|
).forEach((el) => {
|
||||||
el.style.setProperty(
|
el.toggleAttribute("selected", this.selectedPath === el.dataset.path);
|
||||||
"--timeline-ball-color",
|
if (!this.allowPick || el.tabIndex === 0) {
|
||||||
this.selectedPath === el.dataset.path ? "var(--primary-color)" : null
|
|
||||||
);
|
|
||||||
if (!this.allowPick || el.dataset.upgraded) {
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
el.dataset.upgraded = "1";
|
el.tabIndex = 0;
|
||||||
el.addEventListener("click", () => {
|
const selectEl = () => {
|
||||||
this.selectedPath = el.dataset.path;
|
this.selectedPath = el.dataset.path;
|
||||||
fireEvent(this, "value-changed", { value: el.dataset.path });
|
fireEvent(this, "value-changed", { value: el.dataset.path });
|
||||||
|
};
|
||||||
|
el.addEventListener("click", selectEl);
|
||||||
|
el.addEventListener("keydown", (ev: KeyboardEvent) => {
|
||||||
|
if (ev.key === "Enter" || ev.key === " ") {
|
||||||
|
selectEl();
|
||||||
|
}
|
||||||
});
|
});
|
||||||
el.addEventListener("mouseover", () => {
|
el.addEventListener("mouseover", () => {
|
||||||
el.raised = true;
|
el.raised = true;
|
||||||
|
@ -572,6 +575,13 @@ export class HaAutomationTracer extends LitElement {
|
||||||
ha-timeline[data-path] {
|
ha-timeline[data-path] {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
ha-timeline[selected] {
|
||||||
|
--timeline-ball-color: var(--primary-color);
|
||||||
|
}
|
||||||
|
ha-timeline:focus {
|
||||||
|
outline: none;
|
||||||
|
--timeline-ball-color: var(--accent-color);
|
||||||
|
}
|
||||||
.error {
|
.error {
|
||||||
--timeline-ball-color: var(--error-color);
|
--timeline-ball-color: var(--error-color);
|
||||||
color: var(--error-color);
|
color: var(--error-color);
|
||||||
|
|
|
@ -57,13 +57,13 @@ export class HaAutomationTracePathDetails extends LitElement {
|
||||||
["logbook", "Related logbook entries"],
|
["logbook", "Related logbook entries"],
|
||||||
].map(
|
].map(
|
||||||
([view, label]) => html`
|
([view, label]) => html`
|
||||||
<div
|
<button
|
||||||
.view=${view}
|
.view=${view}
|
||||||
class=${classMap({ active: this._view === view })}
|
class=${classMap({ active: this._view === view })}
|
||||||
@click=${this._showTab}
|
@click=${this._showTab}
|
||||||
>
|
>
|
||||||
${label}
|
${label}
|
||||||
</div>
|
</button>
|
||||||
`
|
`
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -122,7 +122,7 @@ export class HaAutomationTrace extends LitElement {
|
||||||
class="linkButton"
|
class="linkButton"
|
||||||
href="/config/automation/edit/${this.automationId}"
|
href="/config/automation/edit/${this.automationId}"
|
||||||
>
|
>
|
||||||
<mwc-icon-button label="Edit Automation">
|
<mwc-icon-button label="Edit Automation" tabindex="-1">
|
||||||
<ha-svg-icon .path=${mdiPencil}></ha-svg-icon>
|
<ha-svg-icon .path=${mdiPencil}></ha-svg-icon>
|
||||||
</mwc-icon-button>
|
</mwc-icon-button>
|
||||||
</a>
|
</a>
|
||||||
|
@ -190,18 +190,20 @@ export class HaAutomationTrace extends LitElement {
|
||||||
["config", "Automation Config"],
|
["config", "Automation Config"],
|
||||||
].map(
|
].map(
|
||||||
([view, label]) => html`
|
([view, label]) => html`
|
||||||
<div
|
<button
|
||||||
|
tabindex="0"
|
||||||
.view=${view}
|
.view=${view}
|
||||||
class=${classMap({ active: this._view === view })}
|
class=${classMap({ active: this._view === view })}
|
||||||
@click=${this._showTab}
|
@click=${this._showTab}
|
||||||
>
|
>
|
||||||
${label}
|
${label}
|
||||||
</div>
|
</button>
|
||||||
`
|
`
|
||||||
)}
|
)}
|
||||||
${this._trace.blueprint_inputs
|
${this._trace.blueprint_inputs
|
||||||
? html`
|
? html`
|
||||||
<div
|
<button
|
||||||
|
tabindex="0"
|
||||||
.view=${"blueprint"}
|
.view=${"blueprint"}
|
||||||
class=${classMap({
|
class=${classMap({
|
||||||
active: this._view === "blueprint",
|
active: this._view === "blueprint",
|
||||||
|
|
|
@ -18,8 +18,10 @@ export const traceTabStyles = css`
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
position: relative;
|
position: relative;
|
||||||
bottom: -1px;
|
bottom: -1px;
|
||||||
|
border: none;
|
||||||
border-bottom: 2px solid transparent;
|
border-bottom: 2px solid transparent;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
background: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabs > *.active {
|
.tabs > *.active {
|
||||||
|
|
Loading…
Reference in New Issue