Devtools: making security origin and overview page accessible + adding tests

Changes: Origin: - 'Origin' text is now a header 1 - 'Connection' text is now a header 2 - 'Certificate' text is now a header 2 - 'Certificate Transparency' text is now a header 2 - 'Show more/less' and 'Show full details' links are now marked as buttons and are keyboard accessible Overview: - 'Security overview' text is now a header 1 - page security description is now a header 2 - 'View x in network panel' link is now marked as a button and is keyboard accessible .devtools-link css changes: https://imgur.com/a/9FtpsU4 link elements to button element change: https://imgur.com/zSMcGVQ CR Bug: https://bugs.chromium.org/p/chromium/issues/detail?id=962686 Change-Id: I3a62e898d7135ace1d8a9c76dfdbad382c928500 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1606195Reviewed-by: Joel Einbinder <einbinder@chromium.org> Commit-Queue: Michael Liao <michael.liao@microsoft.com> Cr-Commit-Position: refs/heads/master@{#672600}

Devtools: making security origin and overview page accessible + adding tests
Changes: Origin: - 'Origin' text is now a header 1 - 'Connection' text is now a header 2 - 'Certificate' text is now a header 2 - 'Certificate Transparency' text is now a header 2 - 'Show more/less' and 'Show full details' links are now marked as buttons and are keyboard accessible Overview: - 'Security overview' text is now a header 1 - page security description is now a header 2 - 'View x in network panel' link is now marked as a button and is keyboard accessible .devtools-link css changes: https://imgur.com/a/9FtpsU4 link elements to button element change: https://imgur.com/zSMcGVQ CR Bug: https://bugs.chromium.org/p/chromium/issues/detail?id=962686 Change-Id: I3a62e898d7135ace1d8a9c76dfdbad382c928500 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1606195Reviewed-by: Joel Einbinder <einbinder@chromium.org> Commit-Queue: Michael Liao <michael.liao@microsoft.com> Cr-Commit-Position: refs/heads/master@{#672600}
ec4778d2 · Michael Liao (WPT) · Commit Bot · d07ccd76 · ec4778d2 · ec4778d2
Commit ec4778d2 authored Jun 26, 2019 by Michael Liao (WPT) Committed by Commit Bot Jun 26, 2019
20 changed files
--- a/third_party/blink/renderer/devtools/front_end/axe_core_test_runner/AxeCoreTestRunner.js
+++ b/third_party/blink/renderer/devtools/front_end/axe_core_test_runner/AxeCoreTestRunner.js
@@ -26,7 +26,7 @@ AxeCoreTestRunner.processAxeResult = function(violations) {
      helpUrl: rule.helpUrl,
      ruleId: rule.id,
      impact: rule.impact,
-      faildedNodes: AxeCoreTestRunner.processAxeResultNodesArray(rule.nodes)
+      failedNodes: AxeCoreTestRunner.processAxeResultNodesArray(rule.nodes)
    };
  });
  return JSON.stringify(result, undefined, 2);

--- a/third_party/blink/renderer/devtools/front_end/security/SecurityPanel.js
+++ b/third_party/blink/renderer/devtools/front_end/security/SecurityPanel.js
--- a/third_party/blink/renderer/devtools/front_end/security/mainView.css
+++ b/third_party/blink/renderer/devtools/front_end/security/mainView.css
@@ -3,6 +3,10 @@
 * found in the LICENSE file.
 */

+.devtools-link {
+  display: inline-block;
+}
+
 .security-main-view {
    -webkit-user-select: text;
    overflow-x: hidden;

--- a/third_party/blink/renderer/devtools/front_end/security/originView.css
+++ b/third_party/blink/renderer/devtools/front_end/security/originView.css
@@ -95,8 +95,12 @@
    padding-bottom: 0;
 }

+.security-origin-view .details-toggle {
+  margin-left: 126px;
+}
+
 .security-origin-view .sct-toggle {
-    padding-left: 143px;
+    margin-left: 145px;
    padding-top: 5px;
 }


