devtools/client/accessibility/components/RightSidebar.js

   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("devtools/client/shared/vendor/react");
  11 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
  12 const { div } = require("devtools/client/shared/vendor/react-dom-factories");
  13
  14 const { L10N } = require("../utils/l10n");
  15 const Accessible = createFactory(require("./Accessible"));
  16 const Accordion = createFactory(
  17   require("devtools/client/shared/components/Accordion")
  18 );
  19 const Checks = createFactory(require("./Checks"));
  20
  21 // Component that is responsible for rendering accessible panel's sidebar.
  22 class RightSidebar extends Component {
  23   static get propTypes() {
  24     return {
  25       accessibilityWalker: PropTypes.object.isRequired,
  26     };
  27   }
  28
  29   /**
  30    * Render the sidebar component.
  31    * @returns Sidebar React component.
  32    */
  33   render() {
  34     const propertiesHeaderID = "accessibility-properties-header";
  35     const checksHeaderID = "accessibility-checks-header";
  36     const { accessibilityWalker } = this.props;
  37     return div(
  38       {
  39         className: "right-sidebar",
  40         role: "presentation",
  41       },
  42       Accordion({
  43         items: [
  44           {
  45             className: "checks",
  46             component: Checks({ labelledby: checksHeaderID }),
  47             header: L10N.getStr("accessibility.checks"),
  48             labelledby: checksHeaderID,
  49             opened: true,
  50           },
  51           {
  52             className: "accessible",
  53             component: Accessible({
  54               accessibilityWalker,
  55               labelledby: propertiesHeaderID,
  56             }),
  57             header: L10N.getStr("accessibility.properties"),
  58             labelledby: propertiesHeaderID,
  59             opened: true,
  60           },
  61         ],
  62       })
  63     );
  64   }
  65 }
  66
  67 module.exports = RightSidebar;