@atlaskit/editor-plugin-floating-toolbar 9.1.27 → 9.2.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-floating-toolbar
 
+## 9.2.0
+
+### Minor Changes
+
+- [`dd5154ad0dec5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/dd5154ad0dec5) -
+  [A11Y-10416] Don't render announcer for floating toolbar when a component has another method of
+  announcing (codeclocks only)
+
+### Patch Changes
+
+- Updated dependencies
+
+## 9.1.28
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 9.1.27
 
 ### Patch Changes

package/dist/cjs/ui/Toolbar.js

@@ -596,6 +596,14 @@ var Toolbar = /*#__PURE__*/function (_Component) {
       //Alt + F10 to reach first element in this floating toolbar
       return event.altKey && (event.key === 'F10' || event.keyCode === 121);
     });
+    (0, _defineProperty2.default)(_this, "doesNodeRequireAssitiveMessage", function (node) {
+      // Code blocks have an assistive message to announce the content of the code block to screen readers, so we don't need to announce the floating toolbar for those nodes
+      var nodesWithAlternativeRoles = ['codeBlock'];
+      if (nodesWithAlternativeRoles.includes(node.type.name)) {
+        return false;
+      }
+      return true;
+    });
     _this.scrollContainerRef = /*#__PURE__*/_react.default.createRef();
     _this.mountRef = /*#__PURE__*/_react.default.createRef();
     _this.toolbarContainerRef = /*#__PURE__*/_react.default.createRef();
@@ -685,6 +693,7 @@ var Toolbar = /*#__PURE__*/function (_Component) {
       var hasSelect = items.find(function (item) {
         return item.type === 'select' && item.selectType === 'list';
       });
+      var shouldRenderAssistiveAnnouncer = (0, _expValEquals.expValEquals)('editor_a11y_role_textbox', 'isEnabled', true) ? this.doesNodeRequireAssitiveMessage(node) : true;
       return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_uiMenu.ToolbarArrowKeyNavigationProvider, {
         editorView: this.props.editorView,
         handleEscape: this.handleEscape,
@@ -704,7 +713,7 @@ var Toolbar = /*#__PURE__*/function (_Component) {
         ,
         className: className,
         onMouseDown: areAnyNewToolbarFlagsEnabled ? this.captureMouseEvent : undefined
-      }, (0, _react2.jsx)(_ui.Announcer, {
+      }, shouldRenderAssistiveAnnouncer && (0, _react2.jsx)(_ui.Announcer, {
         text: mediaAssistiveMessage ? "".concat(mediaAssistiveMessage, ", ").concat(intl.formatMessage(_floatingToolbar.messages.floatingToolbarAnnouncer)) : intl.formatMessage(_floatingToolbar.messages.floatingToolbarAnnouncer),
         delay: 250
       }), scrollable && areAnyNewToolbarFlagsEnabled && (0, _react2.jsx)(_ScrollButton.ScrollButton, {

package/dist/es2019/ui/Toolbar.js

@@ -556,6 +556,14 @@ class Toolbar extends Component {
       //Alt + F10 to reach first element in this floating toolbar
       return event.altKey && (event.key === 'F10' || event.keyCode === 121);
     });
+    _defineProperty(this, "doesNodeRequireAssitiveMessage", node => {
+      // Code blocks have an assistive message to announce the content of the code block to screen readers, so we don't need to announce the floating toolbar for those nodes
+      const nodesWithAlternativeRoles = ['codeBlock'];
+      if (nodesWithAlternativeRoles.includes(node.type.name)) {
+        return false;
+      }
+      return true;
+    });
     this.scrollContainerRef = /*#__PURE__*/React.createRef();
     this.mountRef = /*#__PURE__*/React.createRef();
     this.toolbarContainerRef = /*#__PURE__*/React.createRef();
@@ -636,6 +644,7 @@ class Toolbar extends Component {
     // Select has left padding of 4px to the border, everything else 8px
     const firstElementIsSelect = items[0].type === 'select';
     const hasSelect = items.find(item => item.type === 'select' && item.selectType === 'list');
+    const shouldRenderAssistiveAnnouncer = expValEquals('editor_a11y_role_textbox', 'isEnabled', true) ? this.doesNodeRequireAssitiveMessage(node) : true;
     return jsx(React.Fragment, null, jsx(ToolbarArrowKeyNavigationProvider, {
       editorView: this.props.editorView,
       handleEscape: this.handleEscape,
@@ -653,7 +662,7 @@ class Toolbar extends Component {
       ,
       className: className,
       onMouseDown: areAnyNewToolbarFlagsEnabled ? this.captureMouseEvent : undefined
-    }, jsx(Announcer, {
+    }, shouldRenderAssistiveAnnouncer && jsx(Announcer, {
       text: mediaAssistiveMessage ? `${mediaAssistiveMessage}, ${intl.formatMessage(messages.floatingToolbarAnnouncer)}` : intl.formatMessage(messages.floatingToolbarAnnouncer),
       delay: 250
     }), scrollable && areAnyNewToolbarFlagsEnabled && jsx(ScrollButton, {

package/dist/esm/ui/Toolbar.js

@@ -590,6 +590,14 @@ var Toolbar = /*#__PURE__*/function (_Component) {
       //Alt + F10 to reach first element in this floating toolbar
       return event.altKey && (event.key === 'F10' || event.keyCode === 121);
     });
+    _defineProperty(_this, "doesNodeRequireAssitiveMessage", function (node) {
+      // Code blocks have an assistive message to announce the content of the code block to screen readers, so we don't need to announce the floating toolbar for those nodes
+      var nodesWithAlternativeRoles = ['codeBlock'];
+      if (nodesWithAlternativeRoles.includes(node.type.name)) {
+        return false;
+      }
+      return true;
+    });
     _this.scrollContainerRef = /*#__PURE__*/React.createRef();
     _this.mountRef = /*#__PURE__*/React.createRef();
     _this.toolbarContainerRef = /*#__PURE__*/React.createRef();
@@ -679,6 +687,7 @@ var Toolbar = /*#__PURE__*/function (_Component) {
       var hasSelect = items.find(function (item) {
         return item.type === 'select' && item.selectType === 'list';
       });
+      var shouldRenderAssistiveAnnouncer = expValEquals('editor_a11y_role_textbox', 'isEnabled', true) ? this.doesNodeRequireAssitiveMessage(node) : true;
       return jsx(React.Fragment, null, jsx(ToolbarArrowKeyNavigationProvider, {
         editorView: this.props.editorView,
         handleEscape: this.handleEscape,
@@ -698,7 +707,7 @@ var Toolbar = /*#__PURE__*/function (_Component) {
         ,
         className: className,
         onMouseDown: areAnyNewToolbarFlagsEnabled ? this.captureMouseEvent : undefined
-      }, jsx(Announcer, {
+      }, shouldRenderAssistiveAnnouncer && jsx(Announcer, {
         text: mediaAssistiveMessage ? "".concat(mediaAssistiveMessage, ", ").concat(intl.formatMessage(messages.floatingToolbarAnnouncer)) : intl.formatMessage(messages.floatingToolbarAnnouncer),
         delay: 250
       }), scrollable && areAnyNewToolbarFlagsEnabled && jsx(ScrollButton, {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-floating-toolbar",
-	"version": "9.1.27",
+	"version": "9.2.0",
 	"description": "Floating toolbar plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -44,8 +44,8 @@
 		"@atlaskit/primitives": "^18.0.0",
 		"@atlaskit/select": "^21.7.0",
 		"@atlaskit/theme": "^22.0.0",
-		"@atlaskit/tmp-editor-statsig": "^34.0.0",
-		"@atlaskit/tokens": "^11.0.0",
+		"@atlaskit/tmp-editor-statsig": "^35.7.0",
+		"@atlaskit/tokens": "^11.1.0",
 		"@atlaskit/tooltip": "^20.14.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -56,7 +56,7 @@
 		"react-loadable": "^5.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^111.28.0",
+		"@atlaskit/editor-common": "^111.34.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0"
 	},