--- a/third_party/blink/renderer/devtools/front_end/security/security_strings.grdp
+++ b/third_party/blink/renderer/devtools/front_end/security/security_strings.grdp
@@ -60,9 +60,6 @@
  <message name="IDS_DEVTOOLS_5a70e1c7b4fa71a69851e44cda14dff7" desc="">
    Secure origins
  </message>
-  <message name="IDS_DEVTOOLS_628b50e6d53ec0d0e9b62971872e6b8b" desc="">
-    Show more (<ph name="SANLIST_LENGTH">$1d</ph> total)
-  </message>
  <message name="IDS_DEVTOOLS_62a0282d39568be094470486eaf70c4f" desc="">
    SAN
  </message>
@@ -114,6 +111,9 @@
  <message name="IDS_DEVTOOLS_a7ec70e97f31322dc2e9aaa805b102ab" desc="">
    View <ph name="FILTERREQUESTCOUNT">$1d</ph> request in Network Panel
  </message>
+  <message name="IDS_DEVTOOLS_aa043eca48e5c05602ee440521a2d8fc" desc="">
+    Show more (<ph name="SANLIST_LENGTH">$1s</ph> total)
+  </message>
  <message name="IDS_DEVTOOLS_b92f649b203ca680d444432324771186" desc="">
    This request does not comply with Chrome&apos;s Certificate Transparency policy.
  </message>

--- a/third_party/blink/renderer/devtools/front_end/ui/ARIAUtils.js
+++ b/third_party/blink/renderer/devtools/front_end/ui/ARIAUtils.js
@@ -53,6 +53,14 @@ UI.ARIAUtils.markAsLink = function(element) {
  element.setAttribute('role', 'link');
 };

+/**
+ * @param {!Element} element
+ */
+UI.ARIAUtils.markAsMenuButton = function(element) {
+  UI.ARIAUtils.markAsButton(element);
+  element.setAttribute('aria-haspopup', true);
+};
+
 /**
 * @param {!Element} element
 */

