@wordpress/block-editor/build/components/contrast-checker/index.js

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _a11y = _interopRequireDefault(require("colord/plugins/a11y"));
var _names = _interopRequireDefault(require("colord/plugins/names"));
var _colord = require("colord");
var _i18n = require("@wordpress/i18n");
var _components = require("@wordpress/components");
var _a11y2 = require("@wordpress/a11y");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

(0, _colord.extend)([_names.default, _a11y.default]);
function ContrastChecker({
  backgroundColor,
  fallbackBackgroundColor,
  fallbackTextColor,
  fallbackLinkColor,
  fontSize,
  // Font size value in pixels.
  isLargeText,
  textColor,
  linkColor,
  enableAlphaChecker = false
}) {
  const currentBackgroundColor = backgroundColor || fallbackBackgroundColor;

  // Must have a background color.
  if (!currentBackgroundColor) {
    return null;
  }
  const currentTextColor = textColor || fallbackTextColor;
  const currentLinkColor = linkColor || fallbackLinkColor;

  // Must have at least one text color.
  if (!currentTextColor && !currentLinkColor) {
    return null;
  }
  const textColors = [{
    color: currentTextColor,
    description: (0, _i18n.__)('text color')
  }, {
    color: currentLinkColor,
    description: (0, _i18n.__)('link color')
  }];
  const colordBackgroundColor = (0, _colord.colord)(currentBackgroundColor);
  const backgroundColorHasTransparency = colordBackgroundColor.alpha() < 1;
  const backgroundColorBrightness = colordBackgroundColor.brightness();
  const isReadableOptions = {
    level: 'AA',
    size: isLargeText || isLargeText !== false && fontSize >= 24 ? 'large' : 'small'
  };
  let message = '';
  let speakMessage = '';
  for (const item of textColors) {
    // If there is no color, go no further.
    if (!item.color) {
      continue;
    }
    const colordTextColor = (0, _colord.colord)(item.color);
    const isColordTextReadable = colordTextColor.isReadable(colordBackgroundColor, isReadableOptions);
    const textHasTransparency = colordTextColor.alpha() < 1;

    // If the contrast is not readable.
    if (!isColordTextReadable) {
      // Don't show the message if the background or text is transparent.
      if (backgroundColorHasTransparency || textHasTransparency) {
        continue;
      }
      message = backgroundColorBrightness < colordTextColor.brightness() ? (0, _i18n.sprintf)(
      // translators: %s is a type of text color, e.g., "text color" or "link color".
      (0, _i18n.__)('This color combination may be hard for people to read. Try using a darker background color and/or a brighter %s.'), item.description) : (0, _i18n.sprintf)(
      // translators: %s is a type of text color, e.g., "text color" or "link color".
      (0, _i18n.__)('This color combination may be hard for people to read. Try using a brighter background color and/or a darker %s.'), item.description);
      speakMessage = (0, _i18n.__)('This color combination may be hard for people to read.');
      // Break from the loop when we have a contrast warning.
      // These messages take priority over the transparency warning.
      break;
    }

    // If there is no contrast warning and the text is transparent,
    // show the transparent warning if alpha check is enabled.
    if (textHasTransparency && enableAlphaChecker) {
      message = (0, _i18n.__)('Transparent text may be hard for people to read.');
      speakMessage = (0, _i18n.__)('Transparent text may be hard for people to read.');
    }
  }
  if (!message) {
    return null;
  }

  // Note: The `Notice` component can speak messages via its `spokenMessage`
  // prop, but the contrast checker requires granular control over when the
  // announcements are made. Notably, the message will be re-announced if a
  // new color combination is selected and the contrast is still insufficient.
  (0, _a11y2.speak)(speakMessage);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    className: "block-editor-contrast-checker",
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Notice, {
      spokenMessage: null,
      status: "warning",
      isDismissible: false,
      children: message
    })
  });
}

/**
 * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/contrast-checker/README.md
 */
var _default = exports.default = ContrastChecker;
//# sourceMappingURL=index.js.map