Detach styling from semantic HTML header tags

We want to use <h1-6> header tags for semantic structuring of all Gerrit pages in order to increase accessibility. Using such a header anywhere in the app should by itself not have any influence on the appearance. So we are removing the basic css rules for h1, h2, h3 from shared styles. In order to make this change a visual no-op we are applying heading-$n classes to all existing header tags. Once this change is merged you can change the n of any <h$n> tag without affecting how Gerrit looks to users. That will *only* change the structure. And changing the n of a class="heading-$n" attribute will *only* change the look, not the structure. Change-Id: Ic5e267208d164ba6ecd49992a63fa6b056e42a22
2020-06-02 22:18:21 +02:00
parent 2d9f77f745
commit e59642c494
21 changed files with 57 additions and 61 deletions
--- a/polygerrit-ui/app/elements/admin/gr-access-section/gr-access-section_html.js
+++ b/polygerrit-ui/app/elements/admin/gr-access-section/gr-access-section_html.js
@@ -82,7 +82,7 @@ export const htmlTemplate = html`
    <div id="mainContainer">
      <div class="header">
        <div class="name">
-          <h3>[[_computeSectionName(section.id)]]</h3>
+          <h3 class="heading-3">[[_computeSectionName(section.id)]]</h3>
          <gr-button
            id="editBtn"
            link=""
--- a/polygerrit-ui/app/elements/admin/gr-group-members/gr-group-members_html.js
+++ b/polygerrit-ui/app/elements/admin/gr-group-members/gr-group-members_html.js
@@ -63,9 +63,9 @@ export const htmlTemplate = html`
      Loading...
    </div>
    <div id="loadedContent" class$="[[_computeLoadingClass(_loading)]]">
-      <h1 id="Title">[[_groupName]]</h1>
+      <h1 id="Title" class="heading-1">[[_groupName]]</h1>
      <div id="form">
-        <h3 id="members">Members</h3>
+        <h3 id="members" class="heading-3">Members</h3>
        <fieldset>
          <span class="value">
            <gr-autocomplete
@@ -112,7 +112,7 @@ export const htmlTemplate = html`
            </tbody>
          </table>
        </fieldset>
-        <h3 id="includedGroups">Included Groups</h3>
+        <h3 id="includedGroups" class="heading-3">Included Groups</h3>
        <fieldset>
          <span class="value">
            <gr-autocomplete
--- a/polygerrit-ui/app/elements/admin/gr-group/gr-group_html.js
+++ b/polygerrit-ui/app/elements/admin/gr-group/gr-group_html.js
@@ -37,18 +37,21 @@ export const htmlTemplate = html`
      Loading...
    </div>
    <div id="loadedContent" class$="[[_computeLoadingClass(_loading)]]">
-      <h1 id="Title">[[_groupName]]</h1>
-      <h2 id="configurations">General</h2>
+      <h1 id="Title" class="heading-1">[[_groupName]]</h1>
+      <h2 id="configurations" class="heading-2">General</h2>
      <div id="form">
        <fieldset>
-          <h3 id="groupUUID">Group UUID</h3>
+          <h3 id="groupUUID" class="heading-3">Group UUID</h3>
          <fieldset>
            <gr-copy-clipboard
              id="uuid"
              text="[[_getGroupUUID(_groupConfig.id)]]"
            ></gr-copy-clipboard>
          </fieldset>
-          <h3 id="groupName" class$="[[_computeHeaderClass(_rename)]]">
+          <h3
+            id="groupName"
+            class$="heading-3 [[_computeHeaderClass(_rename)]]"
+          >
            Group Name
          </h3>
          <fieldset>
@@ -72,7 +75,10 @@ export const htmlTemplate = html`
              >
            </span>
          </fieldset>
-          <h3 id="groupOwner" class$="[[_computeHeaderClass(_owner)]]">
+          <h3
+            id="groupOwner"
+            class$="heading-3 [[_computeHeaderClass(_owner)]]"
+          >
            Owners
          </h3>
          <fieldset>
@@ -99,7 +105,7 @@ export const htmlTemplate = html`
              >
            </span>
          </fieldset>