--- a/third_party/blink/web_tests/http/tests/devtools/a11y-axe-core/security/security-origin-a11y-test-expected.txt
+++ b/third_party/blink/web_tests/http/tests/devtools/a11y-axe-core/security/security-origin-a11y-test-expected.txt
+aXe violations: [
+  {
+    "ruleDescription": "Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds",
+    "helpUrl": "https://dequeuniversity.com/rules/axe/3.0/color-contrast?application=axeAPI",
+    "ruleId": "color-contrast",
+    "impact": "serious",
+    "failedNodes": [
+      {
+        "target": [
+          "span:nth-child(2) > span.url-scheme-separator"
+        ],
+        "html": "<span class=\"url-scheme-separator\">://</span>"
+      },
+      {
+        "target": [
+          "#-blink-dev-tools > div:nth-child(6) > .widget.vbox > div > div > div > div > div > .security-origin-view > div:nth-child(4) > table > div:nth-child(1) > div:nth-child(1)"
+        ],
+        "html": "<div>Protocol</div>"
+      },
+      {
+        "target": [
+          "#-blink-dev-tools > div:nth-child(6) > .widget.vbox > div > div > div > div > div > .security-origin-view > div:nth-child(4) > table > div:nth-child(2) > div:nth-child(1)"
+        ],
+        "html": "<div>Key exchange</div>"
+      },
+      {
+        "target": [
+          "#-blink-dev-tools > div:nth-child(6) > .widget.vbox > div > div > div > div > div > .security-origin-view > div:nth-child(4) > table > div:nth-child(3) > div:nth-child(1)"
+        ],
+        "html": "<div>Cipher</div>"
+      },
+      {
+        "target": [
+          "#-blink-dev-tools > div:nth-child(6) > .widget.vbox > div > div > div > div > div > .security-origin-view > div:nth-child(5) > table > div:nth-child(1) > div:nth-child(1)"
+        ],
+        "html": "<div>Subject</div>"
+      },
+      {
+        "target": [
+          "#-blink-dev-tools > div:nth-child(6) > .widget.vbox > div > div > div > div > div > .security-origin-view > div:nth-child(5) > table > div:nth-child(2) > div:nth-child(1)"
+        ],
+        "html": "<div>SAN</div>"
+      },
+      {
+        "target": [
+          "#-blink-dev-tools > div:nth-child(6) > .widget.vbox > div > div > div > div > div > .security-origin-view > div:nth-child(5) > table > div:nth-child(3) > div:nth-child(1)"
+        ],
+        "html": "<div>Valid from</div>"
+      },
+      {
+        "target": [
+          "#-blink-dev-tools > div:nth-child(6) > .widget.vbox > div > div > div > div > div > .security-origin-view > div:nth-child(5) > table > div:nth-child(4) > div:nth-child(1)"
+        ],
+        "html": "<div>Valid until</div>"
+      },
+      {
+        "target": [
+          "#-blink-dev-tools > div:nth-child(6) > .widget.vbox > div > div > div > div > div > .security-origin-view > div:nth-child(5) > table > div:nth-child(5) > div:nth-child(1)"
+        ],
+        "html": "<div>Issuer</div>"
+      },
+      {
+        "target": [
+          "div:nth-child(6) > div.origin-view-section-notes"
+        ],
+        "html": "<div class=\"origin-view-section-notes\">This request complies with Chrome's Certificate Transparency policy.</div>"
+      },
+      {
+        "target": [
+          ".origin-view-notes > div"
+        ],
+        "html": "<div>The security details above are from the first inspected response.</div>"
+      }
+    ]
+  }
+]
+
+
--- a/third_party/blink/web_tests/http/tests/devtools/a11y-axe-core/security/security-origin-a11y-test.js
+++ b/third_party/blink/web_tests/http/tests/devtools/a11y-axe-core/security/security-origin-a11y-test.js
+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+(async function () {
+  await TestRunner.loadModule('security_test_runner');
+  await TestRunner.loadModule('axe_core_test_runner');
+  await TestRunner.showPanel('security');
+
+  const request1 = new SDK.NetworkRequest(0, 'https://foo.test/', 'https://foo.test', 0, 0, null);
+  request1.setSecurityState(Protocol.Security.SecurityState.Secure);
+  const securityDetails = {
+    protocol : 'TLS 1.2',
+    keyExchange : 'Key_Exchange',
+    keyExchangeGroup : '',
+    cipher : 'Cypher',
+    mac : 'Mac',
+    subjectName : 'foo.test',
+    sanList : ['foo.test', '*.test'],
+    issuer : 'Super CA',
+    validFrom : 1490000000,
+    validTo : 2000000000,
+    CertificateId : 0,
+    signedCertificateTimestampList : [],
+    certificateTransparencyCompliance : Protocol.Network.CertificateTransparencyCompliance.Compliant
+  };
+
+  request1.setSecurityDetails(securityDetails);
+  SecurityTestRunner.dispatchRequestFinished(request1);
+  const securityPanel = runtime.sharedInstance(Security.SecurityPanel);
+
+  securityPanel.showOrigin("https://foo.test");
+  await AxeCoreTestRunner.runValidation(securityPanel.contentElement);
+
+  TestRunner.completeTest();
+})();
--- a/third_party/blink/web_tests/http/tests/devtools/a11y-axe-core/security/security-overview-a11y-test-expected.txt
+++ b/third_party/blink/web_tests/http/tests/devtools/a11y-axe-core/security/security-overview-a11y-test-expected.txt
+aXe violations: []
+
+
--- a/third_party/blink/web_tests/http/tests/devtools/a11y-axe-core/security/security-overview-a11y-test.js
+++ b/third_party/blink/web_tests/http/tests/devtools/a11y-axe-core/security/security-overview-a11y-test.js
+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+(async function() {
+  await TestRunner.loadModule('security_test_runner');
+  await TestRunner.loadModule('axe_core_test_runner');
+  await TestRunner.showPanel('security');
+
+  // Using an insecure request since the insecure overview page encompasses the most elements.
+  /** @type {!Protocol.Security.InsecureContentStatus} */
+  const insecureContentStatus = {
+    ranMixedContent: false,
+    displayedMixedContent: false,
+    ranContentWithCertErrors: false,
+    displayedContentWithCertErrors: true,
+    ranInsecureContentStyle: Protocol.Security.SecurityState.Insecure,
+    displayedInsecureContentStyle: Protocol.Security.SecurityState.Neutral
+  };
+  const pageSecurityState = new Security.PageSecurityState(Protocol.Security.SecurityState.Secure, [], insecureContentStatus, null);
+
+  TestRunner.mainTarget.model(Security.SecurityModel).dispatchEventToListeners(
+    Security.SecurityModel.Events.SecurityStateChanged, pageSecurityState);
+  const request = new SDK.NetworkRequest(0, 'http://foo.test', 'https://foo.test', 0, 0, null);
+  request.setBlockedReason(Protocol.Network.BlockedReason.MixedContent);
+  request.mixedContentType = 'blockable';
+  SecurityTestRunner.dispatchRequestFinished(request);
+  const securityPanel = runtime.sharedInstance(Security.SecurityPanel);
+  await AxeCoreTestRunner.runValidation(securityPanel._mainView.contentElement);
+
+  TestRunner.completeTest();
+})();
--- a/third_party/blink/web_tests/http/tests/devtools/security/blocked-mixed-content-expected.txt
+++ b/third_party/blink/web_tests/http/tests/devtools/security/blocked-mixed-content-expected.txt
@@ -10,7 +10,7 @@ Blocked mixed content
        <DIV >
 Your page requested non-secure resources that were blocked.
        </DIV>
