Fix boolean and nullable attribute bindings (#19432)

gallery/src/pages/components/ha-control-button.ts

@@ -59,7 +59,7 @@ export class DemoHaBarButton extends LitElement {
               <ha-control-button
                 class=${ifDefined(btn.class)}
                 label=${ifDefined(btn.label)}
-                disabled=${ifDefined(btn.disabled)}
+                ?disabled=${btn.disabled}
               >
                 <ha-svg-icon .path=${btn.icon || mdiLightbulb}></ha-svg-icon>
               </ha-control-button>

gallery/src/pages/components/ha-control-select.ts

@@ -135,7 +135,7 @@ export class DemoHaControlSelect extends LitElement {
                 class=${ifDefined(config.class)}
                 @value-changed=${this.handleValueChanged}
                 aria-labelledby=${id}
-                disabled=${ifDefined(config.disabled)}
+                ?disabled=${config.disabled}
               >
               </ha-control-select>
             </div>
@@ -156,7 +156,7 @@ export class DemoHaControlSelect extends LitElement {
                   class=${ifDefined(config.class)}
                   @value-changed=${this.handleValueChanged}
                   aria-labelledby=${id}
-                  disabled=${ifDefined(config.disabled)}
+                  ?disabled=${config.disabled}
                 >
                 </ha-control-select>
               `;

gallery/src/pages/components/ha-control-switch.ts

@@ -63,8 +63,8 @@ export class DemoHaControlSwitch extends LitElement {
                 .pathOn=${mdiLightbulb}
                 .pathOff=${mdiLightbulbOff}
                 aria-labelledby=${id}
-                disabled=${ifDefined(config.disabled)}
+                ?disabled=${config.disabled}
-                reversed=${ifDefined(config.reversed)}
+                ?reversed=${config.reversed}
               >
               </ha-control-switch>
             </div>
@@ -86,8 +86,8 @@ export class DemoHaControlSwitch extends LitElement {
                   aria-label=${label}
                   .pathOn=${mdiGarageOpen}
                   .pathOff=${mdiGarage}
-                  disabled=${ifDefined(config.disabled)}
+                  ?disabled=${config.disabled}
-                  reversed=${ifDefined(config.reversed)}
+                  ?reversed=${config.reversed}
                 >
                 </ha-control-switch>
               `;

src/components/data-table/ha-data-table.ts

@@ -300,7 +300,7 @@ export class HaDataTable extends LitElement {
               };
               return html`
                 <div
-                  aria-label=${column.label}
+                  aria-label=${ifDefined(column.label)}
                   class="mdc-data-table__header-cell ${classMap(classes)}"
                   style=${column.width
                     ? styleMap({

src/components/ha-control-number-buttons.ts

@@ -147,11 +147,11 @@ export class HaControlNumberButton extends LitElement {
           id="input"
           class="value"
           role="spinbutton"
-          .tabIndex=${this.disabled ? "-1" : "0"}
+          tabindex=${this.disabled ? "-1" : "0"}
-          aria-valuenow=${this.value}
+          aria-valuenow=${ifDefined(this.value)}
           aria-valuetext=${`${value}${unit}`}
-          aria-valuemin=${this.min}
+          aria-valuemin=${ifDefined(this.min)}
-          aria-valuemax=${this.max}
+          aria-valuemax=${ifDefined(this.max)}
           aria-label=${ifDefined(this.label)}
           ?disabled=${this.disabled}
           @keydown=${this._handleKeyDown}
@@ -170,7 +170,7 @@ export class HaControlNumberButton extends LitElement {
           .disabled=${this.disabled ||
           (this.min != null && this._value <= this.min)}
         >
-          <ha-svg-icon aria-hidden .path=${mdiMinus}></ha-svg-icon>
+          <ha-svg-icon .path=${mdiMinus}></ha-svg-icon>
         </button>
         <button
           class="button plus"
@@ -181,7 +181,7 @@ export class HaControlNumberButton extends LitElement {
           .disabled=${this.disabled ||
           (this.max != null && this._value >= this.max)}
         >
-          <ha-svg-icon aria-hidden .path=${mdiPlus}></ha-svg-icon>
+          <ha-svg-icon .path=${mdiPlus}></ha-svg-icon>
         </button>
       </div>
     `;

src/components/ha-date-range-picker.ts

@@ -8,24 +8,25 @@ import {
   addMonths,
   addYears,
   endOfDay,
-  endOfWeek,
   endOfMonth,
+  endOfWeek,
   endOfYear,
   startOfDay,
-  startOfWeek,
   startOfMonth,
+  startOfWeek,
   startOfYear,
 } from "date-fns";
 import {
-  css,
   CSSResultGroup,
-  html,
   LitElement,
-  nothing,
   PropertyValues,
   TemplateResult,
+  css,
+  html,
+  nothing,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
 import { calcDate } from "../common/datetime/calc_date";
 import { firstWeekdayIndex } from "../common/datetime/first_weekday";
 import { formatDate } from "../common/datetime/format_date";
@@ -34,9 +35,9 @@ import { useAmPm } from "../common/datetime/use_am_pm";
 import { computeRTLDirection } from "../common/util/compute_rtl";
 import { HomeAssistant } from "../types";
 import "./date-range-picker";
+import "./ha-icon-button";
 import "./ha-svg-icon";
 import "./ha-textfield";
-import "./ha-icon-button";
 
 export interface DateRangePickerRanges {
   [key: string]: [Date, Date];
@@ -250,8 +251,9 @@ export class HaDateRangePicker extends LitElement {
         start-date=${this.startDate.toISOString()}
         end-date=${this.endDate.toISOString()}
         ?ranges=${this.ranges !== false}
-        opening-direction=${this.openingDirection ||
+        opening-direction=${ifDefined(
-        this._calcedOpeningDirection}
+          this.openingDirection || this._calcedOpeningDirection
+        )}
         first-day=${firstWeekdayIndex(this.hass.locale)}
         language=${this.hass.locale.language}
       >

src/panels/config/automation/add-automation-element-dialog.ts

@@ -580,7 +580,7 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
                   : html`<img
                       alt=""
                       slot="start"
-                      src=${item.image}
+                      src=${item.image!}
                       crossorigin="anonymous"
                       referrerpolicy="no-referrer"
                     />`}

src/panels/lovelace/header-footer/hui-picture-header-footer.ts

@@ -68,7 +68,7 @@ export class HuiPictureHeaderFooter
 
     return html`
       <img
-        alt=${this._config!.alt_text}
+        alt=${ifDefined(this._config?.alt_text)}
         @action=${this._handleAction}
         .actionHandler=${actionHandler({
           hasHold: hasAction(this._config!.hold_action),

tsconfig.json

@@ -36,8 +36,6 @@
           // Binding names
           "no-legacy-attribute": "error",
           // Binding types
-          "no-boolean-in-attribute-binding": "warning",
-          "no-nullable-attribute-binding": "warning",
           "no-incompatible-type-binding": "warning",
           // LitElement
           "no-incompatible-property-type": "warning",