@atlaskit/renderer 114.6.2 → 114.6.3

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/renderer
 
+## 114.6.3
+
+### Patch Changes
+
+- [#129599](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/129599)
+  [`4498c19bca034`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4498c19bca034) -
+  [ux] [A11Y-20936] Announce status elements in the renderer to screen readers
+- Updated dependencies
+
 ## 114.6.2
 
 ### Patch Changes

package/dist/cjs/messages.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tableCellMessages = exports.inlineCommentMessages = exports.headingAnchorLinkMessages = void 0;
+exports.tableCellMessages = exports.statusMessages = exports.inlineCommentMessages = exports.headingAnchorLinkMessages = void 0;
 var _reactIntlNext = require("react-intl-next");
 /* eslint-disable @atlaskit/editor/no-re-export */
 // Entry file in package.json
@@ -58,4 +58,11 @@ var inlineCommentMessages = exports.inlineCommentMessages = (0, _reactIntlNext.d
     defaultMessage: 'inline comment end',
     description: 'Ending marker to indicate that text was highlighted with an inline comment by a screen reader.'
   }
+});
+var statusMessages = exports.statusMessages = (0, _reactIntlNext.defineMessages)({
+  accessibilityLabelForStatus: {
+    id: 'fabric.editor.status.accessibilityLabel',
+    defaultMessage: 'status: ',
+    description: 'Accessibility label for status'
+  }
 });

package/dist/cjs/react/nodes/status.js

@@ -1,5 +1,6 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -8,8 +9,11 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _element = require("@atlaskit/status/element");
 var _analyticsNamespacedContext = require("@atlaskit/analytics-namespaced-context");
+var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _reactIntlNext = require("react-intl-next");
 var _useInlineAnnotationProps = require("../../ui/annotations/element/useInlineAnnotationProps");
