tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

Checks.js (2985B)

      1 /* This Source Code Form is subject to the terms of the Mozilla Public
      2 * License, v. 2.0. If a copy of the MPL was not distributed with this
      3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
      4 "use strict";
      5 
      6 // React
      7 const {
      8  Component,
      9  createFactory,
     10 } = require("resource://devtools/client/shared/vendor/react.mjs");
     11 const {
     12  connect,
     13 } = require("resource://devtools/client/shared/vendor/react-redux.js");
     14 const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.mjs");
     15 const {
     16  div,
     17 } = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
     18 
     19 const List = createFactory(
     20  require("resource://devtools/client/shared/components/List.js").List
     21 );
     22 const ColorContrastCheck = createFactory(
     23  require("resource://devtools/client/accessibility/components/ColorContrastAccessibility.js")
     24    .ColorContrastCheck
     25 );
     26 const TextLabelCheck = createFactory(
     27  require("resource://devtools/client/accessibility/components/TextLabelCheck.js")
     28 );
     29 const KeyboardCheck = createFactory(
     30  require("resource://devtools/client/accessibility/components/KeyboardCheck.js")
     31 );
     32 const {
     33  L10N,
     34 } = require("resource://devtools/client/accessibility/utils/l10n.js");
     35 
     36 const {
     37  accessibility: { AUDIT_TYPE },
     38 } = require("resource://devtools/shared/constants.js");
     39 
     40 function EmptyChecks() {
     41  return div(
     42    {
     43      className: "checks-empty",
     44      role: "presentation",
     45      tabIndex: "-1",
     46    },
     47    L10N.getStr("accessibility.checks.empty2")
     48  );
     49 }
     50 
     51 // Component that is responsible for rendering accessible audit data in the a11y panel
     52 // sidebar.
     53 class Checks extends Component {
     54  static get propTypes() {
     55    return {
     56      audit: PropTypes.object,
     57      labelledby: PropTypes.string.isRequired,
     58    };
     59  }
     60 
     61  [AUDIT_TYPE.CONTRAST](contrastRatio) {
     62    return ColorContrastCheck(contrastRatio);
     63  }
     64 
     65  [AUDIT_TYPE.KEYBOARD](keyboardCheck) {
     66    return KeyboardCheck(keyboardCheck);
     67  }
     68 
     69  [AUDIT_TYPE.TEXT_LABEL](textLabelCheck) {
     70    return TextLabelCheck(textLabelCheck);
     71  }
     72 
     73  render() {
     74    const { audit, labelledby } = this.props;
     75    if (!audit) {
     76      return EmptyChecks();
     77    }
     78 
     79    const items = [];
     80    for (const name in audit) {
     81      // There are going to be various audit reports for this object, sent by the server.
     82      // Iterate over them and delegate rendering to the method with the corresponding
     83      // name.
     84      if (audit[name] && this[name]) {
     85        items.push({
     86          component: this[name](audit[name]),
     87          className: name,
     88          key: name,
     89        });
     90      }
     91    }
     92 
     93    if (items.length === 0) {
     94      return EmptyChecks();
     95    }
     96 
     97    return div(
     98      {
     99        className: "checks",
    100        role: "presentation",
    101        tabIndex: "-1",
    102      },
    103      List({ items, labelledby })
    104    );
    105  }
    106 }
    107 
    108 const mapStateToProps = ({ details }) => {
    109  const { audit } = details;
    110  if (!audit) {
    111    return {};
    112  }
    113 
    114  return { audit };
    115 };
    116 
    117 module.exports = connect(mapStateToProps)(Checks);