CrOS Settings: Include header text in settings card

When the OsSettingsRevampWayfinding feature is enabled, header text for
the L1 page settings cards should be in the card, instead of above the
card.

Light mode: http://screen/7RLKwTTq55gx3PE.png
Dark mode: http://screen/3RsMSxKTbFSY8RT.png

Bug: b:301138021
Test: Manually verify styles in dark and light mode
Change-Id: Icf796ff94d1f0df41df1e3133cdb97c09e7f6307
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4954626
Commit-Queue: Wes Okuhara <wesokuhara@google.com>
Reviewed-by: Xiaohui Chen <xiaohuic@chromium.org>
Reviewed-by: Connie Xu <conniekxu@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1213048}

chrome/browser/resources/ash/settings/main_page_container/main_page_container.html

@@ -11,6 +11,10 @@
     display: none;
   }
 
+  :host-context(body.revamp-wayfinding-enabled):host(:not(.showing-subpage)) {
+    padding-top: 8px;
+  }
+
   .banner {
     align-items: center;
     background-color: var(--cros-bg-color);

chrome/browser/resources/ash/settings/os_settings_page/settings_card.html

@@ -12,7 +12,13 @@
     --settings-card-border-radius: 16px;
   }
 
-  #headerText {
+  :host-context(body.revamp-wayfinding-enabled) #header {
+    border-bottom: var(--cr-separator-line);
+    margin: 0;
+    padding: 8px 20px 8px 20px;
+  }
+
+  :host-context(body:not(.revamp-wayfinding-enabled)) #headerText {
     color: var(--cr-primary-text-color);
     font-size: 108%;
     font-weight: 400;
@@ -24,6 +30,14 @@
     padding-top: 8px;
   }
 
+  :host-context(body.revamp-wayfinding-enabled) #headerText {
+    color: var(--cros-sys-primary);
+    font: var(--cros-button-2-font);
+    margin: 0;
+    outline: none;
+    padding: 0;
+  }
+
   #card {
     background-color: var(--cr-card-background-color);
     flex: 1;
@@ -41,14 +55,27 @@
 
   :host-context(body.revamp-wayfinding-enabled) #card {
     border-radius: var(--settings-card-border-radius);
+    margin-bottom: 16px;
   }
 </style>
-<div id="header">
-  <h2 id="headerText" tabindex="-1"
-      aria-hidden$="[[getHeaderTextAriaHidden_(headerText)]]">
-    [[headerText]]
-  </h2>
-</div>
+<template is="dom-if" if="[[!isRevampWayfindingEnabled_]]">
+  <template is="dom-if" if="[[headerText]]" restamp>
+    <div id="header">
+      <h2 id="headerText" tabindex="-1">
+        [[headerText]]
+      </h2>
+    </div>
+  </template>
+</template>
 <div id="card">
+  <template is="dom-if" if="[[isRevampWayfindingEnabled_]]">
+    <template is="dom-if" if="[[headerText]]" restamp>
+      <div id="header">
+        <h2 id="headerText" tabindex="-1">
+          [[headerText]]
+        </h2>
+      </div>
+    </template>
+  </template>
   <slot></slot>
 </div>

chrome/browser/resources/ash/settings/os_settings_page/settings_card.ts

@@ -17,6 +17,8 @@ import 'chrome://resources/cr_elements/cr_shared_vars.css.js';
 
 import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
+import {isRevampWayfindingEnabled} from '../common/load_time_booleans.js';
+
 import {getTemplate} from './settings_card.html.js';
 
 export class SettingsCardElement extends PolymerElement {
@@ -30,31 +32,23 @@ export class SettingsCardElement extends PolymerElement {
 
   static get properties() {
     return {
-      /**
-       * Header text for the card. Initialize so we can use the
-       * getHeaderTextAriaHidden_ method for accessibility.
-       */
       headerText: {
         type: String,
         value: '',
       },
+
+      isRevampWayfindingEnabled_: {
+        type: Boolean,
+        value() {
+          return isRevampWayfindingEnabled();
+        },
+        readOnly: true,
+      },
     };
   }
 
   headerText: string;
-
-  /**
-   * Get the aria-hidden value for the header text.
-   * @return A return value of false will not add the aria-hidden attribute,
-   *    while a value of 'true' will add aria-hidden="true" per the ARIA specs.
-   */
-  private getHeaderTextAriaHidden_(): string|boolean {
-    return this.headerText ? false : 'true';
-  }
-
-  override focus(): void {
-    this.shadowRoot!.getElementById('headerText')!.focus();
-  }
+  private isRevampWayfindingEnabled_: boolean;
 }
 
 declare global {