[Nearby] Use semantic headings in html.

Use <h1> and <h2> in Nearby pages and dialogs rather than divs to aid
navigation when using screen readers. This includes minor CSS
adjustments on the device name and data usage settings dialogs to match
specs.

Screenshots:
  https://screenshot.googleplex.com/8sbJPa5K7ALz8jt.png
  https://screenshot.googleplex.com/53J93D2XDCxjvjz.png

Fixed: 1148538
Change-Id: I66420f3c4c28f0e5338567b4ed511da6f4f3baac
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2567996Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Commit-Queue: Michael Hansen <hansenmichael@google.com>
Cr-Commit-Position: refs/heads/master@{#832642}

chrome/browser/resources/nearby_share/shared/nearby_page_template.html

@@ -35,11 +35,14 @@
         font-size: 16px;
         font-weight: bold;
         line-height: 24px;
+        margin: 0;
       }
 
       #pageSubTitle {
         font-size: 14px;
+        font-weight: inherit;
         line-height: 20px;
+        margin: 0;
       }
 
       #actions {
@@ -58,8 +61,8 @@
     <div id="pageContainer" role="dialog" aria-modal="true"
         aria-labelledby="pageTitle pageSubTitle">
       <div id="header">
-        <div id="pageTitle">[[title]]</div>
-        <div id="pageSubTitle">[[subTitle]]</div>
+        <h1 id="pageTitle">[[title]]</h1>
+        <h2 id="pageSubTitle">[[subTitle]]</h2>
       </div>
 
       <div id="contentContainer">

chrome/browser/resources/settings/chromeos/nearby_share_page/nearby_share_contact_visibility_dialog.html

@@ -16,24 +16,28 @@
 <dom-module id="nearby-share-contact-visibility-dialog">
   <template>
     <style>
-      div.title {
-        font-weight: 500;
+      h1.title {
+        font-weight: bold;
+        margin: 0;
         padding-block-end: 0;
         padding-block-start: 24px;
       }
 
-      div.header {
+      h2.header {
+        font-size: inherit;
+        font-weight: inherit;
+        margin: 0;
         padding-block-end: 16px;
         padding-inline-start: 20px;
       }
     </style>
     <cr-dialog id="dialog" show-on-attach>
-      <div slot="title" class="title">
+      <h1 slot="title" class="title">
         $i18n{nearbyShareVisibilityDialogTitle}
-      </div>
-      <div slot="header" class="header">
+      </h1>
+      <h2 slot="header" class="header">
         $i18n{nearbyShareVisibilityPageSubtitle}
-      </div>
+      </h2>
       <div slot="body">
         <nearby-contact-visibility settings="{{settings}}">
         </nearby-contact-visibility>

chrome/browser/resources/settings/chromeos/nearby_share_page/nearby_share_data_usage_dialog.html

@@ -12,18 +12,33 @@
 <dom-module id="nearby-share-data-usage-dialog">
   <template>
     <style>
-      cr-radio-button {
-        margin-bottom: 24px;
+      :host {
+        --cr-dialog-width: 340px;
+      }
+
+      h1 {
+        font-size: 16px;
+        font-weight: bold;
+        line-height: 24px;
+        margin: 0;
+        padding-block-end: 0;
+        padding-block-start: 24px;
+      }
+
+      cr-radio-group {
+        margin-block-end: 12px;
+        margin-inline-start: 2px;
       }
 
       .data-usage-name {
         font-weight: 600;
+        padding-block-start: 20px;
       }
     </style>
     <cr-dialog id="dialog">
-      <div slot="title">
+      <h1 slot="title">
         $i18n{nearbyShareDataUsageDialogTitle}
-      </div>
+      </h1>
       <div slot="body">
         <cr-radio-group selected="[[selectedDataUsage_(
             prefs.nearby_sharing.data_usage.value)]]">

chrome/browser/resources/settings/chromeos/nearby_share_page/nearby_share_device_name_dialog.html

@@ -4,18 +4,30 @@
 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="../../shared/nearby_share_settings.html">
 <link rel="import" href="../../shared/nearby_share_settings_behavior.html">
 
 <dom-module id="nearby-share-device-name-dialog">
   <template>
-    <style include="iron-flex"></style>
+    <style>
+      :host {
+        --cr-dialog-width: 340px;
+      }
+
+      h1 {
+        font-size: 16px;
+        font-weight: bold;
+        line-height: 24px;
+        margin: 0;
+        padding-block-end: 24px;
+        padding-block-start: 24px;
+      }
+    </style>
 
     <cr-dialog id="dialog">
-      <div slot="title">
+      <h1 slot="title">
         $i18n{nearbyShareDeviceNameDialogTitle}
-      </div>
+      </h1>
       <div slot="body">
         <cr-input value="[[settings.deviceName]]" on-input="onDeviceNameInput_"
             error-message="[[errorMessage]]"