@atlaskit/editor-plugin-accessibility-utils 1.0.0

package/CHANGELOG.md

@@ -0,0 +1 @@
+# @atlaskit/editor-plugin-accessibility-utils

package/LICENSE.md

@@ -0,0 +1,13 @@
+Copyright 2023 Atlassian Pty Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1,30 @@
+# Editor plugin accessibility utils
+
+Accessibility utils for @atlaskit/editor-core
+
+**Note:** This component is designed for internal Atlassian development.
+External contributors will be able to use this component but will not be able to submit issues.
+
+## Install
+---
+- **Install** - *yarn add @atlaskit/editor-plugin-accesibility-utils*
+- **npm** - [@atlaskit/editor-plugin-accesibility-utils](https://www.npmjs.com/package/@atlaskit/editor-plugin-accesibility-utils)
+- **Source** - [Bitbucket](https://bitbucket.org/atlassian/atlassian-frontend/src/master/packages/editor/editor-plugin-accesibility-utils)
+- **Bundle** - [unpkg.com](https://unpkg.com/@atlaskit/editor-plugin-accesibility-utils/dist/)
+
+## Usage
+---
+**Internal use only**
+
+@atlaskit/editor-plugin-accesibility-utils is intended for internal use by the @atlaskit/editor-core and as a plugin dependency of the Editor within your product.
+
+Direct use of this component is not supported.
+
+Please see [Atlaskit - Editor plugin annotation](https://atlaskit.atlassian.com/packages/editor/editor-plugin-accesibility-utils) for documentation and examples for this package.
+
+## Support
+---
+For internal Atlassian, visit the slack channel [#help-editor](https://atlassian.slack.com/archives/CFG3PSQ9E) for support or visit [go/editor-help](https://go/editor-help) to submit a bug.
+## License
+---
+ Please see [Atlassian Frontend - License](https://hello.atlassian.net/wiki/spaces/AF/pages/2589099144/Documentation#License) for more licensing information.

package/dist/cjs/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "accessibilityUtilsPlugin", {
+  enumerable: true,
+  get: function get() {
+    return _plugin.accessibilityUtilsPlugin;
+  }
+});
+var _plugin = require("./plugin");

package/dist/cjs/plugin.js

@@ -0,0 +1,86 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.accessibilityUtilsPluginKey = exports.accessibilityUtilsPlugin = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
+var accessibilityUtilsPluginKey = exports.accessibilityUtilsPluginKey = new _state.PluginKey('accessibilityUtilsPlugin');
+var accessibilityUtilsPlugin = exports.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) {
+        if (!editorView) {
+          // at time of writing, this should never happen
+          return;
+        }
+        var tr = editorView.state.tr;
+        tr.setMeta(accessibilityUtilsPluginKey, {
+          message: message
+        });
+        editorView.dispatch(tr);
+        return;
+      }
+    },
+    contentComponent: function contentComponent() {
+      return /*#__PURE__*/_react.default.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.SafePlugin({
+            key: accessibilityUtilsPluginKey,
+            state: {
+              init: function init() {
+                return {
+                  message: ''
+                };
+              },
+              apply: function apply(tr, prevState) {
+                var meta = tr.getMeta(accessibilityUtilsPluginKey);
+                if (meta && 'message' in meta) {
+                  return {
+                    message: meta.message
+                  };
+                }
+                return prevState;
+              }
+            },
+            view: function view(editorView) {
+              setEditorView(editorView);
+              return {};
+            }
+          });
+        }
+      }];
+    }
+  };
+};
+function ContentComponent(_ref2) {
+  var api = _ref2.api;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['accessibilityUtils']),
+    accessibilityUtilsState = _useSharedPluginState.accessibilityUtilsState;
+  return /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, {
+    role: "alert"
+  }, accessibilityUtilsState === null || accessibilityUtilsState === void 0 ? void 0 : accessibilityUtilsState.message);
+}

