browser/components/protections/content/protections.html
author Marco Zehe <mzehe@mozilla.com>
Thu, 15 Aug 2019 14:29:48 +0000
changeset 488243 5104e61fa2b99ffd00c676a2af080763f2e319c6
parent 488235 e8700fab7cb87b760e78b469ff48d7c731092adb
child 488749 6c559e878194dd245306fdcd0924fd29a475bd7d
permissions -rw-r--r--
Bug 1574082 - Improve the labelling of the table and radio buttons, r=mtigley This adds some polish to the existing markup, making it all a bit more intuitive. 1. Associate the graph legend to the fake table so it becomes kind of the caption for that table for screen reader users. Screen reader users will then hear something like "Table showing a graph of .." plus the table information they already get since bug 1573197 landed. 2. Actually combine the number and tab's title into a spoken label for screen readers on each radio button, and for the description, use the explanatory paragraph's content. That way, screen reader users can just tab and arrow to each item in focus mode and hear all the relevant information at once without having to skip back and forth between the elements. Differential Revision: https://phabricator.services.mozilla.com/D42082

<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Security-Policy" content="default-src chrome: blob:">
    <link rel="localization" href="browser/branding/brandings.ftl"/>
    <link rel="localization" href="branding/brand.ftl"/>
    <link rel="localization" href="browser/branding/sync-brand.ftl">
    <link rel="localization" href="browser/protections.ftl">
    <link rel="stylesheet" href="chrome://global/skin/in-content/common.css">
    <link rel="stylesheet" href="chrome://browser/content/protections.css">
    <link rel="icon" href="chrome://browser/skin/controlcenter/dashboard.svg">
    <script type="module" src="chrome://browser/content/protections.js"></script>
    <script type="module" src="chrome://browser/content/lockwise-card.js"></script>
    <script type="module" src="chrome://browser/content/monitor-card.js"></script>
    <title data-l10n-id="protection-report-page-title"></title>
  </head>

  <body>
    <div id="report-content">
      <h1 id="report-title" data-l10n-id="protection-report-content-title"></h1>
      <div class="card card-no-hover etp-card">
        <div class="card-header">
          <div class="icon"></div>
          <div class="wrapper">
            <h2 class="card-title" data-l10n-id="etp-card-title"></h2>
            <p class="content" data-l10n-id="etp-card-content"></p>
            <p id="protection-details" role="link" tabindex="0" data-l10n-title="go-to-privacy-settings"></p>
          </div>
        </div>
        <div class="card-body">
          <div class="body-wrapper">
            <p id="graph-week-summary"></p>
            <div id="graph-wrapper">
              <div id="graph" role="table" aria-labelledby="graphLegendDescription"></div>
              <div id="legend">
                <label id="graphLegendDescription" data-l10n-id="graph-legend-description"></label>
                <input id="tab-social" data-type="social" type="radio" name="tabs" aria-labelledby="socialLabel socialTitle" aria-describedby="socialContent" checked>
                <label id="socialLabel" for="tab-social" data-type="social"></label>

                <input id="tab-cookie" data-type="cookie" type="radio" name="tabs" aria-labelledby="cookieLabel cookieTitle" aria-describedby="cookieContent">
                <label id="cookieLabel" for="tab-cookie" data-type="cookie"></label>

                <input id="tab-tracker" data-type="tracker" type="radio" name="tabs" aria-labelledby="trackerLabel trackerTitle" aria-describedby="trackerContent">
                <label id="trackerLabel" for="tab-tracker" data-type="tracker"></label>

                <input id="tab-fingerprinter" data-type="fingerprinter" type="radio" name="tabs" aria-labelledby="fingerprinterLabel fingerprinterTitle" aria-describedby="fingerprinterContent">
                <label id="fingerprinterLabel" for="tab-fingerprinter" data-type="fingerprinter"></label>

                <input id="tab-cryptominer" data-type="cryptominer" type="radio" name="tabs" aria-labelledby="cryptominerLabel cryptominerTitle" aria-describedby="cryptominerContent">
                <label id="cryptominerLabel" for="tab-cryptominer" data-type="cryptominer"></label>
                <div id=highlight></div>
                <div id=highlight-hover></div>
                <div id="social" class="tab-content">
                  <p id="socialTitle" class="content-title" data-l10n-id="social-tab-title"></p>
                  <p id="socialContent" data-l10n-id="social-tab-contant">
                    <a target="_blank" id="social-link" data-l10n-name="learn-more-link"></a>
                  </p>
                </div>
                <div id="cookie" class="tab-content">
                  <p id="cookieTitle" class="content-title" data-l10n-id="cookie-tab-title"></p>
                  <p id="cookieContent" data-l10n-id="cookie-tab-content">
                    <a target="_blank" id="cookie-link" data-l10n-name="learn-more-link"></a>
                  </p>
                </div>
                <div id="tracker" class="tab-content">
                  <p id="trackerTitle" class="content-title" data-l10n-id="tracker-tab-title"></p>
                  <p id="trackerContent" data-l10n-id="tracker-tab-content">
                    <a target="_blank" id="tracker-link" data-l10n-name="learn-more-link"></a>
                  </p>
                </div>
                <div id="fingerprinter" class="tab-content">
                  <p id="fingerprinterTitle" class="content-title" data-l10n-id="fingerprinter-tab-title"></p>
                  <p id="fingerprinterContent" data-l10n-id="fingerprinter-tab-content">
                    <a target="_blank" id="fingerprinter-link" data-l10n-name="learn-more-link"></a>
                  </p>
                </div>
                <div id="cryptominer" class="tab-content">
                  <p id="cryptominerTitle" class="content-title" data-l10n-id="cryptominer-tab-title"></p>
                  <p id="cryptominerContent" data-l10n-id="cryptominer-tab-content">
                    <a target="_blank" id="cryptominer-link" data-l10n-name="learn-more-link"></a>
                  </p>
                </div>
              </div>
            </div>
            <div id="graph-total-summary"></div>
          </div>
        </div>
      </div>
     <!-- Markup for Monitor card. -->
      <section class="card card-no-hover monitor-card hidden">
          <div class="card-header">
            <div class="icon"></div>
            <div class="wrapper">
              <h2 id="monitor-title" class="card-title" data-l10n-id="monitor-title"></h2>
              <p id="monitor-header-content" class="content">
                <span>
                  <!-- Insert Monitor header content here. -->
                </span>
                <a target="_blank" href="" id="monitor-link" data-l10n-id="monitor-link"></a>
              </p>
              <span class="inline-text-icon monitor-scanned-text" data-l10n-id="auto-scan"></span>
            </div>
            <a target="_blank" id="sign-up-for-monitor-link">
              <!-- Insert Monitor link content here. -->
            </a>
          </div>
          <div class="card-body hidden">
            <div class="body-wrapper">
              <div id="monitor-body-content">
                <div class="monitor-block email">
                  <span class="monitor-stat">
                    <span class="monitor-icon"></span>
                    <span data-type="stored-emails">
                      <!-- Display number of stored emails here. -->
                    </span>
                  </span>
                  <span id="info-monitored-addresses" class="info-text"></span>
                </div>
                <div class="monitor-block breaches">
                  <span class="monitor-stat">
                    <span class="monitor-icon"></span>
                    <span data-type="known-breaches">
                      <!-- Display number of known breaches here. -->
                    </span>
                  </span>
                  <span id="info-known-breaches" class="info-text"></span>
                </div>
                <div class="monitor-block passwords">
                  <span class="monitor-stat">
                      <span class="monitor-icon"></span>
                      <span data-type="exposed-passwords">
                        <!-- Display number of exposed passwords here. -->
                      </span>
                  </span>
                  <span id="info-exposed-passwords" class="info-text"></span>
                </div>
                <div id="full-report-link" class="monitor-view-full-report" data-l10n-id="full-report-link">
                  <a target="_blank" id="monitor-inline-link" data-l10n-name="monitor-inline-link" href=""></a>
                </div>
                <div class="monitor-breached-passwords hidden">
                  <span data-type="breached-lockwise-passwords" class="number-of-breaches block">
                    <!-- Display number of exposed stored passwords here. -->
                  </span>
                  <span id="password-warning">
                    <a target="_blank" href="about:logins" id="lockwise-link" data-l10n-name="lockwise-link" data-l10n-title="go-to-saved-logins"></a>
                  </span>
                </div>
              </div>
            </div>
          </div>
      </section>
      <!-- Markup for Lockwise card. -->
      <section class="card card-no-hover lockwise-card hidden">
        <div class="card-header">
          <div class="icon"></div>
          <div class="wrapper">
            <h2 id="lockwise-title" class="card-title">
              <!-- Insert Lockwise card title here. -->
            </h2>
            <p id="lockwise-header-content" class="content">
              <!-- Insert Lockwise header content here. -->
            </p>
          </div>
          <button id="open-about-logins-button" class="primary" data-l10n-id="open-about-logins-button" data-l10n-title="go-to-saved-logins"></button>
        </div>
        <div class="card-body hidden">
          <div id="lockwise-body-content" class="body-wrapper">
            <div class="no-logins hidden">
                <div class="lockwise-mobile-app-icon"></div>
                <span data-l10n-id="lockwise-no-logins-content">
                  <a target="_blank" id="lockwise-inline-link" data-l10n-name="lockwise-inline-link" href=""></a>
                </span>
            </div>
            <div class="has-logins hidden">
              <span class="number-of-logins block">
                <!-- Display number of stored logins here. -->
              </span>
              <span id="lockwise-passwords-stored" class="inline-text-icon passwords-stored-text">
                 <!-- Display message for stored logins here. -->
                 <a target="_blank" id="lockwise-how-it-works" data-l10n-name="lockwise-how-it-works" href=""></a>
              </span>
              <span class="number-of-synced-devices block">
                <!-- Display number of synced devices here. -->
              </span>
              <span class="inline-text-icon synced-devices-text">
                <span>
                  <!-- Display message for status of synced devices here. -->
                </span>
                <a id="turn-on-sync" tabindex="0" class="hidden" href="" data-l10n-id="turn-on-sync"></a>
                <a id="manage-devices" target="_blank" class="hidden" href="" data-l10n-id="manage-devices"></a>
              </span>
            </div>
          </div>
        </div>
      </section>
    </div>
  </body>
</html>