diff --git a/src/components/buttons/ha-call-service-button.js b/src/components/buttons/ha-call-service-button.js index 6c2d6ad9f3..cd229a772f 100644 --- a/src/components/buttons/ha-call-service-button.js +++ b/src/components/buttons/ha-call-service-button.js @@ -15,6 +15,7 @@ class HaCallServiceButton extends EventsMixin(PolymerElement) { id="progress" progress="[[progress]]" on-click="buttonTapped" + tabindex="0" > `; diff --git a/src/panels/lovelace/badges/hui-state-label-badge.ts b/src/panels/lovelace/badges/hui-state-label-badge.ts index 5b0dcb5237..80d4a2a4df 100644 --- a/src/panels/lovelace/badges/hui-state-label-badge.ts +++ b/src/panels/lovelace/badges/hui-state-label-badge.ts @@ -4,6 +4,8 @@ import { TemplateResult, customElement, property, + CSSResult, + css, } from "lit-element"; import "../../../components/entity/ha-state-label-badge"; @@ -45,6 +47,7 @@ export class HuiStateLabelBadge extends LitElement implements LovelaceBadge { hasHold: hasAction(this._config!.hold_action), hasDoubleClick: hasAction(this._config!.double_tap_action), })} + tabindex="0" > `; } @@ -52,6 +55,21 @@ export class HuiStateLabelBadge extends LitElement implements LovelaceBadge { private _handleAction(ev: ActionHandlerEvent) { handleAction(this, this.hass!, this._config!, ev.detail.action!); } + + static get styles(): CSSResult { + return css` + ha-state-label-badge:focus { + outline: none; + background: var(--divider-color); + border-radius: 4px; + } + ha-state-label-badge { + display: inline-block; + padding: 4px; + margin: -4px 0 -4px 0; + } + `; + } } declare global { diff --git a/src/panels/lovelace/cards/hui-entity-button-card.ts b/src/panels/lovelace/cards/hui-entity-button-card.ts index f5c8cacbf7..5004285958 100644 --- a/src/panels/lovelace/cards/hui-entity-button-card.ts +++ b/src/panels/lovelace/cards/hui-entity-button-card.ts @@ -134,6 +134,7 @@ class HuiEntityButtonCard extends LitElement implements LovelaceCard { hasHold: hasAction(this._config!.hold_action), hasDoubleClick: hasAction(this._config!.double_tap_action), })} + tabindex="0" > ${this._config.show_icon ? html` @@ -195,6 +196,11 @@ class HuiEntityButtonCard extends LitElement implements LovelaceCard { font-size: 1.2rem; } + ha-card:focus { + outline: none; + background: var(--divider-color); + } + ha-icon { width: 40%; height: auto; diff --git a/src/panels/lovelace/cards/hui-gauge-card.ts b/src/panels/lovelace/cards/hui-gauge-card.ts index 4128c29811..f5dfc42b17 100644 --- a/src/panels/lovelace/cards/hui-gauge-card.ts +++ b/src/panels/lovelace/cards/hui-gauge-card.ts @@ -104,6 +104,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard { return html` ${this._config!.show_name !== false ? html` diff --git a/src/panels/lovelace/cards/hui-light-card.ts b/src/panels/lovelace/cards/hui-light-card.ts index c3a31e0c26..10d19495bd 100644 --- a/src/panels/lovelace/cards/hui-light-card.ts +++ b/src/panels/lovelace/cards/hui-light-card.ts @@ -94,7 +94,8 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
@@ -121,6 +122,7 @@ export class HuiLightCard extends LitElement implements LovelaceCard { color: this._computeColor(stateObj), })} @click=${this._handleClick} + tabindex="0" >
diff --git a/src/panels/lovelace/cards/hui-map-card.ts b/src/panels/lovelace/cards/hui-map-card.ts index 9d1d84a6cd..6883cf9661 100644 --- a/src/panels/lovelace/cards/hui-map-card.ts +++ b/src/panels/lovelace/cards/hui-map-card.ts @@ -147,6 +147,7 @@ class HuiMapCard extends LitElement implements LovelaceCard { > diff --git a/src/panels/lovelace/cards/hui-picture-card.ts b/src/panels/lovelace/cards/hui-picture-card.ts index 2d14a5ee44..c649deef2c 100644 --- a/src/panels/lovelace/cards/hui-picture-card.ts +++ b/src/panels/lovelace/cards/hui-picture-card.ts @@ -86,6 +86,7 @@ export class HuiPictureCard extends LitElement implements LovelaceCard { hasHold: hasAction(this._config!.hold_action), hasDoubleClick: hasAction(this._config!.double_tap_action), })} + tabindex="0" class="${classMap({ clickable: Boolean( this._config.tap_action || this._config.hold_action diff --git a/src/panels/lovelace/cards/hui-picture-entity-card.ts b/src/panels/lovelace/cards/hui-picture-entity-card.ts index 5e5d0da73c..dc64553169 100644 --- a/src/panels/lovelace/cards/hui-picture-entity-card.ts +++ b/src/panels/lovelace/cards/hui-picture-entity-card.ts @@ -156,6 +156,7 @@ class HuiPictureEntityCard extends LitElement implements LovelaceCard { hasHold: hasAction(this._config!.hold_action), hasDoubleClick: hasAction(this._config!.double_tap_action), })} + tabindex="0" class=${classMap({ clickable: stateObj.state !== UNAVAILABLE, })} diff --git a/src/panels/lovelace/cards/hui-picture-glance-card.ts b/src/panels/lovelace/cards/hui-picture-glance-card.ts index 06f4b4c95e..0a4802b8fa 100644 --- a/src/panels/lovelace/cards/hui-picture-glance-card.ts +++ b/src/panels/lovelace/cards/hui-picture-glance-card.ts @@ -168,6 +168,7 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard { hasHold: hasAction(this._config!.hold_action), hasDoubleClick: hasAction(this._config!.double_tap_action), })} + tabindex="0" .config=${this._config} .hass=${this.hass} .image=${this._config.image} @@ -230,6 +231,7 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard { hasHold: hasAction(entityConf.hold_action), hasDoubleClick: hasAction(entityConf.double_tap_action), })} + tabindex="0" .config=${entityConf} class="${classMap({ "state-on": !STATES_OFF.has(stateObj.state), @@ -318,6 +320,11 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard { padding-bottom: 4px; padding-top: 4px; } + ha-icon:focus { + outline: none; + background: var(--divider-color); + border-radius: 100%; + } .state { display: block; font-size: 12px; diff --git a/src/panels/lovelace/cards/hui-plant-status-card.ts b/src/panels/lovelace/cards/hui-plant-status-card.ts index f5ab3bc518..3f8ee2ef40 100644 --- a/src/panels/lovelace/cards/hui-plant-status-card.ts +++ b/src/panels/lovelace/cards/hui-plant-status-card.ts @@ -21,6 +21,7 @@ import { fireEvent } from "../../../common/dom/fire_event"; import { hasConfigOrEntityChanged } from "../common/has-changed"; import { PlantStatusCardConfig, PlantAttributeTarget } from "./types"; import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element"; +import { actionHandler } from "../common/directives/action-handler-directive"; const SENSORS = { moisture: "hass:water", @@ -119,7 +120,9 @@ class HuiPlantStatusCard extends LitElement implements LovelaceCard { (item) => html`
@@ -206,6 +209,12 @@ class HuiPlantStatusCard extends LitElement implements LovelaceCard { cursor: pointer; } + .attributes:focus { + outline: none; + background: var(--divider-color); + border-radius: 100%; + } + .attributes div { text-align: center; } diff --git a/src/panels/lovelace/cards/hui-sensor-card.ts b/src/panels/lovelace/cards/hui-sensor-card.ts index fba2426744..1e5dde8e4e 100644 --- a/src/panels/lovelace/cards/hui-sensor-card.ts +++ b/src/panels/lovelace/cards/hui-sensor-card.ts @@ -25,6 +25,7 @@ import { fireEvent } from "../../../common/dom/fire_event"; import { fetchRecent } from "../../../data/history"; import { SensorCardConfig } from "./types"; import { hasConfigOrEntityChanged } from "../common/has-changed"; +import { actionHandler } from "../common/directives/action-handler-directive"; const midPoint = ( _Ax: number, @@ -241,7 +242,11 @@ class HuiSensorCard extends LitElement implements LovelaceCard { graph = ""; } return html` - +
@@ -364,9 +366,10 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard { class="${classMap({ "selected-icon": currentMode === mode })}" .mode="${mode}" .icon="${modeIcons[mode]}" - @click="${this._handleModeClick}" + @action=${this._handleAction} + .actionHandler=${actionHandler()} tabindex="0" - > + > `; } @@ -376,7 +379,7 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard { }); } - private _handleModeClick(e: MouseEvent): void { + private _handleAction(e: MouseEvent): void { this.hass!.callService("climate", "set_hvac_mode", { entity_id: this._config!.entity, hvac_mode: (e.currentTarget as any).mode, diff --git a/src/panels/lovelace/cards/hui-weather-forecast-card.ts b/src/panels/lovelace/cards/hui-weather-forecast-card.ts index db12787ed1..f6b6cf8c83 100644 --- a/src/panels/lovelace/cards/hui-weather-forecast-card.ts +++ b/src/panels/lovelace/cards/hui-weather-forecast-card.ts @@ -23,6 +23,7 @@ import { computeRTL } from "../../../common/util/compute_rtl"; import { fireEvent } from "../../../common/dom/fire_event"; import { toggleAttribute } from "../../../common/dom/toggle_attribute"; import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element"; +import { actionHandler } from "../common/directives/action-handler-directive"; const cardinalDirections = [ "N", @@ -141,7 +142,11 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard { : undefined; return html` - +
${this.hass.localize(`state.weather.${stateObj.state}`) || stateObj.state} @@ -274,7 +279,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard { return hasConfigOrEntityChanged(this, changedProps); } - private handleClick(): void { + private _handleAction(): void { fireEvent(this, "hass-more-info", { entityId: this._config!.entity }); } diff --git a/src/panels/lovelace/components/hui-generic-entity-row.ts b/src/panels/lovelace/components/hui-generic-entity-row.ts index ac5c3c8a5f..944d1c2f1c 100644 --- a/src/panels/lovelace/components/hui-generic-entity-row.ts +++ b/src/panels/lovelace/components/hui-generic-entity-row.ts @@ -171,6 +171,11 @@ class HuiGenericEntityRow extends LitElement { state-badge { flex: 0 0 40px; } + state-badge:focus { + outline: none; + background: var(--divider-color); + border-radius: 100%; + } :host([rtl]) .flex { margin-left: 0; margin-right: 16px; diff --git a/src/panels/lovelace/elements/hui-icon-element.ts b/src/panels/lovelace/elements/hui-icon-element.ts index 1e0c9cda77..1ffacc813d 100644 --- a/src/panels/lovelace/elements/hui-icon-element.ts +++ b/src/panels/lovelace/elements/hui-icon-element.ts @@ -45,6 +45,7 @@ export class HuiIconElement extends LitElement implements LovelaceElement { hasHold: hasAction(this._config!.hold_action), hasDoubleClick: hasAction(this._config!.double_tap_action), })} + tabindex="0" > `; } @@ -58,6 +59,11 @@ export class HuiIconElement extends LitElement implements LovelaceElement { :host { cursor: pointer; } + ha-icon:focus { + outline: none; + background: var(--divider-color); + border-radius: 100%; + } `; } } diff --git a/src/panels/lovelace/elements/hui-image-element.ts b/src/panels/lovelace/elements/hui-image-element.ts index 60bc40477f..27fc1547db 100644 --- a/src/panels/lovelace/elements/hui-image-element.ts +++ b/src/panels/lovelace/elements/hui-image-element.ts @@ -56,6 +56,7 @@ export class HuiImageElement extends LitElement implements LovelaceElement { hasHold: hasAction(this._config!.hold_action), hasDoubleClick: hasAction(this._config!.double_tap_action), })} + tabindex="0" > `; } @@ -70,6 +71,11 @@ export class HuiImageElement extends LitElement implements LovelaceElement { hui-image { -webkit-user-select: none !important; } + hui-image:focus { + outline: none; + background: var(--divider-color); + border-radius: 100%; + } `; } diff --git a/src/panels/lovelace/elements/hui-state-badge-element.ts b/src/panels/lovelace/elements/hui-state-badge-element.ts index 8b49240d9f..63577010ce 100644 --- a/src/panels/lovelace/elements/hui-state-badge-element.ts +++ b/src/panels/lovelace/elements/hui-state-badge-element.ts @@ -70,6 +70,7 @@ export class HuiStateBadgeElement extends LitElement hasHold: hasAction(this._config!.hold_action), hasDoubleClick: hasAction(this._config!.double_tap_action), })} + tabindex="0" > `; } diff --git a/src/panels/lovelace/elements/hui-state-icon-element.ts b/src/panels/lovelace/elements/hui-state-icon-element.ts index b26194e61c..3d285d41c1 100644 --- a/src/panels/lovelace/elements/hui-state-icon-element.ts +++ b/src/panels/lovelace/elements/hui-state-icon-element.ts @@ -66,6 +66,7 @@ export class HuiStateIconElement extends LitElement implements LovelaceElement { hasHold: hasAction(this._config!.hold_action), hasDoubleClick: hasAction(this._config!.double_tap_action), })} + tabindex="0" .overrideIcon=${this._config.icon} > `; @@ -76,6 +77,11 @@ export class HuiStateIconElement extends LitElement implements LovelaceElement { :host { cursor: pointer; } + state-badge:focus { + outline: none; + background: var(--divider-color); + border-radius: 100%; + } `; } diff --git a/src/panels/lovelace/elements/hui-state-label-element.ts b/src/panels/lovelace/elements/hui-state-label-element.ts index 81b67a2010..7fafb563fd 100644 --- a/src/panels/lovelace/elements/hui-state-label-element.ts +++ b/src/panels/lovelace/elements/hui-state-label-element.ts @@ -65,6 +65,7 @@ class HuiStateLabelElement extends LitElement implements LovelaceElement { hasHold: hasAction(this._config!.hold_action), hasDoubleClick: hasAction(this._config!.double_tap_action), })} + tabindex="0" > ${this._config.prefix}${stateObj ? computeStateDisplay( @@ -90,6 +91,11 @@ class HuiStateLabelElement extends LitElement implements LovelaceElement { padding: 8px; white-space: nowrap; } + div:focus { + outline: none; + background: var(--divider-color); + border-radius: 100%; + } `; } } diff --git a/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts b/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts index 87e53f6e0a..bff9315b0a 100644 --- a/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts @@ -141,7 +141,6 @@ class HuiInputSelectEntityRow extends LitElement implements EntityRow { margin-left: 16px; flex: 1; } - paper-item { cursor: pointer; min-width: 200px; @@ -149,6 +148,11 @@ class HuiInputSelectEntityRow extends LitElement implements EntityRow { .pointer { cursor: pointer; } + state-badge:focus { + outline: none; + background: var(--divider-color); + border-radius: 100%; + } `; }