jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-08-01 13:37:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make card picker results accessible

Browse Source
This commit is contained in:
Paul Bottein 2023-02-16 18:01:17 +01:00
parent 82b2c6aa06
commit 421c7e1d93
No known key found for this signature in database
1 changed files with 25 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/panels/lovelace/editor/card-editor/hui-card-picker.ts
View File

@ -118,7 +118,7 @@ export class HuiCardPicker extends LitElement {
)} )}
</div> </div>
<div class="cards-container"> <div class="cards-container">
<div <button
class="card manual" class="card manual"
@click=${this._cardPicked} @click=${this._cardPicked}
.config=${{ type: "" }} .config=${{ type: "" }}
@ -133,7 +133,7 @@ export class HuiCardPicker extends LitElement {
`ui.panel.lovelace.editor.card.generic.manual_description` `ui.panel.lovelace.editor.card.generic.manual_description`
)} )}
</div> </div>
</div> </button>
</div> </div>
</div> </div>
`; `;
@ -299,24 +299,27 @@ export class HuiCardPicker extends LitElement {
} }
} }
const cardName = customCard
? `${this.hass!.localize(
"ui.panel.lovelace.editor.cardpicker.custom_card"
)}: ${customCard.name || customCard.type}`
: name;
return html` return html`
<div class="card"> <div class="card">
<div <button
class="overlay" class="overlay"
type="button"
@click=${this._cardPicked} @click=${this._cardPicked}
.config=${cardConfig} .config=${cardConfig}
></div> .title=${cardName}
<div class="card-header"> ></button>
${customCard <div class="card-header">${cardName}</div>
? `${this.hass!.localize(
"ui.panel.lovelace.editor.cardpicker.custom_card"
)}: ${customCard.name || customCard.type}`
: name}
</div>
<div <div
class="preview ${classMap({ class="preview ${classMap({
description: !element || element.tagName === "HUI-ERROR-CARD", description: !element || element.tagName === "HUI-ERROR-CARD",
})}" })}"
inert
> >
${element && element.tagName !== "HUI-ERROR-CARD" ${element && element.tagName !== "HUI-ERROR-CARD"
? element ? element
@ -356,6 +359,9 @@ export class HuiCardPicker extends LitElement {
background: var(--primary-background-color, #fafafa); background: var(--primary-background-color, #fafafa);
cursor: pointer; cursor: pointer;
position: relative; position: relative;
border: var(--ha-card-border-width, 1px) solid
var(--ha-card-border-color, var(--divider-color));
overflow: hidden;
} }
.card-header { .card-header {
@ -405,13 +411,19 @@ export class HuiCardPicker extends LitElement {
height: 100%; height: 100%;
z-index: 1; z-index: 1;
box-sizing: border-box; box-sizing: border-box;
border: var(--ha-card-border-width, 1px) solid background: none;
var(--ha-card-border-color, var(--divider-color)); cursor: pointer;
padding: 0;
border: none;
border-radius: var(--ha-card-border-radius, 12px); border-radius: var(--ha-card-border-radius, 12px);
} }
.manual { .manual {
max-width: none; max-width: none;
display: flex;
align-items: inherit;
justify-content: center;
padding: 0;
} }
`, `,
]; ];