jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-25 18:26:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve disabled state for select and number button control (#17773)

Browse Source
This commit is contained in:
Paul Bottein 2023-09-01 15:19:28 +02:00 committed by GitHub
parent 6d63028406
commit c291af5d97
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/ha-control-number-buttons.ts
View File

@ -81,6 +81,7 @@ export class HaControlNumberButton extends LitElement {
} }
_handleKeyDown(e: KeyboardEvent) { _handleKeyDown(e: KeyboardEvent) {
if (this.disabled) return;
if (!A11Y_KEY_CODES.has(e.code)) return; if (!A11Y_KEY_CODES.has(e.code)) return;
e.preventDefault(); e.preventDefault();
switch (e.code) { switch (e.code) {
@ -116,7 +117,7 @@ export class HaControlNumberButton extends LitElement {
const displayedValue = const displayedValue =
this.value != null this.value != null
? formatNumber(this.value, this.locale, this.formatOptions) ? formatNumber(this.value, this.locale, this.formatOptions)
: "-"; : "";
return html` return html`
<div class="container"> <div class="container">
@ -124,12 +125,12 @@ export class HaControlNumberButton extends LitElement {
id="input" id="input"
class="value" class="value"
role="number-button" role="number-button"
tabindex="0" .tabIndex=${this.disabled ? "-1" : "0"}
aria-valuenow=${this.value} aria-valuenow=${this.value}
aria-valuemin=${this.min} aria-valuemin=${this.min}
aria-valuemax=${this.max} aria-valuemax=${this.max}
aria-label=${ifDefined(this.label)} aria-label=${ifDefined(this.label)}
.disabled=${this.disabled} ?disabled=${this.disabled}
@keydown=${this._handleKeyDown} @keydown=${this._handleKeyDown}
> >
${displayedValue} ${displayedValue}
@ -240,6 +241,7 @@ export class HaControlNumberButton extends LitElement {
.button[disabled] { .button[disabled] {
opacity: 0.4; opacity: 0.4;
pointer-events: none; pointer-events: none;
cursor: not-allowed;
} }
.button.minus { .button.minus {
left: 0; left: 0;

3
src/components/ha-control-select.ts
View File

@ -217,6 +217,7 @@ export class HaControlSelect extends LitElement {
transition: box-shadow 180ms ease-in-out; transition: box-shadow 180ms ease-in-out;
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 500;
color: var(--primary-text-color);
user-select: none; user-select: none;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
} }
@ -267,7 +268,6 @@ export class HaControlSelect extends LitElement {
justify-content: center; justify-content: center;
border-radius: var(--control-select-button-border-radius); border-radius: var(--control-select-button-border-radius);
overflow: hidden; overflow: hidden;
color: var(--primary-text-color);
/* For safari border-radius overflow */ /* For safari border-radius overflow */
z-index: 0; z-index: 0;
} }
@ -331,6 +331,7 @@ export class HaControlSelect extends LitElement {
:host([disabled]) { :host([disabled]) {
--control-select-color: var(--disabled-color); --control-select-color: var(--disabled-color);
--control-select-focused-opacity: 0; --control-select-focused-opacity: 0;
color: var(--disabled-color);
} }
:host([disabled]) .option { :host([disabled]) .option {
cursor: not-allowed; cursor: not-allowed;