-        <DIV class=security-mixed-content link >
+        <DIV class=security-mixed-content devtools-link role=link tabindex=0 >
 View 1 request in Network Panel
        </DIV>
    </DIV>

--- a/third_party/blink/web_tests/http/tests/devtools/security/mixed-content-active-and-passive-reload-expected.txt
+++ b/third_party/blink/web_tests/http/tests/devtools/security/mixed-content-active-and-passive-reload-expected.txt
@@ -44,7 +44,7 @@ Neutral Test Summary
        <DIV >
 Neutral Test Description
        </DIV>
-        <DIV class=security-mixed-content link >
+        <DIV class=security-mixed-content devtools-link role=link tabindex=0 >
 View 1 request in Network Panel
        </DIV>
    </DIV>
@@ -59,7 +59,7 @@ Insecure Test Summary
        <DIV >
 Insecure Test Description
        </DIV>
-        <DIV class=security-mixed-content link >
+        <DIV class=security-mixed-content devtools-link role=link tabindex=0 >
 View 1 request in Network Panel
        </DIV>
    </DIV>

--- a/third_party/blink/web_tests/http/tests/devtools/security/mixed-content-reload-expected.txt
+++ b/third_party/blink/web_tests/http/tests/devtools/security/mixed-content-reload-expected.txt
@@ -29,7 +29,7 @@ Neutral Test Summary
        <DIV >
 Neutral Test Description
        </DIV>
-        <DIV class=security-mixed-content link >
+        <DIV class=security-mixed-content devtools-link role=link tabindex=0 >
 View 1 request in Network Panel
        </DIV>
    </DIV>

--- a/third_party/blink/web_tests/http/tests/devtools/security/origin-view-ct-compliance-expected.txt
+++ b/third_party/blink/web_tests/http/tests/devtools/security/origin-view-ct-compliance-expected.txt
@@ -7,7 +7,7 @@ Panel on origin view:
    <STYLE type=text/css >
    </STYLE>
    <DIV class=title-section >
-        <DIV class=title-section-header >
+        <DIV class=title-section-header role=heading aria-level=1 >
 Origin
        </DIV>
        <DIV class=origin-display >
@@ -26,13 +26,13 @@ foo.test
            </SPAN>
        </DIV>
        <DIV class=view-network-button >
-            <BUTTON class=origin-button text-button type=button >
+            <BUTTON class=origin-button text-button type=button role=link >
 View requests in Network Panel
            </BUTTON>
        </DIV>
    </DIV>
    <DIV class=origin-view-section >
