Secure DNS setting formatting tweaks.

The automatic mode radio button description is broken into two lines.
The privacy policy line and custom text field are left-aligned with the
dropdown menu. This cl also adds accessibility labels.

Bug: 1040145
Change-Id: I4b1d62f91c87e328f5869e2e77740127a9fd196f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2087703Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
Commit-Queue: Katharine Daly <dalyk@google.com>
Cr-Commit-Position: refs/heads/master@{#749378}

chrome/app/settings_strings.grdp

@@ -1690,7 +1690,7 @@
     Enhanced Protection
   </message>
   <message name="IDS_SETTINGS_SAFEBROWSING_ENHANCED_DESC" desc="Description of safe browsing enhanced protection mode">
-    Faster, proactive protection against dangerous websites, downloads, and extensions. Warns you about password breaches. Requires browsing data to be sent to Google. 
+    Faster, proactive protection against dangerous websites, downloads, and extensions. Warns you about password breaches. Requires browsing data to be sent to Google.
   </message>
   <message name="IDS_SETTINGS_SAFEBROWSING_ENHANCED_BULLET_ONE" desc="First bullet point under the safe browsing enhanced protection mode">
     Predicts and warns you about dangerous events before they happen.
@@ -1778,7 +1778,16 @@
     Determines how to connect to websites over a secure connection
   </message>
   <message name="IDS_SETTINGS_AUTOMATIC_MODE_DESCRIPTION" desc="Text of the radio button that puts secure DNS in auto-upgrade mode">
-    With your current service provider. Secure DNS may not be available all the time.
+    With your current service provider
+  </message>
+  <message name="IDS_SETTINGS_AUTOMATIC_MODE_DESCRIPTION_SECONDARY" desc="Secondary, continued explanation of the radio button that puts secure DNS in auto-upgrade mode">
+    Secure DNS may not be available all the time
+  </message>
+  <message name="IDS_SETTINGS_SECURE_MODE_DESCRIPTION_ACCESSIBILITY_LABEL" desc="Accessibility label for the radio button that puts secure DNS in secure mode">
+    With a provider of your choice
+  </message>
+  <message name="IDS_SETTINGS_SECURE_DNS_DROPDOWN_ACCESSIBILITY_LABEL" desc="Accessibility label for the dropdown menu containing secure resolvers">
+    Provider options
   </message>
   <message name="IDS_SETTINGS_SECURE_DROPDOWN_MODE_DESCRIPTION" desc="Text of the radio button that allows a secure resolver to be selected from a dropdown menu">
     With

chrome/browser/resources/settings/privacy_page/secure_dns.html

@@ -17,13 +17,36 @@
 <dom-module id="settings-secure-dns">
   <template>
     <style include="settings-shared md-select">
-      #secureResolverSelect {
-        margin-inline-start: 12px;
+      #automaticRadioButton {
+        align-items: flex-start;
+        padding: 6px 0;
+        --cr-radio-button-disc-margin-block-start: calc(
+            (1.54em /* line-height */ - var(--cr-radio-button-size)) / 2);
       }
 
       #secureResolverSelectRadioButton {
         align-items: flex-start;
-        --cr-radio-button-disc-margin-block-start: 1.25em;
+        --cr-radio-button-disc-margin-block-start: calc(
+            (1.54em /* line-height */ + 12px /* md-select padding */ -
+             var(--cr-radio-button-size)) / 2);
+      }
+
+      #secureRadioButtonItem {
+        align-items: baseline;
+      }
+
+      #secureRadioButtonItemInner {
+        margin-inline-start: 0.5em;
+        width: 80%;
+      }
+
+      #privacyPolicy {
+        display: none;
+        padding: 8px /* md-select left padding */;
+      }
+
+      #secureDnsInput {
+        margin-top: 6px;
       }
     </style>
     <settings-toggle-button
@@ -37,28 +60,34 @@
         selected="{{secureDnsRadio_}}"
         on-selected-changed="onRadioSelectionChanged_"
         hidden="[[!showRadioGroup_]]">
-      <cr-radio-button class="list-item" name="[[secureDnsModeEnum_.AUTOMATIC]]"
+      <cr-radio-button id="automaticRadioButton" class="list-item"
+          name="[[secureDnsModeEnum_.AUTOMATIC]]"
           label="$i18n{secureDnsAutomaticModeDescription}">
+        <div class="secondary">
+          $i18n{secureDnsAutomaticModeDescriptionSecondary}
+        </div>
       </cr-radio-button>
       <cr-radio-button id="secureResolverSelectRadioButton" class="list-item"