package/dist/es2019/index.js

@@ -0,0 +1 @@
+export { accessibilityUtilsPlugin } from './plugin';

package/dist/es2019/plugin.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import { useSharedPluginState } 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';
+export const accessibilityUtilsPluginKey = new PluginKey('accessibilityUtilsPlugin');
+export const accessibilityUtilsPlugin = ({
+  api
+}) => {
+  let editorView;
+  const setEditorView = newEditorView => {
+    editorView = newEditorView;
+  };
+  return {
+    name: 'accessibilityUtils',
+    actions: {
+      ariaNotify: message => {
+        if (!editorView) {
+          // at time of writing, this should never happen
+          return;
+        }
+        const tr = editorView.state.tr;
+        tr.setMeta(accessibilityUtilsPluginKey, {
+          message
+        });
+        editorView.dispatch(tr);
+        return;
+      }
+    },
+    contentComponent: () => {
+      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: ''
+              }),
+              apply: (tr, prevState) => {
+                const meta = tr.getMeta(accessibilityUtilsPluginKey);
+                if (meta && 'message' in meta) {
+                  return {
+                    message: meta.message
+                  };
+                }
+                return prevState;
+              }
+            },
+            view(editorView) {
+              setEditorView(editorView);
+              return {};
+            }
+          });
+        }
+      }];
+    }
+  };
+};
+function ContentComponent({
+  api
+}) {
+  const {
+    accessibilityUtilsState
+  } = useSharedPluginState(api, ['accessibilityUtils']);
+  return /*#__PURE__*/React.createElement(VisuallyHidden, {
+    role: "alert"
+  }, accessibilityUtilsState === null || accessibilityUtilsState === void 0 ? void 0 : accessibilityUtilsState.message);
+}

package/dist/esm/index.js

@@ -0,0 +1 @@
+export { accessibilityUtilsPlugin } from './plugin';

package/dist/esm/plugin.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import { useSharedPluginState } 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';
+export 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) {
+        if (!editorView) {
+          // at time of writing, this should never happen
+          return;
+        }
+        var tr = editorView.state.tr;
+        tr.setMeta(accessibilityUtilsPluginKey, {
+          message: message
+        });
+        editorView.dispatch(tr);
+        return;
+      }
+    },
+    contentComponent: function contentComponent() {
+      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: ''
+                };
+              },
+              apply: function apply(tr, prevState) {
+                var meta = tr.getMeta(accessibilityUtilsPluginKey);
+                if (meta && 'message' in meta) {
+                  return {
+                    message: meta.message
+                  };
+                }
+                return prevState;
+              }
+            },
+            view: function view(editorView) {
+              setEditorView(editorView);
+              return {};
+            }
+          });
+        }
+      }];
+    }
+  };
+};
+function ContentComponent(_ref2) {
+  var api = _ref2.api;
+  var _useSharedPluginState = useSharedPluginState(api, ['accessibilityUtils']),
+    accessibilityUtilsState = _useSharedPluginState.accessibilityUtilsState;
+  return /*#__PURE__*/React.createElement(VisuallyHidden, {
+    role: "alert"
+  }, accessibilityUtilsState === null || accessibilityUtilsState === void 0 ? void 0 : accessibilityUtilsState.message);
+}

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export { accessibilityUtilsPlugin } from './plugin';
+export type { AccessibilityUtilsPlugin } from './plugin';

package/dist/types/plugin.d.ts

@@ -0,0 +1,21 @@
+import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export type AccessibilityUtilsPlugin = NextEditorPlugin<'accessibilityUtils', {
+    dependencies: [];
+    actions: {
+        /**
+         *
+         * @param {string} message - Message to be announced to screen readers. This should be internationalized.
+         *
+         * These are currently announced via assertive live regions to screen readers.
+         *
+         * *In future, the ariaNotify proposal looks like a good fit for this use case.  The naming has been selected to align with this proposal.
+         */
+        ariaNotify: (message: string) => void;
+    };
+    sharedState: {
+        message: string;
+    };
+}>;
+export declare const accessibilityUtilsPluginKey: PluginKey<any>;
+export declare const accessibilityUtilsPlugin: AccessibilityUtilsPlugin;