+var _messages = require("../../messages");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var _default = exports.default = /*#__PURE__*/(0, _react.memo)(function Status(props) {
@@ -17,12 +21,15 @@ var _default = exports.default = /*#__PURE__*/(0, _react.memo)(function Status(p
     color = props.color,
     localId = props.localId;
   var inlineAnnotationProps = (0, _useInlineAnnotationProps.useInlineAnnotationProps)(props);
+  var intl = (0, _reactIntlNext.useIntl)();
   if ((0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes')) {
     return (
       /*#__PURE__*/
       // Ignored via go/ees005
       // eslint-disable-next-line react/jsx-props-no-spreading
-      _react.default.createElement("span", inlineAnnotationProps, /*#__PURE__*/_react.default.createElement(_analyticsNamespacedContext.FabricElementsAnalyticsContext, {
+      _react.default.createElement("span", inlineAnnotationProps, (0, _platformFeatureFlags.fg)('editor_a11y_status_renderer_description') && /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, {
+        role: "generic"
+      }, intl.formatMessage(_messages.statusMessages.accessibilityLabelForStatus)), /*#__PURE__*/_react.default.createElement(_analyticsNamespacedContext.FabricElementsAnalyticsContext, {
         data: {
           userContext: 'document'
         }
@@ -30,7 +37,7 @@ var _default = exports.default = /*#__PURE__*/(0, _react.memo)(function Status(p
         text: text,
         color: color,
         localId: localId,
-        role: "presentation",
+        role: (0, _platformFeatureFlags.fg)('editor_a11y_status_renderer_description') ? undefined : 'presentation',
         isBold: (0, _platformFeatureFlags.fg)('platform-component-visual-refresh')
       })))
     );
@@ -39,7 +46,14 @@ var _default = exports.default = /*#__PURE__*/(0, _react.memo)(function Status(p
     data: {
       userContext: 'document'
     }
-  }, /*#__PURE__*/_react.default.createElement(_element.Status, {
+  }, (0, _platformFeatureFlags.fg)('editor_a11y_status_renderer_description') ? /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, {
+    role: "generic"
+  }, intl.formatMessage(_messages.statusMessages.accessibilityLabelForStatus)), /*#__PURE__*/_react.default.createElement(_element.Status, {
+    text: text,
+    color: color,
+    localId: localId,
+    isBold: (0, _platformFeatureFlags.fg)('platform-component-visual-refresh')
+  }))) : /*#__PURE__*/_react.default.createElement(_element.Status, {
     text: text,
     color: color,
     localId: localId,

package/dist/cjs/ui/Renderer/index.js

@@ -67,7 +67,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
 var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "114.6.2";
+var packageVersion = "114.6.3";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',

package/dist/es2019/messages.js

@@ -52,4 +52,11 @@ export const inlineCommentMessages = defineMessages({
     defaultMessage: 'inline comment end',
     description: 'Ending marker to indicate that text was highlighted with an inline comment by a screen reader.'
   }
+});
+export const statusMessages = defineMessages({
+  accessibilityLabelForStatus: {
+    id: 'fabric.editor.status.accessibilityLabel',
+    defaultMessage: 'status: ',
+    description: 'Accessibility label for status'
+  }
 });

package/dist/es2019/react/nodes/status.js

@@ -1,8 +1,11 @@
 import React, { memo } from 'react';
 import { Status as AkStatus } from '@atlaskit/status/element';
 import { FabricElementsAnalyticsContext } from '@atlaskit/analytics-namespaced-context';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { useIntl } from 'react-intl-next';
 import { useInlineAnnotationProps } from '../../ui/annotations/element/useInlineAnnotationProps';
+import { statusMessages } from '../../messages';
 export default /*#__PURE__*/memo(function Status(props) {
   const {
     text,
@@ -10,12 +13,15 @@ export default /*#__PURE__*/memo(function Status(props) {
     localId
   } = props;
   const inlineAnnotationProps = useInlineAnnotationProps(props);
+  const intl = useIntl();
   if (fg('editor_inline_comments_on_inline_nodes')) {
     return (
       /*#__PURE__*/
       // Ignored via go/ees005
       // eslint-disable-next-line react/jsx-props-no-spreading
-      React.createElement("span", inlineAnnotationProps, /*#__PURE__*/React.createElement(FabricElementsAnalyticsContext, {
+      React.createElement("span", inlineAnnotationProps, fg('editor_a11y_status_renderer_description') && /*#__PURE__*/React.createElement(VisuallyHidden, {
+        role: "generic"
+      }, intl.formatMessage(statusMessages.accessibilityLabelForStatus)), /*#__PURE__*/React.createElement(FabricElementsAnalyticsContext, {
         data: {
           userContext: 'document'
         }
@@ -23,7 +29,7 @@ export default /*#__PURE__*/memo(function Status(props) {
         text: text,
         color: color,
         localId: localId,
-        role: "presentation",
+        role: fg('editor_a11y_status_renderer_description') ? undefined : 'presentation',
         isBold: fg('platform-component-visual-refresh')
       })))
     );
@@ -32,7 +38,14 @@ export default /*#__PURE__*/memo(function Status(props) {
     data: {
       userContext: 'document'
     }
-  }, /*#__PURE__*/React.createElement(AkStatus, {
+  }, fg('editor_a11y_status_renderer_description') ? /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(VisuallyHidden, {
+    role: "generic"
+  }, intl.formatMessage(statusMessages.accessibilityLabelForStatus)), /*#__PURE__*/React.createElement(AkStatus, {
+    text: text,
+    color: color,
+    localId: localId,
+    isBold: fg('platform-component-visual-refresh')
+  }))) : /*#__PURE__*/React.createElement(AkStatus, {
     text: text,
     color: color,
     localId: localId,

package/dist/es2019/ui/Renderer/index.js

@@ -48,7 +48,7 @@ import { removeEmptySpaceAroundContent } from './rendererHelper';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "114.6.2";
+const packageVersion = "114.6.3";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',

package/dist/esm/messages.js

@@ -52,4 +52,11 @@ export var inlineCommentMessages = defineMessages({
     defaultMessage: 'inline comment end',
     description: 'Ending marker to indicate that text was highlighted with an inline comment by a screen reader.'
   }
+});
+export var statusMessages = defineMessages({
+  accessibilityLabelForStatus: {
+    id: 'fabric.editor.status.accessibilityLabel',
+    defaultMessage: 'status: ',
+    description: 'Accessibility label for status'
+  }
 });

package/dist/esm/react/nodes/status.js

@@ -1,19 +1,25 @@
 import React, { memo } from 'react';
 import { Status as AkStatus } from '@atlaskit/status/element';
 import { FabricElementsAnalyticsContext } from '@atlaskit/analytics-namespaced-context';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { useIntl } from 'react-intl-next';
 import { useInlineAnnotationProps } from '../../ui/annotations/element/useInlineAnnotationProps';
+import { statusMessages } from '../../messages';
 export default /*#__PURE__*/memo(function Status(props) {
   var text = props.text,
     color = props.color,
     localId = props.localId;
   var inlineAnnotationProps = useInlineAnnotationProps(props);
+  var intl = useIntl();
   if (fg('editor_inline_comments_on_inline_nodes')) {
     return (
       /*#__PURE__*/
       // Ignored via go/ees005
       // eslint-disable-next-line react/jsx-props-no-spreading
-      React.createElement("span", inlineAnnotationProps, /*#__PURE__*/React.createElement(FabricElementsAnalyticsContext, {
+      React.createElement("span", inlineAnnotationProps, fg('editor_a11y_status_renderer_description') && /*#__PURE__*/React.createElement(VisuallyHidden, {
+        role: "generic"
+      }, intl.formatMessage(statusMessages.accessibilityLabelForStatus)), /*#__PURE__*/React.createElement(FabricElementsAnalyticsContext, {
         data: {
           userContext: 'document'
         }
@@ -21,7 +27,7 @@ export default /*#__PURE__*/memo(function Status(props) {
         text: text,
         color: color,
         localId: localId,
-        role: "presentation",
+        role: fg('editor_a11y_status_renderer_description') ? undefined : 'presentation',
         isBold: fg('platform-component-visual-refresh')
       })))
     );
@@ -30,7 +36,14 @@ export default /*#__PURE__*/memo(function Status(props) {
     data: {
       userContext: 'document'
     }
-  }, /*#__PURE__*/React.createElement(AkStatus, {
+  }, fg('editor_a11y_status_renderer_description') ? /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(VisuallyHidden, {
+    role: "generic"
+  }, intl.formatMessage(statusMessages.accessibilityLabelForStatus)), /*#__PURE__*/React.createElement(AkStatus, {
+    text: text,
+    color: color,
+    localId: localId,
+    isBold: fg('platform-component-visual-refresh')
+  }))) : /*#__PURE__*/React.createElement(AkStatus, {
     text: text,
     color: color,
     localId: localId,

package/dist/esm/ui/Renderer/index.js

@@ -57,7 +57,7 @@ import { removeEmptySpaceAroundContent } from './rendererHelper';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "114.6.2";
+var packageVersion = "114.6.3";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',

package/dist/types/messages.d.ts

@@ -49,3 +49,10 @@ export declare const inlineCommentMessages: {
         description: string;
     };
 };
+export declare const statusMessages: {
+    accessibilityLabelForStatus: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

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

@@ -49,3 +49,10 @@ export declare const inlineCommentMessages: {
         description: string;
     };
 };
+export declare const statusMessages: {
+    accessibilityLabelForStatus: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "114.6.2",
+	"version": "114.6.3",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
 		"@atlaskit/analytics-next": "^11.0.0",
 		"@atlaskit/button": "^22.0.0",
 		"@atlaskit/code": "^16.1.0",
-		"@atlaskit/editor-common": "^102.14.0",
+		"@atlaskit/editor-common": "^102.15.0",
 		"@atlaskit/editor-json-transformer": "^8.24.0",
 		"@atlaskit/editor-palette": "^2.1.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
@@ -172,6 +172,9 @@
 		"platform_editor_accessible_heading_copy_link": {
 			"type": "boolean"
 		},
+		"editor_a11y_status_renderer_description": {
+			"type": "boolean"
+		},
 		"use_comments_data_annotation_updater": {
 			"type": "boolean"
 		},