-        <DIV class=origin-view-section-title >
+        <DIV class=origin-view-section-title role=heading aria-level=2 >
 Connection
        </DIV>
        <TABLE class=details-table >
@@ -63,7 +63,7 @@ Cypher with Mac
        </TABLE>
    </DIV>
    <DIV class=origin-view-section >
-        <DIV class=origin-view-section-title >
+        <DIV class=origin-view-section-title role=heading aria-level=2 >
 Certificate
        </DIV>
        <TABLE class=details-table >
@@ -118,7 +118,7 @@ Super CA
                <DIV >
                </DIV>
                <DIV >
-                    <BUTTON class=origin-button text-button type=button >
+                    <BUTTON class=origin-button text-button type=button role=button aria-haspopup=true >
 Open full certificate details
                    </BUTTON>
                </DIV>
@@ -126,7 +126,7 @@ Open full certificate details
        </TABLE>
    </DIV>
    <DIV class=origin-view-section >
-        <DIV class=origin-view-section-title >
+        <DIV class=origin-view-section-title role=heading aria-level=2 >
 Certificate Transparency
        </DIV>
        <TABLE class=details-table sct-summary >

--- a/third_party/blink/web_tests/http/tests/devtools/security/origin-view-noncryptographic-secure-origin-expected.txt
+++ b/third_party/blink/web_tests/http/tests/devtools/security/origin-view-noncryptographic-secure-origin-expected.txt
@@ -7,7 +7,7 @@ Panel on origin view:
    <STYLE type=text/css >
    </STYLE>
    <DIV class=title-section >
-        <DIV class=title-section-header >
+        <DIV class=title-section-header role=heading aria-level=1 >
 Origin
        </DIV>
        <DIV class=origin-display >
@@ -26,13 +26,13 @@ test
            </SPAN>
        </DIV>
        <DIV class=view-network-button >
-            <BUTTON class=origin-button text-button type=button >
+            <BUTTON class=origin-button text-button type=button role=link >
 View requests in Network Panel
            </BUTTON>
        </DIV>
    </DIV>
    <DIV class=origin-view-section >
-        <DIV class=origin-view-section-title >
+        <DIV class=origin-view-section-title role=heading aria-level=2 >
 Secure
        </DIV>
        <DIV >

--- a/third_party/blink/web_tests/http/tests/devtools/security/origin-view-then-interstitial-expected.txt
+++ b/third_party/blink/web_tests/http/tests/devtools/security/origin-view-then-interstitial-expected.txt
@@ -3,7 +3,7 @@ Tests that the panel transitions to the overview view when navigating to an inte
 Before selecting origin view:
 <DIV class=widget vbox security-main-view >
    <DIV class=security-summary >
-        <DIV class=security-summary-section-title >
+        <DIV class=security-summary-section-title role=heading aria-level=1 >
 Security overview
        </DIV>
        <DIV class=lock-spectrum >
@@ -20,7 +20,7 @@ Security overview
                </DIV>
            </DIV>
        </DIV>
-        <DIV class=security-summary-text >
+        <DIV class=security-summary-text role=heading aria-level=2 >
        </DIV>
    </DIV>
    <DIV class=security-explanation-list security-explanations-main >
@@ -35,7 +35,7 @@ Panel on origin view before interstitial:
    <STYLE type=text/css >
    </STYLE>
    <DIV class=title-section >
-        <DIV class=title-section-header >
+        <DIV class=title-section-header role=heading aria-level=1 >
 Origin
        </DIV>
        <DIV class=origin-display >
@@ -54,13 +54,13 @@ foo.test
            </SPAN>
        </DIV>
        <DIV class=view-network-button >
-            <BUTTON class=origin-button text-button type=button >
+            <BUTTON class=origin-button text-button type=button role=link >
 View requests in Network Panel
            </BUTTON>
        </DIV>
    </DIV>
    <DIV class=origin-view-section >
-        <DIV class=origin-view-section-title >
+        <DIV class=origin-view-section-title role=heading aria-level=2 >
 Not secure
        </DIV>
        <DIV >
