tor-browser

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

Check.js (4044B)

      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  PureComponent,
     11 } = require("resource://devtools/client/shared/vendor/react.mjs");
     12 const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.mjs");
     13 const ReactDOM = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
     14 
     15 const FluentReact = require("resource://devtools/client/shared/vendor/fluent-react.js");
     16 const Localized = createFactory(FluentReact.Localized);
     17 
     18 const { openDocLink } = require("resource://devtools/client/shared/link.js");
     19 
     20 const {
     21  accessibility: {
     22    SCORES: { BEST_PRACTICES, FAIL, WARNING },
     23  },
     24 } = require("resource://devtools/shared/constants.js");
     25 
     26 /**
     27 * A map of accessibility scores to the text descriptions of check icons.
     28 */
     29 const SCORE_TO_ICON_MAP = {
     30  [BEST_PRACTICES]: {
     31    l10nId: "accessibility-best-practices",
     32    src: "chrome://devtools/skin/images/info.svg",
     33  },
     34  [FAIL]: {
     35    l10nId: "accessibility-fail",
     36    src: "chrome://devtools/skin/images/error.svg",
     37  },
     38  [WARNING]: {
     39    l10nId: "accessibility-warning",
     40    src: "chrome://devtools/skin/images/alert.svg",
     41  },
     42 };
     43 
     44 /**
     45 * Localized "Learn more" link that opens a new tab with relevant documentation.
     46 */
     47 class LearnMoreClass extends PureComponent {
     48  static get propTypes() {
     49    return {
     50      href: PropTypes.string,
     51      l10nId: PropTypes.string.isRequired,
     52      onClick: PropTypes.func,
     53    };
     54  }
     55 
     56  static get defaultProps() {
     57    return {
     58      href: "#",
     59      l10nId: null,
     60      onClick: LearnMoreClass.openDocOnClick,
     61    };
     62  }
     63 
     64  static openDocOnClick(event) {
     65    event.preventDefault();
     66    openDocLink(event.target.href);
     67  }
     68 
     69  render() {
     70    const { href, l10nId, onClick } = this.props;
     71    const className = "link";
     72 
     73    return Localized({ id: l10nId }, ReactDOM.a({ className, href, onClick }));
     74  }
     75 }
     76 
     77 const LearnMore = createFactory(LearnMoreClass);
     78 
     79 /**
     80 * Renders icon with text description for the accessibility check.
     81 *
     82 * @param {object}
     83 *        Options:
     84 *          - score: value from SCORES from "devtools/shared/constants"
     85 */
     86 function Icon({ score }) {
     87  const { l10nId, src } = SCORE_TO_ICON_MAP[score];
     88 
     89  return Localized(
     90    { id: l10nId, attrs: { alt: true } },
     91    ReactDOM.img({ src, "data-score": score, className: "icon" })
     92  );
     93 }
     94 
     95 /**
     96 * Renders text description of the accessibility check.
     97 *
     98 * @param {object}
     99 *        Options:
    100 *          - args:   arguments for fluent localized string
    101 *          - href:   url for the learn more link pointing to MDN
    102 *          - l10nId: fluent localization id
    103 */
    104 function Annotation({ args, href, l10nId }) {
    105  return Localized(
    106    {
    107      id: l10nId,
    108      a: LearnMore({ l10nId: "accessibility-learn-more", href }),
    109      ...args,
    110    },
    111    ReactDOM.p({ className: "accessibility-check-annotation" })
    112  );
    113 }
    114 
    115 /**
    116 * Component for rendering a check for accessibliity checks section,
    117 * warnings and best practices suggestions association with a given
    118 * accessibility object in the accessibility tree.
    119 */
    120 class Check extends Component {
    121  static get propTypes() {
    122    return {
    123      getAnnotation: PropTypes.func.isRequired,
    124      id: PropTypes.string.isRequired,
    125      issue: PropTypes.string.isRequired,
    126      score: PropTypes.string.isRequired,
    127    };
    128  }
    129 
    130  render() {
    131    const { getAnnotation, id, issue, score } = this.props;
    132 
    133    return ReactDOM.div(
    134      {
    135        role: "presentation",
    136        tabIndex: "-1",
    137        className: "accessibility-check",
    138      },
    139      Localized(
    140        {
    141          id,
    142        },
    143        ReactDOM.h3({ className: "accessibility-check-header" })
    144      ),
    145      ReactDOM.div(
    146        {
    147          role: "presentation",
    148          tabIndex: "-1",
    149        },
    150        Icon({ score }),
    151        Annotation({ ...getAnnotation(issue) })
    152      )
    153    );
    154  }
    155 }
    156 
    157 module.exports = Check;