Add semantic headings to automation editor (#13542)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/panels/config/automation/action/ha-automation-action-row.ts

@@ -157,13 +157,13 @@ export default class HaAutomationActionRow extends LitElement {
             </div>`
           : ""}
         <ha-expansion-panel leftChevron>
-          <div slot="header">
+          <h3 slot="header">
             <ha-svg-icon
               class="action-icon"
               .path=${ACTION_TYPES[type!]}
             ></ha-svg-icon>
             ${capitalizeFirstLetter(describeAction(this.hass, this.action))}
-          </div>
+          </h3>
 
           ${this.index !== 0
             ? html`
@@ -507,6 +507,11 @@ export default class HaAutomationActionRow extends LitElement {
           --expansion-panel-summary-padding: 0 0 0 8px;
           --expansion-panel-content-padding: 0;
         }
+        h3 {
+          margin: 0;
+          font-size: inherit;
+          font-weight: inherit;
+        }
         .action-icon {
           display: none;
         }

src/panels/config/automation/condition/ha-automation-condition-row.ts

@@ -93,7 +93,7 @@ export default class HaAutomationConditionRow extends LitElement {
           : ""}
 
         <ha-expansion-panel leftChevron>
-          <div slot="header">
+          <h3 slot="header">
             <ha-svg-icon
               class="condition-icon"
               .path=${CONDITION_TYPES[this.condition.condition]}
@@ -101,7 +101,7 @@ export default class HaAutomationConditionRow extends LitElement {
             ${capitalizeFirstLetter(
               describeCondition(this.condition, this.hass)
             )}
-          </div>
+          </h3>
 
           <ha-button-menu
             slot="icons"
@@ -423,6 +423,11 @@ export default class HaAutomationConditionRow extends LitElement {
           --expansion-panel-summary-padding: 0 0 0 8px;
           --expansion-panel-content-padding: 0;
         }
+        h3 {
+          margin: 0;
+          font-size: inherit;
+          font-weight: inherit;
+        }
         .condition-icon {
           display: none;
         }

src/panels/config/automation/ha-automation-editor.ts

@@ -681,15 +681,6 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
         }
         h1 {
           margin: 0;
-          font-family: var(--paper-font-headline_-_font-family);
-          -webkit-font-smoothing: var(
-            --paper-font-headline_-_-webkit-font-smoothing
-          );
-          font-size: var(--paper-font-headline_-_font-size);
-          font-weight: var(--paper-font-headline_-_font-weight);
-          letter-spacing: var(--paper-font-headline_-_letter-spacing);
-          line-height: var(--paper-font-headline_-_line-height);
-          opacity: var(--dark-primary-opacity);
         }
         .header-name {
           display: flex;

src/panels/config/automation/manual-automation-editor.ts

@@ -47,12 +47,12 @@ export class HaManualAutomationEditor extends LitElement {
           : ""}
 
         <ha-expansion-panel leftChevron>
-          <div slot="header">
+          <h3 slot="header">
             <ha-svg-icon class="settings-icon" .path=${mdiRobot}></ha-svg-icon>
             ${this.hass.localize(
               "ui.panel.config.automation.editor.automation_settings"
             )}
-          </div>
+          </h3>
           <div class="card-content">
             <ha-textarea
               .label=${this.hass.localize(
@@ -115,11 +115,11 @@ export class HaManualAutomationEditor extends LitElement {
       </ha-card>
 
       <div class="header">
-        <div class="name">
+        <h2 id="triggers-heading" class="name">
           ${this.hass.localize(
             "ui.panel.config.automation.editor.triggers.header"
           )}
-        </div>
+        </h2>
         <a
           href=${documentationUrl(this.hass, "/docs/automation/trigger/")}
           target="_blank"
@@ -135,17 +135,19 @@ export class HaManualAutomationEditor extends LitElement {
       </div>
 
       <ha-automation-trigger
+        role="region"
+        aria-labelledby="triggers-heading"
         .triggers=${this.config.trigger}
         @value-changed=${this._triggerChanged}
         .hass=${this.hass}
       ></ha-automation-trigger>
 
       <div class="header">
-        <div class="name">
+        <h2 id="conditions-heading" class="name">
           ${this.hass.localize(
             "ui.panel.config.automation.editor.conditions.header"
           )}
-        </div>
+        </h2>
         <a
           href=${documentationUrl(this.hass, "/docs/automation/condition/")}
           target="_blank"
@@ -161,17 +163,19 @@ export class HaManualAutomationEditor extends LitElement {
       </div>
 
       <ha-automation-condition
+        role="region"
+        aria-labelledby="conditions-heading"
         .conditions=${this.config.condition || []}
         @value-changed=${this._conditionChanged}
         .hass=${this.hass}
       ></ha-automation-condition>
 
       <div class="header">
-        <div class="name">
+        <h2 id="actions-heading" class="name">
           ${this.hass.localize(
             "ui.panel.config.automation.editor.actions.header"
           )}
-        </div>
+        </h2>
         <a
           href=${documentationUrl(this.hass, "/docs/automation/action/")}
           target="_blank"
@@ -187,6 +191,8 @@ export class HaManualAutomationEditor extends LitElement {
       </div>
 
       <ha-automation-action
+        role="region"
+        aria-labelledby="actions-heading"
         .actions=${this.config.action}
         @value-changed=${this._actionChanged}
         .hass=${this.hass}
@@ -292,7 +298,6 @@ export class HaManualAutomationEditor extends LitElement {
         }
         .header {
           display: flex;
-          margin: 16px 0;
           align-items: center;
         }
         .header .name {
@@ -303,6 +308,11 @@ export class HaManualAutomationEditor extends LitElement {
         .header a {
           color: var(--secondary-text-color);
         }
+        h3 {
+          margin: 0;
+          font-size: inherit;
+          font-weight: inherit;
+        }
         ha-expansion-panel {
           --expansion-panel-summary-padding: 0 0 0 8px;
           --expansion-panel-content-padding: 0;

src/panels/config/automation/trigger/ha-automation-trigger-row.ts

@@ -121,13 +121,13 @@ export default class HaAutomationTriggerRow extends LitElement {
           : ""}
 
         <ha-expansion-panel leftChevron>
-          <div slot="header">
+          <h3 slot="header">
             <ha-svg-icon
               class="trigger-icon"
               .path=${TRIGGER_TYPES[this.trigger.platform]}
             ></ha-svg-icon>
             ${capitalizeFirstLetter(describeTrigger(this.trigger, this.hass))}
-          </div>
+          </h3>
           <ha-button-menu
             slot="icons"
             fixed
@@ -532,6 +532,11 @@ export default class HaAutomationTriggerRow extends LitElement {
           --expansion-panel-summary-padding: 0 0 0 8px;
           --expansion-panel-content-padding: 0;
         }
+        h3 {
+          margin: 0;
+          font-size: inherit;
+          font-weight: inherit;
+        }
         .trigger-icon {
           display: none;
         }