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

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

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