-          <h3 class$="[[_computeHeaderClass(_description)]]">
+          <h3 class$="heading-3 [[_computeHeaderClass(_description)]]">
            Description
          </h3>
          <fieldset>
@@ -123,7 +129,7 @@ export const htmlTemplate = html`
              </gr-button>
            </span>
          </fieldset>
-          <h3 id="options" class$="[[_computeHeaderClass(_options)]]">
+          <h3 id="options" class$="heading-3 [[_computeHeaderClass(_options)]]">
            Group Options
          </h3>
          <fieldset>
--- a/polygerrit-ui/app/elements/admin/gr-repo-access/gr-repo-access_html.js
+++ b/polygerrit-ui/app/elements/admin/gr-repo-access/gr-repo-access_html.js
@@ -62,7 +62,10 @@ export const htmlTemplate = html`
      Loading...
    </div>
    <div id="loadedContent" class$="[[_computeLoadingClass(_loading)]]">
-      <h3 id="inheritsFrom" class$="[[_computeShowInherit(_inheritsFrom)]]">
+      <h3
+        id="inheritsFrom"
+        class$="heading-3 [[_computeShowInherit(_inheritsFrom)]]"
+      >
        <span class="rightsText">Rights Inherit From</span>
        <a
          href$="[[_computeParentHref(_inheritsFrom.name)]]"
--- a/polygerrit-ui/app/elements/admin/gr-repo-command/gr-repo-command_html.js
+++ b/polygerrit-ui/app/elements/admin/gr-repo-command/gr-repo-command_html.js
@@ -23,7 +23,7 @@ export const htmlTemplate = html`
      margin-bottom: var(--spacing-xxl);
    }
  </style>
-  <h3>[[title]]</h3>
+  <h3 class="heading-3">[[title]]</h3>
  <gr-button
    title$="[[tooltip]]"
    disabled$="[[disabled]]"
--- a/polygerrit-ui/app/elements/admin/gr-repo-commands/gr-repo-commands_html.js
+++ b/polygerrit-ui/app/elements/admin/gr-repo-commands/gr-repo-commands_html.js
@@ -27,12 +27,12 @@ export const htmlTemplate = html`
    /* Workaround for empty style block - see https://github.com/Polymer/tools/issues/408 */
  </style>
  <main class="gr-form-styles read-only">
-    <h1 id="Title">Repository Commands</h1>
+    <h1 id="Title" class="heading-1">Repository Commands</h1>
    <div id="loading" class$="[[_computeLoadingClass(_loading)]]">
      Loading...
    </div>
    <div id="loadedContent" class$="[[_computeLoadingClass(_loading)]]">
-      <h2 id="options">Command</h2>
+      <h2 id="options" class="heading-2">Command</h2>
      <div id="form">
        <gr-repo-command
          title="Create change"
--- a/polygerrit-ui/app/elements/admin/gr-repo/gr-repo_html.js
+++ b/polygerrit-ui/app/elements/admin/gr-repo/gr-repo_html.js
@@ -50,7 +50,7 @@ export const htmlTemplate = html`
      /* Workaround for empty style block - see https://github.com/Polymer/tools/issues/408 */
    </style>
    <div class="info">
-      <h1 id="Title" class$="name">
+      <h1 id="Title" class="heading-1">
        [[repo]]
        <hr />
      </h1>
@@ -63,7 +63,7 @@ export const htmlTemplate = html`
    </div>
    <div id="loadedContent" class$="[[_computeLoadingClass(_loading)]]">
      <div id="downloadContent" class$="[[_computeHideClass(_schemes)]]">
-        <h2 id="download">Download</h2>
+        <h2 id="download" class="heading-2">Download</h2>
        <fieldset>
          <gr-download-commands
            id="downloadCommands"