-          name="[[secureDnsModeEnum_.SECURE]]">
-        <div class="list-item">
-          <div>$i18n{secureDnsSecureDropdownModeDescription}</div>
-          <select id="secureResolverSelect" class="md-select"
-              on-click="stopEventPropagation_"
-              on-change="onDropdownSelectionChanged_">
-            <template is="dom-repeat" items="[[resolverOptions_]]">
-              <option value="[[item.value]]">[[item.name]]</option>
-            </template>
-          </select>
-        </div>
-        <div id="privacyPolicy" class="secondary"
-            inner-h-t-m-l="[[privacyPolicyString_]]"
-            hidden="[[!showPrivacyPolicyLine_]]"></div>
-        <secure-dns-input id="secureDnsInput" value="[[secureDnsInputValue_]]"
-            hidden="[[showPrivacyPolicyLine_]]"
-            on-value-update="onSecureDnsInputEvaluated_"
-            on-click="stopEventPropagation_">
+          name="[[secureDnsModeEnum_.SECURE]]"
+          aria-label="$i18n{secureDnsSecureModeA11yLabel}">
+        <div id="secureRadioButtonItem" class="list-item">
+          $i18n{secureDnsSecureDropdownModeDescription}
+          <div id="secureRadioButtonItemInner">
+            <select id="secureResolverSelect" class="md-select"
+                aria-label="$i18n{secureDnsDropdownA11yLabel}"
+                on-click="stopEventPropagation_"
+                on-change="onDropdownSelectionChanged_">
+              <template is="dom-repeat" items="[[resolverOptions_]]">
+                <option value="[[item.value]]">[[item.name]]</option>
+              </template>
+            </select>
+            <div id="privacyPolicy" class="secondary"
+                inner-h-t-m-l="[[privacyPolicyString_]]"></div>
+            <secure-dns-input id="secureDnsInput"
+                value="[[secureDnsInputValue_]]"
+                on-value-update="onSecureDnsInputEvaluated_"
+                on-click="stopEventPropagation_">
+          </div>
         </secure-dns-input>
       </cr-radio-button>
     </cr-radio-group>

chrome/browser/resources/settings/privacy_page/secure_dns.js

