optimizely-oui/dist/js/utils/accessibility.js

Optimizely's Component Library.

"use strict";

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.FILL_COLOR_MAP_LIGHT = exports.FILL_COLOR_MAP = exports.keyboardTracker = exports.getAssistiveTextFromColorClass = void 0;

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _lodash = require("lodash");

var _index = require("../tokens/forimport/index.es");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

/**
 * Map a color class to a human readable word that explains the context of when
 * the class is used. This is helpful for screen readers.
 * @param {String} className - an OUI class
 * @returns {String} English word describing the class provided
 */
var getAssistiveTextFromColorClass = function getAssistiveTextFromColorClass(className) {
  var classMapping = {
    "bad-news": "Error",
    brand: "Info",
    "good-news": "Success",
    warning: "Alert"
  };
  var text = classMapping[className];

  if (!text) {
    throw new Error("Provided class name does not map to a word.");
  }

  return text;
};
/**
 * HOC that provides support for tracking keyboard actions inside an
 * element with an input. Tracks up & down arrow keys and invokes
 * a callback when enter is pressed.
 * @param {React.Component} Component - The component to wrap.
 * @returns {React.Component}
 */


exports.getAssistiveTextFromColorClass = getAssistiveTextFromColorClass;

var keyboardTracker = function keyboardTracker(Component) {
  var wrappedComponent = function wrappedComponent(props) {
    var additionalItems = props.additionalItems,
        rest = _objectWithoutProperties(props, ["additionalItems"]);

    var _useState = (0, _react.useState)(0),
        _useState2 = _slicedToArray(_useState, 2),
        currentFauxFocusIndex = _useState2[0],
        setIndex = _useState2[1];

    var _useState3 = (0, _react.useState)(0),
        _useState4 = _slicedToArray(_useState3, 2),
        currentItemCount = _useState4[0],
        setItemCount = _useState4[1];

    var _useState5 = (0, _react.useState)(function () {
      return _lodash.noop;
    }),
        _useState6 = _slicedToArray(_useState5, 2),
        onItemSelect = _useState6[0],
        setOnItemSelect = _useState6[1];
    /**
     * Event handler for keyboard activity.
     * Increments/decrements the current index on up/down arrow keys
     *  -or-
     * Invokes the onItemSelect callback on enter
     */


    var handleKeyDown = (0, _react.useCallback)(function (event) {
      var newIndex;

      switch (event.key) {
        case "ArrowUp":
          newIndex = Math.max(currentFauxFocusIndex - 1, 0);
          setIndex(newIndex);
          event.preventDefault();
          break;

        case "ArrowDown":
          var totalItemCount = currentItemCount + additionalItems;
          newIndex = Math.max(Math.min(currentFauxFocusIndex + 1, totalItemCount - 1), 0);
          setIndex(newIndex);
          event.preventDefault();
          break;

        case "Enter":
          // Select the item for currentFauxFocusIndex
          onItemSelect(currentFauxFocusIndex);
          event.preventDefault();
          break;

        default:
          // No op
          break;
      }
    }, [currentFauxFocusIndex, currentItemCount, onItemSelect, additionalItems]);
    /**
     * Handler to update the item count, which should reset the
     * current index to 0 if the number has changed.
     */

    var handleSetItemCount = (0, _react.useCallback)(function (count) {
      setItemCount(count);

      if (count !== currentItemCount) {
        setIndex(0);
      }
    }, [currentItemCount]);
    return _react["default"].createElement(Component, _extends({}, rest, {
      currentFauxFocusIndex: currentFauxFocusIndex,
      handleKeyDown: handleKeyDown,
      setItemCount: handleSetItemCount,
      setOnItemSelect: setOnItemSelect
    }));
  };

  wrappedComponent.displayName = "withkeyboardTracker(".concat(Component.displayName, ")");
  wrappedComponent.propTypes = {
    additionalItems: _propTypes["default"].number
  };
  wrappedComponent.defaultProps = {
    additionalItems: 0
  };
  return wrappedComponent;
}; // map fillColorName prop values to OUI color tokens


exports.keyboardTracker = keyboardTracker;
var FILL_COLOR_MAP = {
  aqua: _index.aquaDark,
  yellow: _index.yellowDark,
  "default": _index.brandBlueDark,
  green: _index.greenDark,
  orange: _index.orangeDark,
  pink: _index.pinkDark,
  red: _index.redDark,
  magenta: _index.magentaDark,
  grey: _index.greyDark,
  purple: _index.purpleDark,
  black: _index.black
}; // map fillColorName prop values to OUI color tokens

exports.FILL_COLOR_MAP = FILL_COLOR_MAP;
var FILL_COLOR_MAP_LIGHT = {
  aqua: _index.aquaXLight,
  yellow: _index.yellowXLight,
  blue: _index.blueXLight,
  green: _index.greenXLight,
  orange: _index.orangeXLight,
  pink: _index.pinkXLight,
  red: _index.redXLight,
  magenta: _index.magentaXLight,
  purple: _index.purpleXLight
};
exports.FILL_COLOR_MAP_LIGHT = FILL_COLOR_MAP_LIGHT;
var _default = {
  FILL_COLOR_MAP: FILL_COLOR_MAP,
  FILL_COLOR_MAP_LIGHT: FILL_COLOR_MAP_LIGHT
};
exports["default"] = _default;