@@ -73,12 +73,15 @@ export const htmlTemplate = html`
          ></gr-download-commands>
        </fieldset>
      </div>
-      <h2 id="configurations" class$="[[_computeHeaderClass(_configChanged)]]">
+      <h2
+        id="configurations"
+        class$="heading-2 [[_computeHeaderClass(_configChanged)]]"
+      >
        Configurations
      </h2>
      <div id="form">
        <fieldset>
-          <h3 id="Description">Description</h3>
+          <h3 id="Description" class="heading-3">Description</h3>
          <fieldset>
            <iron-autogrow-textarea
              id="descriptionInput"
@@ -89,7 +92,7 @@ export const htmlTemplate = html`
              disabled$="[[_readOnly]]"
            ></iron-autogrow-textarea>
          </fieldset>
-          <h3 id="Options">Repository Options</h3>
+          <h3 id="Options" class="heading-3">Repository Options</h3>
          <fieldset id="options">
            <section>
              <span class="title">State</span>
@@ -362,7 +365,7 @@ export const htmlTemplate = html`
              </span>
            </section>
          </fieldset>
-          <h3 id="Options">Contributor Agreements</h3>
+          <h3 id="Options" class="heading-3">Contributor Agreements</h3>
          <fieldset id="agreements">
            <section>
              <span class="title">
@@ -407,7 +410,7 @@ export const htmlTemplate = html`
            class$="pluginConfig [[_computeHideClass(_pluginData)]]"
            on-plugin-config-changed="_handlePluginConfigChanged"
          >
-            <h3>Plugins</h3>
+            <h3 class="heading-3">Plugins</h3>
            <template is="dom-repeat" items="[[_pluginData]]" as="data">
              <gr-repo-plugin-config
                plugin-data="[[data]]"
--- a/polygerrit-ui/app/elements/change-list/gr-create-change-help/gr-create-change-help_html.js
+++ b/polygerrit-ui/app/elements/change-list/gr-create-change-help/gr-create-change-help_html.js
@@ -48,12 +48,6 @@ export const htmlTemplate = html`
      padding-top: var(--spacing-xl);
      vertical-align: top;
    }
-    #help h1 {
-      font-family: var(--header-font-family);
-      font-size: var(--font-size-h3);
-      font-weight: var(--font-weight-h3);
-      line-height: var(--line-height-h3);
-    }
    #help p {
      margin-bottom: var(--spacing-m);
      max-width: 35em;
@@ -73,7 +67,7 @@ export const htmlTemplate = html`
    </p>
  </div>
  <div id="help">
-    <h1>Push your first change for code review</h1>
+    <h2 class="heading-3">Push your first change for code review</h2>
    <p>
      Pushing a change for review is easy, but a little different from other git
      code review tools. Click on the \`Create Change' button and follow the
--- a/polygerrit-ui/app/elements/change-list/gr-repo-header/gr-repo-header_html.js
+++ b/polygerrit-ui/app/elements/change-list/gr-repo-header/gr-repo-header_html.js
@@ -24,7 +24,7 @@ export const htmlTemplate = html`
    /* Workaround for empty style block - see https://github.com/Polymer/tools/issues/408 */
  </style>
  <div class="info">
-    <h1 class$="name">
+    <h1 class="heading-1">
      [[repo]]
      <hr />
    </h1>
--- a/polygerrit-ui/app/elements/change-list/gr-user-header/gr-user-header_html.js
+++ b/polygerrit-ui/app/elements/change-list/gr-user-header/gr-user-header_html.js
@@ -21,12 +21,6 @@ export const htmlTemplate = html`
    /* Workaround for empty style block - see https://github.com/Polymer/tools/issues/408 */
  </style>
  <style include="dashboard-header-styles">
-    .name {
-      display: inline-block;
-    }
-    .name hr {
-      width: 100%;
-    }
    .status.hide,
    .name.hide,
    .dashboardLink.hide {
@@ -39,7 +33,7 @@ export const htmlTemplate = html`
    aria-label="Account avatar"
  ></gr-avatar>
  <div class="info">