@@ -71,7 +71,7 @@ Your connection to this origin is not secure.
 After interstitial is shown:
 <DIV class=widget vbox security-main-view >
    <DIV class=security-summary >
-        <DIV class=security-summary-section-title >
+        <DIV class=security-summary-section-title role=heading aria-level=1 >
 Security overview
        </DIV>
        <DIV class=lock-spectrum >
@@ -88,7 +88,7 @@ Security overview
                </DIV>
            </DIV>
        </DIV>
-        <DIV class=security-summary-text >
+        <DIV class=security-summary-text role=heading aria-level=2 >
        </DIV>
    </DIV>
    <DIV class=security-explanation-list security-explanations-main >

--- a/third_party/blink/web_tests/http/tests/devtools/security/security-blocked-mixed-content-expected.txt
+++ b/third_party/blink/web_tests/http/tests/devtools/security/security-blocked-mixed-content-expected.txt
@@ -10,7 +10,7 @@ Blocked mixed content
        <DIV >
 Your page requested non-secure resources that were blocked.
        </DIV>
-        <DIV class=security-mixed-content link >
+        <DIV class=security-mixed-content devtools-link role=link tabindex=0 >
 View 1 request in Network Panel
        </DIV>
    </DIV>

--- a/third_party/blink/web_tests/http/tests/devtools/security/security-details-updated-with-security-state-expected.txt
+++ b/third_party/blink/web_tests/http/tests/devtools/security/security-details-updated-with-security-state-expected.txt
@@ -51,7 +51,7 @@ Origin view ------------------------------------
    <STYLE type=text/css >
    </STYLE>
    <DIV class=title-section >
-        <DIV class=title-section-header >
+        <DIV class=title-section-header role=heading aria-level=1 >
 Origin
        </DIV>
        <DIV class=origin-display >
@@ -70,13 +70,13 @@ foo.test
            </SPAN>
        </DIV>
        <DIV class=view-network-button >
-            <BUTTON class=origin-button text-button type=button >
+            <BUTTON class=origin-button text-button type=button role=link >
 View requests in Network Panel
            </BUTTON>
        </DIV>
    </DIV>
    <DIV class=origin-view-section >
-        <DIV class=origin-view-section-title >
+        <DIV class=origin-view-section-title role=heading aria-level=2 >
 Connection
        </DIV>
        <TABLE class=details-table >
@@ -107,7 +107,7 @@ Cypher with Mac
        </TABLE>
    </DIV>
    <DIV class=origin-view-section >
-        <DIV class=origin-view-section-title >
+        <DIV class=origin-view-section-title role=heading aria-level=2 >
 Certificate
        </DIV>
        <TABLE class=details-table >
@@ -162,7 +162,7 @@ Super CA
                <DIV >
                </DIV>
                <DIV >
-                    <BUTTON class=origin-button text-button type=button >
+                    <BUTTON class=origin-button text-button type=button role=button aria-haspopup=true >
 Open full certificate details
                    </BUTTON>
                </DIV>

--- a/third_party/blink/web_tests/http/tests/devtools/security/security-explanation-ordering-expected.txt
+++ b/third_party/blink/web_tests/http/tests/devtools/security/security-explanation-ordering-expected.txt
@@ -10,7 +10,7 @@ Valid Certificate
        <DIV >
 The connection to this site is using a valid, trusted server certificate.
        </DIV>
-        <BUTTON class=security-certificate-button text-button type=button >
+        <BUTTON class=security-certificate-button text-button type=button role=button aria-haspopup=true >
 View certificate
        </BUTTON>
    </DIV>

--- a/third_party/blink/web_tests/http/tests/devtools/security/security-summary-expected.txt
+++ b/third_party/blink/web_tests/http/tests/devtools/security/security-summary-expected.txt
 Tests specifying a security summary for the Security panel overview.

-<DIV class=security-summary-text >
+<DIV class=security-summary-text role=heading aria-level=2 >
 Test: Summary Override Text
 </DIV>