@atlaskit/jql-editor 5.0.3 → 5.0.5

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/jql-editor
 
+## 5.0.5
+
+### Patch Changes
+
+- [#124108](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/124108)
+  [`33144b1ee7e12`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/33144b1ee7e12) -
+  Fix accessibility issue in error messages section
+
+## 5.0.4
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 5.0.3
 
 ### Patch Changes

package/dist/cjs/analytics/util.js

@@ -6,5 +6,5 @@ Object.defineProperty(exports, "__esModule", {
 exports.useJqlEditorAnalytics = void 0;
 var _jqlEditorCommon = require("@atlaskit/jql-editor-common");
 var useJqlEditorAnalytics = exports.useJqlEditorAnalytics = function useJqlEditorAnalytics(analyticsSource) {
-  return (0, _jqlEditorCommon.useJqlPackageAnalytics)(analyticsSource, "@atlaskit/jql-editor", "5.0.3", _jqlEditorCommon.ANALYTICS_CHANNEL);
+  return (0, _jqlEditorCommon.useJqlPackageAnalytics)(analyticsSource, "@atlaskit/jql-editor", "5.0.5", _jqlEditorCommon.ANALYTICS_CHANNEL);
 };

package/dist/cjs/common/constants.js

@@ -3,9 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SYNTAX_HELP_DESCRIPTION_ID = exports.JQL_EDITOR_MAIN_ID = exports.JQL_EDITOR_INPUT_ID = exports.JQL_EDITOR_HELP_CONTENT_ID = exports.JQL_EDITOR_AUTOCOMPLETE_ID = void 0;
+exports.SYNTAX_HELP_DESCRIPTION_ID = exports.JQL_EDITOR_VALIDATION_ID = exports.JQL_EDITOR_MAIN_ID = exports.JQL_EDITOR_INPUT_ID = exports.JQL_EDITOR_HELP_CONTENT_ID = exports.JQL_EDITOR_AUTOCOMPLETE_ID = void 0;
 var JQL_EDITOR_MAIN_ID = exports.JQL_EDITOR_MAIN_ID = 'jql-editor-main';
 var JQL_EDITOR_AUTOCOMPLETE_ID = exports.JQL_EDITOR_AUTOCOMPLETE_ID = 'jql-editor-autocomplete';
 var JQL_EDITOR_INPUT_ID = exports.JQL_EDITOR_INPUT_ID = 'jql-editor-input';
 var JQL_EDITOR_HELP_CONTENT_ID = exports.JQL_EDITOR_HELP_CONTENT_ID = 'jql-editor-help-content';
+var JQL_EDITOR_VALIDATION_ID = exports.JQL_EDITOR_VALIDATION_ID = 'jql-editor-validation';
 var SYNTAX_HELP_DESCRIPTION_ID = exports.SYNTAX_HELP_DESCRIPTION_ID = 'syntax-help-description';

package/dist/cjs/common/styled.js

@@ -26,5 +26,5 @@ var hiddenMixin = exports.hiddenMixin = (0, _react.css)({
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var TooltipContent = exports.TooltipContent = _styled.default.div({
-  fontFamily: "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+  fontFamily: "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
 });

package/dist/cjs/plugins/autocomplete/components/autocomplete-option/styled.js

@@ -11,7 +11,7 @@ var _colors = require("@atlaskit/theme/colors");
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var TooltipContent = exports.TooltipContent = _styled.default.div({
-  fontFamily: "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+  fontFamily: "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766

package/dist/cjs/ui/jql-editor-footer-content/jql-messages/errors/index.js

@@ -13,6 +13,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactMagneticDi = require("react-magnetic-di");
 var _form = require("@atlaskit/form");
 var _jqlAst = require("@atlaskit/jql-ast");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("../../../../common/constants");
 var _messages = require("../../../../common/messages");
 var _useEditorTheme = require("../../../../hooks/use-editor-theme");
@@ -82,14 +83,19 @@ var ErrorMessages = exports.ErrorMessages = function ErrorMessages() {
   var _useScopedId = (0, _state.useScopedId)(_constants.JQL_EDITOR_INPUT_ID),
     _useScopedId2 = (0, _slicedToArray2.default)(_useScopedId, 1),
     editorId = _useScopedId2[0];
+  var _useScopedId3 = (0, _state.useScopedId)(_constants.JQL_EDITOR_VALIDATION_ID),
+    _useScopedId4 = (0, _slicedToArray2.default)(_useScopedId3, 1),
+    validationId = _useScopedId4[0];
   var errorMessage = useFormattedErrorMessage();
-  var testId = 'jql-editor-validation';
   var _useCustomErrorCompon = (0, _state.useCustomErrorComponent)(),
     _useCustomErrorCompon2 = (0, _slicedToArray2.default)(_useCustomErrorCompon, 1),
     CustomErrorComponent = _useCustomErrorCompon2[0];
   var childrenToRender = errorMessage != null ? /*#__PURE__*/_react.default.createElement(_format.MessageContainer, null, /*#__PURE__*/_react.default.createElement(_form.ErrorMessage, {
-    testId: testId
-  }, /*#__PURE__*/_react.default.createElement("span", {
+    testId: _constants.JQL_EDITOR_VALIDATION_ID
+  }, (0, _platformFeatureFlags.fg)('jql_editor_a11y') ? /*#__PURE__*/_react.default.createElement("span", {
+    role: "alert",
+    id: validationId
+  }, errorMessage) : /*#__PURE__*/_react.default.createElement("span", {
     role: "alert",
     "aria-describedby": editorId
   }, errorMessage))) : null;
@@ -97,7 +103,7 @@ var ErrorMessages = exports.ErrorMessages = function ErrorMessages() {
   // Only render CustomErrorComponent if there is an errorMessage
   if (errorMessage != null && CustomErrorComponent) {
     return /*#__PURE__*/_react.default.createElement(CustomComponentDecoratedWithEditorTheme, {
-      testId: testId,
+      testId: _constants.JQL_EDITOR_VALIDATION_ID,
       editorId: editorId,
       Component: CustomErrorComponent
     }, childrenToRender);

package/dist/cjs/ui/jql-editor-layout/styled.js

@@ -32,7 +32,7 @@ var fadeOut = (0, _react.keyframes)({
 });
 
 // eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression, @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var EditorMain = exports.EditorMain = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t/* CSS reset */\n\tfont-family: ", ";\n\tfont-size: 14px;\n\tflex-grow: 1;\n\n\t/* These styles and animations are derived from @atlaskit/tooltip */\n\n\t.", " {\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\tborder-radius: ", ";\n\t\tbox-sizing: border-box;\n\t\tfont: ", ";\n\t\tline-height: 1.3;\n\t\tmax-width: 240px;\n\t\tpadding: ", " ", ";\n\t\tword-wrap: break-word;\n\t\toverflow-wrap: break-word;\n\t\tz-index: ", ";\n\t\tpointer-events: none;\n\t\tposition: absolute;\n\t\tvisibility: hidden;\n\n\t\t/* Horizontally center and vertically position above the target element */\n\t\ttransform: translate(-50%, calc(-100% - ", "));\n\n\t\t&.", " {\n\t\t\tanimation: ", " 350ms cubic-bezier(0.15, 1, 0.3, 1);\n\t\t\tvisibility: visible;\n\t\t}\n\n\t\t&.", " {\n\t\t\tanimation: ", " 350ms cubic-bezier(0.15, 1, 0.3, 1);\n\t\t}\n\t}\n"])), "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)", _constants2.TOOLTIP_CLASSNAME, "var(--ds-background-neutral-bold, ".concat(_colors.N800, ")"), "var(--ds-text-inverse, ".concat(_colors.N0, ")"), "var(--ds-border-radius-100, 3px)", "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)", "var(--ds-space-025, 2px)", "var(--ds-space-075, 6px)", _constants.layers.tooltip(), "var(--ds-space-200, 16px)", _constants2.TOOLTIP_ENTER_CLASSNAME, fadeIn, _constants2.TOOLTIP_EXIT_CLASSNAME, fadeOut);
+var EditorMain = exports.EditorMain = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t/* CSS reset */\n\tfont-family: ", ";\n\tfont-size: 14px;\n\tflex-grow: 1;\n\n\t/* These styles and animations are derived from @atlaskit/tooltip */\n\n\t.", " {\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\tborder-radius: ", ";\n\t\tbox-sizing: border-box;\n\t\tfont: ", ";\n\t\tline-height: 1.3;\n\t\tmax-width: 240px;\n\t\tpadding: ", " ", ";\n\t\tword-wrap: break-word;\n\t\toverflow-wrap: break-word;\n\t\tz-index: ", ";\n\t\tpointer-events: none;\n\t\tposition: absolute;\n\t\tvisibility: hidden;\n\n\t\t/* Horizontally center and vertically position above the target element */\n\t\ttransform: translate(-50%, calc(-100% - ", "));\n\n\t\t&.", " {\n\t\t\tanimation: ", " 350ms cubic-bezier(0.15, 1, 0.3, 1);\n\t\t\tvisibility: visible;\n\t\t}\n\n\t\t&.", " {\n\t\t\tanimation: ", " 350ms cubic-bezier(0.15, 1, 0.3, 1);\n\t\t}\n\t}\n"])), "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)", _constants2.TOOLTIP_CLASSNAME, "var(--ds-background-neutral-bold, ".concat(_colors.N800, ")"), "var(--ds-text-inverse, ".concat(_colors.N0, ")"), "var(--ds-border-radius-100, 3px)", "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)", "var(--ds-space-025, 2px)", "var(--ds-space-075, 6px)", _constants.layers.tooltip(), "var(--ds-space-200, 16px)", _constants2.TOOLTIP_ENTER_CLASSNAME, fadeIn, _constants2.TOOLTIP_EXIT_CLASSNAME, fadeOut);
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var EditorFooter = exports.EditorFooter = _styled.default.div({

package/dist/cjs/ui/jql-editor-view/index.js

@@ -10,6 +10,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _throttle = _interopRequireDefault(require("lodash/throttle"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("../../common/constants");
 var _useEditorTheme = require("../../hooks/use-editor-theme");
 var _useEditorViewIsInvalid = require("../../hooks/use-editor-view-is-invalid");
@@ -51,6 +52,9 @@ var JQLEditorView = function JQLEditorView(_ref) {
   var _useScopedId7 = (0, _state.useScopedId)(_constants.JQL_EDITOR_HELP_CONTENT_ID),
     _useScopedId8 = (0, _slicedToArray2.default)(_useScopedId7, 1),
     helpContentId = _useScopedId8[0];
+  var _useScopedId9 = (0, _state.useScopedId)(_constants.JQL_EDITOR_VALIDATION_ID),
+    _useScopedId10 = (0, _slicedToArray2.default)(_useScopedId9, 1),
+    validationId = _useScopedId10[0];
   var _useIntl = (0, _state.useIntl)(),
     _useIntl2 = (0, _slicedToArray2.default)(_useIntl, 1),
     intl = _useIntl2[0];
@@ -120,13 +124,13 @@ var JQLEditorView = function JQLEditorView(_ref) {
       'aria-label': intl.formatMessage(_messages.messages.inputLabel),
       'aria-controls': autocompleteId,
       'aria-owns': autocompleteId,
-      'aria-describedby': helpContentId
+      'aria-describedby': (0, _platformFeatureFlags.fg)('jql_editor_a11y') ? editorViewIsInvalid ? validationId : helpContentId : helpContentId
     }, selectedOptionId && {
       'aria-activedescendant': selectedOptionId
     }), editorViewIsInvalid && {
       'aria-invalid': 'true'
     });
-  }, [editorId, isAutocompleteOpen, intl, autocompleteId, helpContentId, selectedOptionId, editorViewIsInvalid]);
+  }, [editorId, isAutocompleteOpen, intl, autocompleteId, editorViewIsInvalid, validationId, helpContentId, selectedOptionId]);
 
   // Update attributes on our editor view whenever they have changed
   (0, _react.useEffect)(function () {

package/dist/es2019/analytics/util.js

@@ -1,4 +1,4 @@
 import { ANALYTICS_CHANNEL, useJqlPackageAnalytics } from '@atlaskit/jql-editor-common';
 export const useJqlEditorAnalytics = analyticsSource => {
-  return useJqlPackageAnalytics(analyticsSource, "@atlaskit/jql-editor", "5.0.3", ANALYTICS_CHANNEL);
+  return useJqlPackageAnalytics(analyticsSource, "@atlaskit/jql-editor", "5.0.5", ANALYTICS_CHANNEL);
 };

package/dist/es2019/common/constants.js

@@ -2,4 +2,5 @@ export const JQL_EDITOR_MAIN_ID = 'jql-editor-main';
 export const JQL_EDITOR_AUTOCOMPLETE_ID = 'jql-editor-autocomplete';
 export const JQL_EDITOR_INPUT_ID = 'jql-editor-input';
 export const JQL_EDITOR_HELP_CONTENT_ID = 'jql-editor-help-content';
+export const JQL_EDITOR_VALIDATION_ID = 'jql-editor-validation';
 export const SYNTAX_HELP_DESCRIPTION_ID = 'syntax-help-description';

package/dist/es2019/common/styled.js

@@ -17,5 +17,5 @@ export const hiddenMixin = css({
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const TooltipContent = styled.div({
-  fontFamily: "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+  fontFamily: "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
 });

package/dist/es2019/plugins/autocomplete/components/autocomplete-option/styled.js

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 import { N100, N20, N50, N800 } from '@atlaskit/theme/colors';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const TooltipContent = styled.div({
-  fontFamily: "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+  fontFamily: "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766

package/dist/es2019/ui/jql-editor-footer-content/jql-messages/errors/index.js

@@ -3,7 +3,8 @@ import React, { useEffect } from 'react';
 import { di } from 'react-magnetic-di';
 import { ErrorMessage } from '@atlaskit/form';
 import { JQLSyntaxError } from '@atlaskit/jql-ast';
-import { JQL_EDITOR_INPUT_ID } from '../../../../common/constants';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { JQL_EDITOR_INPUT_ID, JQL_EDITOR_VALIDATION_ID } from '../../../../common/constants';
 import { commonMessages } from '../../../../common/messages';
 import { useEditorThemeContext } from '../../../../hooks/use-editor-theme';
 import { useEditorViewIsInvalid } from '../../../../hooks/use-editor-view-is-invalid';
@@ -67,12 +68,15 @@ const CustomComponentDecoratedWithEditorTheme = props => {
 };
 export const ErrorMessages = () => {
   const [editorId] = useScopedId(JQL_EDITOR_INPUT_ID);
+  const [validationId] = useScopedId(JQL_EDITOR_VALIDATION_ID);
   const errorMessage = useFormattedErrorMessage();
-  const testId = 'jql-editor-validation';
   const [CustomErrorComponent] = useCustomErrorComponent();
   const childrenToRender = errorMessage != null ? /*#__PURE__*/React.createElement(MessageContainer, null, /*#__PURE__*/React.createElement(ErrorMessage, {
-    testId: testId
-  }, /*#__PURE__*/React.createElement("span", {
+    testId: JQL_EDITOR_VALIDATION_ID
+  }, fg('jql_editor_a11y') ? /*#__PURE__*/React.createElement("span", {
+    role: "alert",
+    id: validationId
+  }, errorMessage) : /*#__PURE__*/React.createElement("span", {
     role: "alert",
     "aria-describedby": editorId
   }, errorMessage))) : null;
@@ -80,7 +84,7 @@ export const ErrorMessages = () => {
   // Only render CustomErrorComponent if there is an errorMessage
   if (errorMessage != null && CustomErrorComponent) {
     return /*#__PURE__*/React.createElement(CustomComponentDecoratedWithEditorTheme, {
-      testId: testId,
+      testId: JQL_EDITOR_VALIDATION_ID,
       editorId: editorId,
       Component: CustomErrorComponent
     }, childrenToRender);

package/dist/es2019/ui/jql-editor-layout/styled.js

@@ -26,7 +26,7 @@ const fadeOut = keyframes({
 // eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression, @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const EditorMain = styled.div`
 	/* CSS reset */
-	font-family: ${"var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"};
+	font-family: ${"var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"};
 	font-size: 14px;
 	flex-grow: 1;
 
@@ -37,7 +37,7 @@ export const EditorMain = styled.div`
 		color: ${`var(--ds-text-inverse, ${N0})`};
 		border-radius: ${"var(--ds-border-radius-100, 3px)"};
 		box-sizing: border-box;
-		font: ${"var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"};
+		font: ${"var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"};
 		line-height: 1.3;
 		max-width: 240px;
 		padding: ${"var(--ds-space-025, 2px)"} ${"var(--ds-space-075, 6px)"};

package/dist/es2019/ui/jql-editor-view/index.js

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
 import throttle from 'lodash/throttle';
-import { JQL_EDITOR_AUTOCOMPLETE_ID, JQL_EDITOR_HELP_CONTENT_ID, JQL_EDITOR_INPUT_ID, JQL_EDITOR_MAIN_ID } from '../../common/constants';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { JQL_EDITOR_AUTOCOMPLETE_ID, JQL_EDITOR_HELP_CONTENT_ID, JQL_EDITOR_INPUT_ID, JQL_EDITOR_MAIN_ID, JQL_EDITOR_VALIDATION_ID } from '../../common/constants';
 import { useEditorThemeContext } from '../../hooks/use-editor-theme';
 import { useEditorViewIsInvalid } from '../../hooks/use-editor-view-is-invalid';
 import { useAutocomplete, useAutocompleteIsOpen, useEditorView, useEditorViewHasFocus, useIntl, useLineNumbersVisible, useScopedId, useStoreActions } from '../../state';
@@ -30,6 +31,7 @@ const JQLEditorView = ({
   const [autocompleteId] = useScopedId(JQL_EDITOR_AUTOCOMPLETE_ID);
   const [editorId] = useScopedId(JQL_EDITOR_INPUT_ID);
   const [helpContentId] = useScopedId(JQL_EDITOR_HELP_CONTENT_ID);
+  const [validationId] = useScopedId(JQL_EDITOR_VALIDATION_ID);
   const [intl] = useIntl();
   const portalActions = usePortalActionsContext();
   const [, {
@@ -89,7 +91,7 @@ const JQLEditorView = ({
       'aria-label': intl.formatMessage(messages.inputLabel),
       'aria-controls': autocompleteId,
       'aria-owns': autocompleteId,
-      'aria-describedby': helpContentId,
+      'aria-describedby': fg('jql_editor_a11y') ? editorViewIsInvalid ? validationId : helpContentId : helpContentId,
       ...(selectedOptionId && {
         'aria-activedescendant': selectedOptionId
       }),
@@ -97,7 +99,7 @@ const JQLEditorView = ({
         'aria-invalid': 'true'
       })
     };
-  }, [editorId, isAutocompleteOpen, intl, autocompleteId, helpContentId, selectedOptionId, editorViewIsInvalid]);
+  }, [editorId, isAutocompleteOpen, intl, autocompleteId, editorViewIsInvalid, validationId, helpContentId, selectedOptionId]);
 
   // Update attributes on our editor view whenever they have changed
   useEffect(() => {

package/dist/esm/analytics/util.js

@@ -1,4 +1,4 @@
 import { ANALYTICS_CHANNEL, useJqlPackageAnalytics } from '@atlaskit/jql-editor-common';
 export var useJqlEditorAnalytics = function useJqlEditorAnalytics(analyticsSource) {
-  return useJqlPackageAnalytics(analyticsSource, "@atlaskit/jql-editor", "5.0.3", ANALYTICS_CHANNEL);
+  return useJqlPackageAnalytics(analyticsSource, "@atlaskit/jql-editor", "5.0.5", ANALYTICS_CHANNEL);
 };

package/dist/esm/common/constants.js

@@ -2,4 +2,5 @@ export var JQL_EDITOR_MAIN_ID = 'jql-editor-main';
 export var JQL_EDITOR_AUTOCOMPLETE_ID = 'jql-editor-autocomplete';
 export var JQL_EDITOR_INPUT_ID = 'jql-editor-input';
 export var JQL_EDITOR_HELP_CONTENT_ID = 'jql-editor-help-content';
+export var JQL_EDITOR_VALIDATION_ID = 'jql-editor-validation';
 export var SYNTAX_HELP_DESCRIPTION_ID = 'syntax-help-description';

package/dist/esm/common/styled.js

@@ -17,5 +17,5 @@ export var hiddenMixin = css({
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var TooltipContent = styled.div({
-  fontFamily: "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+  fontFamily: "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
 });

package/dist/esm/plugins/autocomplete/components/autocomplete-option/styled.js

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 import { N100, N20, N50, N800 } from '@atlaskit/theme/colors';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var TooltipContent = styled.div({
-  fontFamily: "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+  fontFamily: "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766

package/dist/esm/ui/jql-editor-footer-content/jql-messages/errors/index.js

@@ -6,7 +6,8 @@ import React, { useEffect } from 'react';
 import { di } from 'react-magnetic-di';
 import { ErrorMessage } from '@atlaskit/form';
 import { JQLSyntaxError } from '@atlaskit/jql-ast';
-import { JQL_EDITOR_INPUT_ID } from '../../../../common/constants';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { JQL_EDITOR_INPUT_ID, JQL_EDITOR_VALIDATION_ID } from '../../../../common/constants';
 import { commonMessages } from '../../../../common/messages';
 import { useEditorThemeContext } from '../../../../hooks/use-editor-theme';
 import { useEditorViewIsInvalid } from '../../../../hooks/use-editor-view-is-invalid';
@@ -72,14 +73,19 @@ export var ErrorMessages = function ErrorMessages() {
   var _useScopedId = useScopedId(JQL_EDITOR_INPUT_ID),
     _useScopedId2 = _slicedToArray(_useScopedId, 1),
     editorId = _useScopedId2[0];
+  var _useScopedId3 = useScopedId(JQL_EDITOR_VALIDATION_ID),
+    _useScopedId4 = _slicedToArray(_useScopedId3, 1),
+    validationId = _useScopedId4[0];
   var errorMessage = useFormattedErrorMessage();
-  var testId = 'jql-editor-validation';
   var _useCustomErrorCompon = useCustomErrorComponent(),
     _useCustomErrorCompon2 = _slicedToArray(_useCustomErrorCompon, 1),
     CustomErrorComponent = _useCustomErrorCompon2[0];
   var childrenToRender = errorMessage != null ? /*#__PURE__*/React.createElement(MessageContainer, null, /*#__PURE__*/React.createElement(ErrorMessage, {
-    testId: testId
-  }, /*#__PURE__*/React.createElement("span", {
+    testId: JQL_EDITOR_VALIDATION_ID
+  }, fg('jql_editor_a11y') ? /*#__PURE__*/React.createElement("span", {
+    role: "alert",
+    id: validationId
+  }, errorMessage) : /*#__PURE__*/React.createElement("span", {
     role: "alert",
     "aria-describedby": editorId
   }, errorMessage))) : null;
@@ -87,7 +93,7 @@ export var ErrorMessages = function ErrorMessages() {
   // Only render CustomErrorComponent if there is an errorMessage
   if (errorMessage != null && CustomErrorComponent) {
     return /*#__PURE__*/React.createElement(CustomComponentDecoratedWithEditorTheme, {
-      testId: testId,
+      testId: JQL_EDITOR_VALIDATION_ID,
       editorId: editorId,
       Component: CustomErrorComponent
     }, childrenToRender);

package/dist/esm/ui/jql-editor-layout/styled.js

@@ -26,7 +26,7 @@ var fadeOut = keyframes({
 });
 
 // eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression, @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var EditorMain = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t/* CSS reset */\n\tfont-family: ", ";\n\tfont-size: 14px;\n\tflex-grow: 1;\n\n\t/* These styles and animations are derived from @atlaskit/tooltip */\n\n\t.", " {\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\tborder-radius: ", ";\n\t\tbox-sizing: border-box;\n\t\tfont: ", ";\n\t\tline-height: 1.3;\n\t\tmax-width: 240px;\n\t\tpadding: ", " ", ";\n\t\tword-wrap: break-word;\n\t\toverflow-wrap: break-word;\n\t\tz-index: ", ";\n\t\tpointer-events: none;\n\t\tposition: absolute;\n\t\tvisibility: hidden;\n\n\t\t/* Horizontally center and vertically position above the target element */\n\t\ttransform: translate(-50%, calc(-100% - ", "));\n\n\t\t&.", " {\n\t\t\tanimation: ", " 350ms cubic-bezier(0.15, 1, 0.3, 1);\n\t\t\tvisibility: visible;\n\t\t}\n\n\t\t&.", " {\n\t\t\tanimation: ", " 350ms cubic-bezier(0.15, 1, 0.3, 1);\n\t\t}\n\t}\n"])), "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)", TOOLTIP_CLASSNAME, "var(--ds-background-neutral-bold, ".concat(N800, ")"), "var(--ds-text-inverse, ".concat(N0, ")"), "var(--ds-border-radius-100, 3px)", "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)", "var(--ds-space-025, 2px)", "var(--ds-space-075, 6px)", layers.tooltip(), "var(--ds-space-200, 16px)", TOOLTIP_ENTER_CLASSNAME, fadeIn, TOOLTIP_EXIT_CLASSNAME, fadeOut);
+export var EditorMain = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t/* CSS reset */\n\tfont-family: ", ";\n\tfont-size: 14px;\n\tflex-grow: 1;\n\n\t/* These styles and animations are derived from @atlaskit/tooltip */\n\n\t.", " {\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\tborder-radius: ", ";\n\t\tbox-sizing: border-box;\n\t\tfont: ", ";\n\t\tline-height: 1.3;\n\t\tmax-width: 240px;\n\t\tpadding: ", " ", ";\n\t\tword-wrap: break-word;\n\t\toverflow-wrap: break-word;\n\t\tz-index: ", ";\n\t\tpointer-events: none;\n\t\tposition: absolute;\n\t\tvisibility: hidden;\n\n\t\t/* Horizontally center and vertically position above the target element */\n\t\ttransform: translate(-50%, calc(-100% - ", "));\n\n\t\t&.", " {\n\t\t\tanimation: ", " 350ms cubic-bezier(0.15, 1, 0.3, 1);\n\t\t\tvisibility: visible;\n\t\t}\n\n\t\t&.", " {\n\t\t\tanimation: ", " 350ms cubic-bezier(0.15, 1, 0.3, 1);\n\t\t}\n\t}\n"])), "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)", TOOLTIP_CLASSNAME, "var(--ds-background-neutral-bold, ".concat(N800, ")"), "var(--ds-text-inverse, ".concat(N0, ")"), "var(--ds-border-radius-100, 3px)", "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)", "var(--ds-space-025, 2px)", "var(--ds-space-075, 6px)", layers.tooltip(), "var(--ds-space-200, 16px)", TOOLTIP_ENTER_CLASSNAME, fadeIn, TOOLTIP_EXIT_CLASSNAME, fadeOut);
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var EditorFooter = styled.div({

package/dist/esm/ui/jql-editor-view/index.js

@@ -4,7 +4,8 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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, { useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
 import throttle from 'lodash/throttle';
-import { JQL_EDITOR_AUTOCOMPLETE_ID, JQL_EDITOR_HELP_CONTENT_ID, JQL_EDITOR_INPUT_ID, JQL_EDITOR_MAIN_ID } from '../../common/constants';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { JQL_EDITOR_AUTOCOMPLETE_ID, JQL_EDITOR_HELP_CONTENT_ID, JQL_EDITOR_INPUT_ID, JQL_EDITOR_MAIN_ID, JQL_EDITOR_VALIDATION_ID } from '../../common/constants';
 import { useEditorThemeContext } from '../../hooks/use-editor-theme';
 import { useEditorViewIsInvalid } from '../../hooks/use-editor-view-is-invalid';
 import { useAutocomplete, useAutocompleteIsOpen, useEditorView, useEditorViewHasFocus, useIntl, useLineNumbersVisible, useScopedId, useStoreActions } from '../../state';
@@ -43,6 +44,9 @@ var JQLEditorView = function JQLEditorView(_ref) {
   var _useScopedId7 = useScopedId(JQL_EDITOR_HELP_CONTENT_ID),
     _useScopedId8 = _slicedToArray(_useScopedId7, 1),
     helpContentId = _useScopedId8[0];
+  var _useScopedId9 = useScopedId(JQL_EDITOR_VALIDATION_ID),
+    _useScopedId10 = _slicedToArray(_useScopedId9, 1),
+    validationId = _useScopedId10[0];
   var _useIntl = useIntl(),
     _useIntl2 = _slicedToArray(_useIntl, 1),
     intl = _useIntl2[0];
@@ -112,13 +116,13 @@ var JQLEditorView = function JQLEditorView(_ref) {
       'aria-label': intl.formatMessage(messages.inputLabel),
       'aria-controls': autocompleteId,
       'aria-owns': autocompleteId,
-      'aria-describedby': helpContentId
+      'aria-describedby': fg('jql_editor_a11y') ? editorViewIsInvalid ? validationId : helpContentId : helpContentId
     }, selectedOptionId && {
       'aria-activedescendant': selectedOptionId
     }), editorViewIsInvalid && {
       'aria-invalid': 'true'
     });
-  }, [editorId, isAutocompleteOpen, intl, autocompleteId, helpContentId, selectedOptionId, editorViewIsInvalid]);
+  }, [editorId, isAutocompleteOpen, intl, autocompleteId, editorViewIsInvalid, validationId, helpContentId, selectedOptionId]);
 
   // Update attributes on our editor view whenever they have changed
   useEffect(function () {

package/dist/types/common/constants.d.ts

@@ -2,4 +2,5 @@ export declare const JQL_EDITOR_MAIN_ID = "jql-editor-main";
 export declare const JQL_EDITOR_AUTOCOMPLETE_ID = "jql-editor-autocomplete";
 export declare const JQL_EDITOR_INPUT_ID = "jql-editor-input";
 export declare const JQL_EDITOR_HELP_CONTENT_ID = "jql-editor-help-content";
+export declare const JQL_EDITOR_VALIDATION_ID = "jql-editor-validation";
 export declare const SYNTAX_HELP_DESCRIPTION_ID = "syntax-help-description";

package/dist/types-ts4.5/common/constants.d.ts

@@ -2,4 +2,5 @@ export declare const JQL_EDITOR_MAIN_ID = "jql-editor-main";
 export declare const JQL_EDITOR_AUTOCOMPLETE_ID = "jql-editor-autocomplete";
 export declare const JQL_EDITOR_INPUT_ID = "jql-editor-input";
 export declare const JQL_EDITOR_HELP_CONTENT_ID = "jql-editor-help-content";
+export declare const JQL_EDITOR_VALIDATION_ID = "jql-editor-validation";
 export declare const SYNTAX_HELP_DESCRIPTION_ID = "syntax-help-description";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/jql-editor",
-	"version": "5.0.3",
+	"version": "5.0.5",
 	"description": "This package allows consumers to render an advanced JQL editor component to enable autocomplete-assisted authoring and validation of JQL queries.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -52,8 +52,8 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.1.0",
 		"@atlaskit/spinner": "^18.0.0",
-		"@atlaskit/theme": "^17.0.0",
-		"@atlaskit/tokens": "^4.2.0",
+		"@atlaskit/theme": "^18.0.0",
+		"@atlaskit/tokens": "^4.3.0",
 		"@atlaskit/tooltip": "^20.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -75,11 +75,11 @@
 		"react-dom": "^18.2.0"
 	},
 	"devDependencies": {
-		"@af/integration-testing": "*",
-		"@atlaskit/docs": "*",
+		"@af/integration-testing": "^0.5.0",
+		"@atlaskit/docs": "^10.0.0",
 		"@atlaskit/jql-editor-autocomplete-rest": "^3.0.0",
-		"@atlaskit/visual-regression": "*",
-		"@atlassian/feature-flags-test-utils": "0.3.1",
+		"@atlaskit/visual-regression": "^0.10.0",
+		"@atlassian/feature-flags-test-utils": "^0.3.0",
 		"@storybook/addon-actions": "^6.4.0",
 		"@storybook/addon-knobs": "^6.4.0",
 		"@testing-library/jest-dom": "^6.4.5",
@@ -133,6 +133,9 @@
 		},
 		"add_nin_press_interactions": {
 			"type": "boolean"
+		},
+		"jql_editor_a11y": {
+			"type": "boolean"
 		}
 	}
 }