-    <h1 class="name">
+    <h1 class="heading-1">
      [[_computeDetail(_accountDetails, 'name')]]
    </h1>
    <hr />
--- a/polygerrit-ui/app/elements/change/gr-download-dialog/gr-download-dialog_html.js
+++ b/polygerrit-ui/app/elements/change/gr-download-dialog/gr-download-dialog_html.js
@@ -56,16 +56,12 @@ export const htmlTemplate = html`
    .archives a:last-of-type {
      margin-right: 0;
    }
-    .title {
-      flex: 1;
-      font-weight: var(--font-weight-bold);
-    }
    .hidden {
      display: none;
    }
  </style>
  <section>
-    <h3 class="title">
+    <h3 class="heading-3">
      Patch set [[patchNum]] of [[_computePatchSetQuantity(change.revisions)]]
    </h3>
  </section>
--- a/polygerrit-ui/app/elements/change/gr-included-in-dialog/gr-included-in-dialog_html.js
+++ b/polygerrit-ui/app/elements/change/gr-included-in-dialog/gr-included-in-dialog_html.js
@@ -67,7 +67,7 @@ export const htmlTemplate = html`
    }
  </style>
  <header>
-    <h1 id="title">Included In:</h1>
+    <h1 id="title" class="heading-1">Included In:</h1>
    <span class="closeButtonContainer">
      <gr-button id="closeButton" link="" on-click="_handleCloseTap"
        >Close</gr-button
--- a/polygerrit-ui/app/elements/change/gr-related-changes-list/gr-related-changes-list_html.js
+++ b/polygerrit-ui/app/elements/change/gr-related-changes-list/gr-related-changes-list_html.js
@@ -21,9 +21,6 @@ export const htmlTemplate = html`
    :host {
      display: block;
    }
-    h3 {
-      margin: var(--spacing-m) 0 0;
-    }
    section {
      margin-bottom: 1.4em; /* Same as line height for collapse purposes */
    }
--- a/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog_html.js
+++ b/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog_html.js
@@ -108,9 +108,6 @@ export const htmlTemplate = html`
      background: var(--table-header-background-color);
      padding: var(--spacing-l);
    }
-    .draftsContainer h3 {
-      margin-top: var(--spacing-xs);
-    }
    #checkingStatusLabel,
    #notLatestLabel {
      margin-left: var(--spacing-l);
--- a/polygerrit-ui/app/elements/core/gr-keyboard-shortcuts-dialog/gr-keyboard-shortcuts-dialog_html.js
+++ b/polygerrit-ui/app/elements/core/gr-keyboard-shortcuts-dialog/gr-keyboard-shortcuts-dialog_html.js
@@ -55,7 +55,7 @@ export const htmlTemplate = html`
    }
  </style>
  <header>
-    <h3>Keyboard shortcuts</h3>
+    <h3 class="heading-3">Keyboard shortcuts</h3>
    <gr-button link="" on-click="_handleCloseTap">Close</gr-button>
  </header>
  <main>
--- a/polygerrit-ui/app/elements/settings/gr-cla-view/gr-cla-view_html.js
+++ b/polygerrit-ui/app/elements/settings/gr-cla-view/gr-cla-view_html.js
@@ -61,8 +61,8 @@ export const htmlTemplate = html`
    /* Workaround for empty style block - see https://github.com/Polymer/tools/issues/408 */
  </style>
  <main>
-    <h1>New Contributor Agreement</h1>
-    <h3>Select an agreement type:</h3>
+    <h1 class="heading-1">New Contributor Agreement</h1>
+    <h3 class="heading-3">Select an agreement type:</h3>
    <template
      is="dom-repeat"
      items="[[_serverConfig.auth.contributor_agreements]]"