@@ -81,12 +81,6 @@ Polymer({
      */
     resolverOptions_: Array,
 
-    /**
-     * Whether the privacy policy line should be displayed.
-     * @private
-     */
-    showPrivacyPolicyLine_: Boolean,
-
     /**
      * String displaying the privacy policy of the resolver selected in the
      * dropdown menu.
@@ -353,12 +347,14 @@ Polymer({
     // If the selected item is the custom provider option, hide the privacy
     // policy line.
     if (this.$.secureResolverSelect.value === 'custom') {
-      this.showPrivacyPolicyLine_ = false;
+      this.$.privacyPolicy.style.display = 'none';
+      this.$.secureDnsInput.style.display = 'block';
       return;
     }
 
     // Otherwise, display the corresponding privacy policy.
-    this.showPrivacyPolicyLine_ = true;
+    this.$.privacyPolicy.style.display = 'block';
+    this.$.secureDnsInput.style.display = 'none';
     const resolver = this.resolverOptions_.find(
         r => r.value === this.$.secureResolverSelect.value);
     if (!resolver) {

chrome/browser/ui/webui/settings/settings_localized_strings_provider.cc

@@ -1086,6 +1086,12 @@ void AddPrivacyStrings(content::WebUIDataSource* html_source,
        IDS_SETTINGS_SECURE_DNS_DISABLED_FOR_PARENTAL_CONTROL},
       {"secureDnsAutomaticModeDescription",
        IDS_SETTINGS_AUTOMATIC_MODE_DESCRIPTION},
+      {"secureDnsAutomaticModeDescriptionSecondary",
+       IDS_SETTINGS_AUTOMATIC_MODE_DESCRIPTION_SECONDARY},
+      {"secureDnsSecureModeA11yLabel",
+       IDS_SETTINGS_SECURE_MODE_DESCRIPTION_ACCESSIBILITY_LABEL},
+      {"secureDnsDropdownA11yLabel",
+       IDS_SETTINGS_SECURE_DNS_DROPDOWN_ACCESSIBILITY_LABEL},
       {"secureDnsSecureDropdownModeDescription",
        IDS_SETTINGS_SECURE_DROPDOWN_MODE_DESCRIPTION},
       {"secureDnsSecureDropdownModePrivacyPolicy",

chrome/test/data/webui/settings/secure_dns_interactive_test.js

@@ -186,9 +186,10 @@ suite('SettingsSecureDnsInteractive', function() {
     Polymer.dom.flush();
     assertEquals(settings.SecureDnsMode.SECURE, secureDnsRadioGroup.selected);
     assertEquals(0, testElement.$$('#secureResolverSelect').selectedIndex);
-    assertTrue(testElement.$$('#privacyPolicy').hasAttribute('hidden'));
-    assertFalse(testElement.$$('#secureDnsInput').hasAttribute('hidden'));
-    assertFalse(testElement.$$('#secureDnsInput').matches(':focus-within'));
+    assertEquals(
+        'none', getComputedStyle(testElement.$$('#privacyPolicy')).display);
+    assertEquals(
+        'block', getComputedStyle(testElement.$$('#secureDnsInput')).display);
     assertEquals('custom', testElement.$$('#secureDnsInput').value);
   });
 
@@ -206,7 +207,8 @@ suite('SettingsSecureDnsInteractive', function() {
     const secureDnsInput = testElement.$$('#secureDnsInput');
 
     assertEquals(1, dropdownMenu.selectedIndex);
-    assertFalse(privacyPolicyLine.hasAttribute('hidden'));
+    assertEquals(
+        'block', getComputedStyle(testElement.$$('#privacyPolicy')).display);
     assertEquals(
         resolverList[1].policy, privacyPolicyLine.querySelector('a').href);
 
@@ -214,7 +216,8 @@ suite('SettingsSecureDnsInteractive', function() {
     dropdownMenu.value = resolverList[2].value;
     dropdownMenu.dispatchEvent(new Event('change'));
     assertEquals(2, dropdownMenu.selectedIndex);
-    assertFalse(privacyPolicyLine.hasAttribute('hidden'));
+    assertEquals(
+        'block', getComputedStyle(testElement.$$('#privacyPolicy')).display);
     assertEquals(
         resolverList[2].policy, privacyPolicyLine.querySelector('a').href);
     assertEquals(
@@ -225,7 +228,8 @@ suite('SettingsSecureDnsInteractive', function() {
     dropdownMenu.value = 'custom';
     dropdownMenu.dispatchEvent(new Event('change'));
     assertEquals(0, dropdownMenu.selectedIndex);
-    assertTrue(privacyPolicyLine.hasAttribute('hidden'));
+    assertEquals(
+        'none', getComputedStyle(testElement.$$('#privacyPolicy')).display);
     assertTrue(secureDnsInput.matches(':focus-within'));
     assertFalse(secureDnsInput.isInvalid());
     assertEquals(settings.SecureDnsMode.SECURE, secureDnsRadioGroup.selected);
@@ -271,7 +275,8 @@ suite('SettingsSecureDnsInteractive', function() {
     dropdownMenu.value = resolverList[3].value;
     dropdownMenu.dispatchEvent(new Event('change'));
     assertEquals(3, dropdownMenu.selectedIndex);
-    assertFalse(privacyPolicyLine.hasAttribute('hidden'));
+    assertEquals(
+        'block', getComputedStyle(testElement.$$('#privacyPolicy')).display);
     assertEquals(
         resolverList[3].policy, privacyPolicyLine.querySelector('a').href);
     assertEquals(
@@ -294,7 +299,8 @@ suite('SettingsSecureDnsInteractive', function() {
     Polymer.dom.flush();
     assertFalse(secureDnsRadioGroup.hidden);
     assertEquals(3, dropdownMenu.selectedIndex);
-    assertFalse(privacyPolicyLine.hasAttribute('hidden'));
+    assertEquals(
+        'block', getComputedStyle(testElement.$$('#privacyPolicy')).display);
     assertEquals(
         resolverList[3].policy, privacyPolicyLine.querySelector('a').href);
 
@@ -303,7 +309,8 @@ suite('SettingsSecureDnsInteractive', function() {
     assertFalse(secureDnsRadioGroup.hidden);
     assertEquals(settings.SecureDnsMode.SECURE, secureDnsRadioGroup.selected);
     assertEquals(3, dropdownMenu.selectedIndex);
-    assertFalse(privacyPolicyLine.hasAttribute('hidden'));
+    assertEquals(
+        'block', getComputedStyle(testElement.$$('#privacyPolicy')).display);
     assertEquals(
         resolverList[3].policy, privacyPolicyLine.querySelector('a').href);
     assertEquals(
@@ -323,7 +330,7 @@ suite('SettingsSecureDnsInteractive', function() {
     Polymer.dom.flush();
     const secureDnsRadioGroup = testElement.$$('#secureDnsRadioGroup');
     const secureDnsInput = testElement.$$('#secureDnsInput');
-    assertFalse(secureDnsInput.hasAttribute('hidden'));
+    assertEquals('block', getComputedStyle(secureDnsInput).display);
     assertFalse(secureDnsInput.matches(':focus-within'));
     assertFalse(secureDnsInput.isInvalid());
     assertEquals('https://dns.example/dns-query', secureDnsInput.value);
@@ -353,7 +360,7 @@ suite('SettingsSecureDnsInteractive', function() {
       managementMode: settings.SecureDnsUiManagementMode.NO_OVERRIDE,
     });
     Polymer.dom.flush();
-    assertFalse(secureDnsInput.hasAttribute('hidden'));
+    assertEquals('block', getComputedStyle(secureDnsInput).display);
     assertFalse(secureDnsInput.matches(':focus-within'));
     assertTrue(secureDnsInput.isInvalid());
     assertEquals(invalidEntry, secureDnsInput.value);
@@ -411,7 +418,7 @@ suite('SettingsSecureDnsInteractive', function() {
       managementMode: settings.SecureDnsUiManagementMode.NO_OVERRIDE,
     });
     Polymer.dom.flush();
-    assertFalse(secureDnsInput.hasAttribute('hidden'));
+    assertEquals('block', getComputedStyle(secureDnsInput).display);
     assertFalse(secureDnsInput.matches(':focus-within'));
     assertFalse(secureDnsInput.isInvalid());
     assertEquals(