jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-31 21:17:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve A11y

Browse Source
This commit is contained in:
Paul Bottein 2023-02-17 09:41:54 +01:00
parent 421c7e1d93
commit 7e67fb62ac
No known key found for this signature in database
3 changed files with 28 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -137,6 +137,7 @@
"vue": "^2.7.14", "vue": "^2.7.14",
"vue2-daterange-picker": "^0.6.8", "vue2-daterange-picker": "^0.6.8",
"weekstart": "^1.1.0", "weekstart": "^1.1.0",
"wicg-inert": "^3.1.2",
"workbox-cacheable-response": "^6.5.4", "workbox-cacheable-response": "^6.5.4",
"workbox-core": "^6.5.4", "workbox-core": "^6.5.4",
"workbox-expiration": "^6.5.4", "workbox-expiration": "^6.5.4",

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

@ -14,9 +14,10 @@ import { classMap } from "lit/directives/class-map";
import { styleMap } from "lit/directives/style-map"; import { styleMap } from "lit/directives/style-map";
import { until } from "lit/directives/until"; import { until } from "lit/directives/until";
import memoizeOne from "memoize-one"; import memoizeOne from "memoize-one";
import "wicg-inert";
import { fireEvent } from "../../../../common/dom/fire_event"; import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/search-input";
import "../../../../components/ha-circular-progress"; import "../../../../components/ha-circular-progress";
import "../../../../components/search-input";
import { isUnavailableState } from "../../../../data/entity"; import { isUnavailableState } from "../../../../data/entity";
import type { import type {
LovelaceCardConfig, LovelaceCardConfig,
@ -114,12 +115,14 @@ export class HuiCardPicker extends LitElement {
> >
<div class="cards-container"> <div class="cards-container">
${this._filterCards(this._cards, this._filter).map( ${this._filterCards(this._cards, this._filter).map(
(cardElement: CardElement) => cardElement.element (cardElement: CardElement) =>
html`<div>${cardElement.element}</div>`
)} )}
</div> </div>
<div class="cards-container"> <div class="cards-container">
<button <button
class="card manual" class="card manual"
type="button"
@click=${this._cardPicked} @click=${this._cardPicked}
.config=${{ type: "" }} .config=${{ type: "" }}
> >
@ -306,20 +309,20 @@ export class HuiCardPicker extends LitElement {
: name; : name;
return html` return html`
<div class="card"> <button
<button class="card"
class="overlay" type="button"
type="button" @click=${this._cardPicked}
@click=${this._cardPicked} .config=${cardConfig}
.config=${cardConfig} .title=${cardName}
.title=${cardName} >
></button>
<div class="card-header">${cardName}</div> <div class="card-header">${cardName}</div>
<div <div
class="preview ${classMap({ class="preview ${classMap({
description: !element || element.tagName === "HUI-ERROR-CARD", description: !element || element.tagName === "HUI-ERROR-CARD",
})}" })}"
inert inert
aria-hidden="true"
> >
${element && element.tagName !== "HUI-ERROR-CARD" ${element && element.tagName !== "HUI-ERROR-CARD"
? element ? element
@ -330,7 +333,7 @@ export class HuiCardPicker extends LitElement {
) )
: description} : description}
</div> </div>
</div> </button>
`; `;
} }
@ -348,13 +351,19 @@ export class HuiCardPicker extends LitElement {
grid-gap: 8px 8px; grid-gap: 8px 8px;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
margin-top: 20px; margin-top: 20px;
list-style-type: none;
padding: 0;
} }
.card { .card {
height: 100%;
max-width: 500px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: inherit;
justify-content: center;
padding: 0;
height: 100%;
width: 100%;
max-width: 500px;
border-radius: var(--ha-card-border-radius, 12px); border-radius: var(--ha-card-border-radius, 12px);
background: var(--primary-background-color, #fafafa); background: var(--primary-background-color, #fafafa);
cursor: pointer; cursor: pointer;
@ -420,10 +429,6 @@ export class HuiCardPicker extends LitElement {
.manual { .manual {
max-width: none; max-width: none;
display: flex;
align-items: inherit;
justify-content: center;
padding: 0;
} }
`, `,
]; ];

9
yarn.lock
View File

@ -9715,6 +9715,7 @@ fsevents@^1.2.7:
webpack-manifest-plugin: ^5.0.0 webpack-manifest-plugin: ^5.0.0
webpackbar: ^5.0.2 webpackbar: ^5.0.2
weekstart: ^1.1.0 weekstart: ^1.1.0
wicg-inert: ^3.1.2
workbox-build: ^6.5.4 workbox-build: ^6.5.4
workbox-cacheable-response: ^6.5.4 workbox-cacheable-response: ^6.5.4
workbox-core: ^6.5.4 workbox-core: ^6.5.4
@ -16567,10 +16568,10 @@ typescript@^3.8.3:
languageName: node languageName: node
linkType: hard linkType: hard
"wicg-inert@npm:^3.0.0": "wicg-inert@npm:^3.0.0, wicg-inert@npm:^3.1.2":
version: 3.0.0 version: 3.1.2
resolution: "wicg-inert@npm:3.0.0" resolution: "wicg-inert@npm:3.1.2"
checksum: 2f8fdc3140d8937fa01d89901b9a3bfb6d342a63bafb63d3e6ca2da59d4521803abca7d5890b56b20f1a16afe0584c775989f2034a83b1912716dfa8b3e7623e checksum: 538c5cb7f240915a4c17741c644b135040764c6d8a05853099f2f342c95ce2645e6cf7c4f729775013dbc218e0da04b3f943875eba6ed4b38ff9dd431465d391
languageName: node languageName: node
linkType: hard linkType: hard