@@ -92,7 +92,7 @@ export const htmlTemplate = html`
      id="claNewAgreement"
      class$="[[_computeShowAgreementsClass(_showAgreements)]]"
    >
-      <h3 class="smallHeading">Review the agreement:</h3>
+      <h3 class="heading-3">Review the agreement:</h3>
      <div id="agreementsUrl" class="agreementsUrl">
        <a href$="[[_agreementsUrl]]" target="blank" rel="noopener">
          Please review the agreement.</a
@@ -101,7 +101,7 @@ export const htmlTemplate = html`
      <div
        class$="agreementsTextBox [[_computeHideAgreementClass(_agreementName, _serverConfig.auth.contributor_agreements)]]"
      >
-        <h3 class="smallHeading">Complete the agreement:</h3>
+        <h3 class="heading-3">Complete the agreement:</h3>
        <iron-input
          bind-value="{{_agreementsText}}"
          placeholder="Enter 'I agree' here"
--- a/polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-item_html.js
+++ b/polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-item_html.js
@@ -23,6 +23,6 @@ export const htmlTemplate = html`
      margin-bottom: var(--spacing-xxl);
    }
  </style>
-  <h2 id="[[anchor]]">[[title]]</h2>
+  <h2 id="[[anchor]]" class="heading-2">[[title]]</h2>
  <slot></slot>
 `;
--- a/polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view_html.js
+++ b/polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view_html.js
@@ -21,6 +21,12 @@ export const htmlTemplate = html`
    :host {
      color: var(--primary-text-color);
    }
+    h2 {
+      font-family: var(--header-font-family);
+      font-size: var(--font-size-h2);
+      font-weight: var(--font-weight-h2);
+      line-height: var(--line-height-h2);
+    }
    .newEmailInput {
      width: 20em;
    }
@@ -94,7 +100,7 @@ export const htmlTemplate = html`
      </ul>
    </gr-page-nav>
    <main class="gr-form-styles">
-      <h1>User Settings</h1>
+      <h1 class="heading-1">User Settings</h1>
      <section class="darkToggle">
        <div class="toggle">
          <paper-toggle-button
--- a/polygerrit-ui/app/elements/shared/gr-dialog/gr-dialog_html.js
+++ b/polygerrit-ui/app/elements/shared/gr-dialog/gr-dialog_html.js
@@ -60,7 +60,7 @@ export const htmlTemplate = html`
    }
  </style>
  <div class="container" on-keydown="_handleKeydown">
-    <header class="font-h3"><slot name="header"></slot></header>
+    <header class="heading-3"><slot name="header"></slot></header>
    <main>
      <div class="overflow-container">
        <slot name="main"></slot>
--- a/polygerrit-ui/app/elements/shared/gr-hovercard-account/gr-hovercard-account_html.js
+++ b/polygerrit-ui/app/elements/shared/gr-hovercard-account/gr-hovercard-account_html.js
@@ -70,7 +70,7 @@ export const htmlTemplate = html`
          <gr-avatar account="[[account]]" image-size="56"></gr-avatar>
        </div>
        <div class="account">
-          <h3 class="name">[[account.name]]</h3>
+          <h3 class="name heading-3">[[account.name]]</h3>
          <div class="email">[[account.email]]</div>
        </div>
      </div>
--- a/polygerrit-ui/app/styles/shared-styles.js
+++ b/polygerrit-ui/app/styles/shared-styles.js
@@ -103,19 +103,19 @@ $_documentContainer.innerHTML = `<dom-module id="shared-styles">
        font-weight: var(--font-weight-normal);
        line-height: var(--line-height-small);
      }
-      h1, .font-h1 {
+      .heading-1 {
        font-family: var(--header-font-family);
        font-size: var(--font-size-h1);
        font-weight: var(--font-weight-h1);
        line-height: var(--line-height-h1);
      }
-      h2, .font-h2 {
+      .heading-2 {
        font-family: var(--header-font-family);
        font-size: var(--font-size-h2);
        font-weight: var(--font-weight-h2);
        line-height: var(--line-height-h2);
      }
-      h3, .font-h3 {
+      .heading-3 {
        font-family: var(--header-font-family);
        font-size: var(--font-size-h3);
        font-weight: var(--font-weight-h3);