@atlaskit/editor-plugin-accessibility-utils/dist/esm/accessibilityUtilsPlugin.js

Accessibility utils for @atlaskit/editor-core

import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React from 'react';
import { isSSR } from '@atlaskit/editor-common/core-utils';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
import VisuallyHidden from '@atlaskit/visually-hidden';
var accessibilityUtilsPluginKey = new PluginKey('accessibilityUtilsPlugin');
export var accessibilityUtilsPlugin = function accessibilityUtilsPlugin(_ref) {
  var api = _ref.api;
  var editorView;
  var setEditorView = function setEditorView(newEditorView) {
    editorView = newEditorView;
  };
  return {
    name: 'accessibilityUtils',
    actions: {
      ariaNotify: function ariaNotify(message, ariaLiveElementAttributes) {
        if (!editorView) {
          // at time of writing, this should never happen
          return;
        }
        var tr = editorView.state.tr;
        tr.setMeta(accessibilityUtilsPluginKey, {
          message: message,
          ariaLiveElementAttributes: ariaLiveElementAttributes,
          key: Date.now().toString()
        });
        editorView.dispatch(tr);
        return;
      }
    },
    contentComponent: function contentComponent() {
      if (!editorView || isSSR()) {
        return null;
      }
      return /*#__PURE__*/React.createElement(ContentComponent, {
        api: api
      });
    },
    getSharedState: function getSharedState(editorState) {
      if (!editorState) {
        return null;
      }
      return accessibilityUtilsPluginKey.getState(editorState);
    },
    pmPlugins: function pmPlugins() {
      return [{
        name: 'get-editor-view',
        plugin: function plugin() {
          return new SafePlugin({
            key: accessibilityUtilsPluginKey,
            state: {
              init: function init() {
                return {
                  message: '',
                  ariaLiveElementAttributes: {}
                };
              },
              apply: function apply(tr, prevState) {
                var meta = tr.getMeta(accessibilityUtilsPluginKey);
                if (meta) {
                  return _objectSpread(_objectSpread({}, prevState), meta);
                }
                return prevState;
              }
            },
            view: function view(editorView) {
              setEditorView(editorView);
              return {};
            }
          });
        }
      }];
    }
  };
};
function ContentComponent(_ref2) {
  var api = _ref2.api;
  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['accessibilityUtils'], function (states) {
      var _states$accessibility, _states$accessibility2, _states$accessibility3;
      return {
        ariaLiveElementAttributes: (_states$accessibility = states.accessibilityUtilsState) === null || _states$accessibility === void 0 ? void 0 : _states$accessibility.ariaLiveElementAttributes,
        key: (_states$accessibility2 = states.accessibilityUtilsState) === null || _states$accessibility2 === void 0 ? void 0 : _states$accessibility2.key,
        message: (_states$accessibility3 = states.accessibilityUtilsState) === null || _states$accessibility3 === void 0 ? void 0 : _states$accessibility3.message
      };
    }),
    ariaLiveElementAttributes = _useSharedPluginState.ariaLiveElementAttributes,
    key = _useSharedPluginState.key,
    message = _useSharedPluginState.message;
  var role = (ariaLiveElementAttributes === null || ariaLiveElementAttributes === void 0 ? void 0 : ariaLiveElementAttributes.priority) === 'important' ? 'alert' : 'status';
  return /*#__PURE__*/React.createElement(VisuallyHidden, _extends({
    testId: 'accessibility-message-wrapper',
    role: role
    // Ignored via go/ees005
    // eslint-disable-next-line react/jsx-props-no-spreading
  }, role === 'alert' && {
    key: key
  }), message);
}