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

Accessibility utils for @atlaskit/editor-core

import _extends from "@babel/runtime/helpers/extends";
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';
const accessibilityUtilsPluginKey = new PluginKey('accessibilityUtilsPlugin');
export const accessibilityUtilsPlugin = ({
  api
}) => {
  let editorView;
  const setEditorView = newEditorView => {
    editorView = newEditorView;
  };
  return {
    name: 'accessibilityUtils',
    actions: {
      ariaNotify: (message, ariaLiveElementAttributes) => {
        if (!editorView) {
          // at time of writing, this should never happen
          return;
        }
        const tr = editorView.state.tr;
        tr.setMeta(accessibilityUtilsPluginKey, {
          message,
          ariaLiveElementAttributes,
          key: Date.now().toString()
        });
        editorView.dispatch(tr);
        return;
      }
    },
    contentComponent: () => {
      if (!editorView || isSSR()) {
        return null;
      }
      return /*#__PURE__*/React.createElement(ContentComponent, {
        api: api
      });
    },
    getSharedState(editorState) {
      if (!editorState) {
        return null;
      }
      return accessibilityUtilsPluginKey.getState(editorState);
    },
    pmPlugins() {
      return [{
        name: 'get-editor-view',
        plugin: () => {
          return new SafePlugin({
            key: accessibilityUtilsPluginKey,
            state: {
              init: () => ({
                message: '',
                ariaLiveElementAttributes: {}
              }),
              apply: (tr, prevState) => {
                const meta = tr.getMeta(accessibilityUtilsPluginKey);
                if (meta) {
                  return {
                    ...prevState,
                    ...meta
                  };
                }
                return prevState;
              }
            },
            view(editorView) {
              setEditorView(editorView);
              return {};
            }
          });
        }
      }];
    }
  };
};
function ContentComponent({
  api
}) {
  const {
    ariaLiveElementAttributes,
    key,
    message
  } = useSharedPluginStateWithSelector(api, ['accessibilityUtils'], 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
    };
  });
  const 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
  }), message);
}