package/dist/types-ts4.5/index.d.ts

@@ -0,0 +1,2 @@
+export { accessibilityUtilsPlugin } from './plugin';
+export type { AccessibilityUtilsPlugin } from './plugin';

package/dist/types-ts4.5/plugin.d.ts

@@ -0,0 +1,22 @@
+import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export type AccessibilityUtilsPlugin = NextEditorPlugin<'accessibilityUtils', {
+    dependencies: [
+    ];
+    actions: {
+        /**
+         *
+         * @param {string} message - Message to be announced to screen readers. This should be internationalized.
+         *
+         * These are currently announced via assertive live regions to screen readers.
+         *
+         * *In future, the ariaNotify proposal looks like a good fit for this use case.  The naming has been selected to align with this proposal.
+         */
+        ariaNotify: (message: string) => void;
+    };
+    sharedState: {
+        message: string;
+    };
+}>;
+export declare const accessibilityUtilsPluginKey: PluginKey<any>;
+export declare const accessibilityUtilsPlugin: AccessibilityUtilsPlugin;

package/package.json

@@ -0,0 +1,89 @@
+{
+  "name": "@atlaskit/editor-plugin-accessibility-utils",
+  "version": "1.0.0",
+  "description": "Accessibility utils for @atlaskit/editor-core",
+  "author": "Atlassian Pty Ltd",
+  "license": "Apache-2.0",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "atlassian": {
+    "team": "Editor: Scarlet",
+    "singleton": true,
+    "releaseModel": "continuous",
+    "runReact18": false
+  },
+  "repository": "https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "module:es2019": "dist/es2019/index.js",
+  "types": "dist/types/index.d.ts",
+  "typesVersions": {
+    ">=4.5 <4.9": {
+      "*": [
+        "dist/types-ts4.5/*",
+        "dist/types-ts4.5/index.d.ts"
+      ]
+    }
+  },
+  "sideEffects": false,
+  "atlaskit:src": "src/index.ts",
+  "af:exports": {
+    ".": "./src/index.ts"
+  },
+  "dependencies": {
+    "@atlaskit/editor-common": "^78.16.0",
+    "@atlaskit/editor-prosemirror": "3.0.0",
+    "@atlaskit/visually-hidden": "^1.2.2",
+    "@babel/runtime": "^7.0.0"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0"
+  },
+  "devDependencies": {
+    "@af/integration-testing": "*",
+    "@af/visual-regression": "*",
+    "@atlaskit/ssr": "*",
+    "@atlaskit/visual-regression": "*",
+    "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
+    "@testing-library/react": "^12.1.5",
+    "react-dom": "^16.8.0",
+    "typescript": "~4.9.5",
+    "wait-for-expect": "^1.2.0"
+  },
+  "techstack": {
+    "@atlassian/frontend": {
+      "import-structure": [
+        "atlassian-conventions"
+      ],
+      "circular-dependencies": [
+        "file-and-folder-level"
+      ]
+    },
+    "@repo/internal": {
+      "dom-events": "use-bind-event-listener",
+      "analytics": [
+        "analytics-next"
+      ],
+      "design-tokens": [
+        "color"
+      ],
+      "theming": [
+        "react-context"
+      ],
+      "ui-components": [
+        "lite-mode"
+      ],
+      "deprecation": "no-deprecated-imports",
+      "styling": [
+        "emotion",
+        "emotion"
+      ],
+      "imports": [
+        "import-no-extraneous-disable-for-examples-and-docs"
+      ]
+    }
+  },
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0",
+  "platform-feature-flags": {}
+}