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

Optimizely's Component Library.

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; }

import React, { useCallback, useState } from "react";
import PropTypes from "prop-types";
import { noop } from "lodash";
import { yellowDark, yellowXLight, aquaDark, aquaXLight, brandBlueDark, greenDark, greenXLight, orangeDark, orangeXLight, pinkDark, pinkXLight, redDark, redXLight, magentaDark, magentaXLight, greyDark, blueXLight, purpleDark, black, purpleXLight } from "../tokens/forimport/index.es";
/**
 * 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
 */

export 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}
 */

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

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

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

    var _useState5 = useState(function () {
      return 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 = 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 = useCallback(function (count) {
      setItemCount(count);

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

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

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

export var FILL_COLOR_MAP_LIGHT = {
  aqua: aquaXLight,
  yellow: yellowXLight,
  blue: blueXLight,
  green: greenXLight,
  orange: orangeXLight,
  pink: pinkXLight,
  red: redXLight,
  magenta: magentaXLight,
  purple: purpleXLight
};
export default {
  FILL_COLOR_MAP: FILL_COLOR_MAP,
  FILL_COLOR_MAP_LIGHT: FILL_COLOR_MAP_LIGHT
};