@atlaskit/spotlight 0.3.2 → 0.3.4

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/spotlight
 
+## 0.3.4
+
+### Patch Changes
+
+- [`cc92031710191`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cc92031710191) -
+  `SpotlightDismissControl` now applies `autofocus` when it is mounted.
+
+## 0.3.3
+
+### Patch Changes
+
+- [`bd8e43d78afb8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bd8e43d78afb8) - -
+  Add `role="dialog"` to PopoverContent. `aria-labelledby` is internally managed by
+  `SpotlightContext`.
+  - Add `aria-label='Dismiss'` to `SpotlightDismissControl`.
+  - Add `aria-label'` prop to `SpotlightPrimaryAction`.
+  - Add `aria-label'` prop to `SpotlightSecondaryAction`.
+
 ## 0.3.2
 
 ### Patch Changes

package/dist/cjs/controllers/context.js

@@ -1,4 +1,4 @@
-/* context.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* context.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -19,20 +19,35 @@ var SpotlightContext = exports.SpotlightContext = /*#__PURE__*/(0, _react.create
   placement: 'bottom-end',
   setPlacement: function setPlacement() {
     return undefined;
+  },
+  heading: {
+    id: '',
+    setId: function setId() {
+      return undefined;
+    }
   }
 });
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 var SpotlightContextProvider = exports.SpotlightContextProvider = function SpotlightContextProvider(_ref) {
   var children = _ref.children;
+  var id = (0, _react.useId)();
   var _useState = (0, _react.useState)('bottom-end'),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     placement = _useState2[0],
     setPlacement = _useState2[1];
+  var _useState3 = (0, _react.useState)("".concat(id, "-heading")),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    headingId = _useState4[0],
+    setHeadingId = _useState4[1];
   return /*#__PURE__*/React.createElement(SpotlightContext.Provider, {
     value: {
       placement: placement,
-      setPlacement: setPlacement
+      setPlacement: setPlacement,
+      heading: {
+        id: headingId,
+        setId: setHeadingId
+      }
     }
   }, children);
 };

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

package/dist/cjs/ui/card/caret/index.compiled.css

@@ -1,10 +1,11 @@
 ._1bsbo7ao{width:15px}
-._1eint94y{border-end-end-radius:1px}
 ._1pby1fw0{z-index:700}
-._1s1gt94y{border-start-start-radius:1px}
 ._1yxnt94y{border-end-start-radius:1px}
 ._4t3io7ao{height:15px}
-._5fbct94y{border-start-end-radius:1px}
 ._bfhkcdhy{background-color:var(--ds-background-neutral-bold,#44546f)}
 ._kqswh2mm{position:relative}
+._mkrzmhja{clip-path:polygon(0 0,100% 100%,0 100%)}
+._t9ec1hke{transform:rotate(135deg)}
+._t9ec71a3{transform:rotate(315deg)}
+._t9ecebzf{transform:rotate(225deg)}
 ._t9ecjyd4{transform:rotate(45deg)}

package/dist/cjs/ui/card/caret/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");
@@ -13,17 +13,17 @@ var _runtime = require("@compiled/react/runtime");
 var _context = require("../../../controllers/context");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
-  root: "_kqswh2mm _1pby1fw0 _1bsbo7ao _4t3io7ao _t9ecjyd4 _bfhkcdhy",
-  'top-start': "_1eint94y",
-  'top-center': "_1eint94y",
-  'top-end': "_1eint94y",
-  'bottom-start': "_1s1gt94y",
-  'bottom-center': "_1s1gt94y",
-  'bottom-end': "_1s1gt94y",
-  'right-start': "_1yxnt94y",
-  'right-end': "_1yxnt94y",
-  'left-start': "_5fbct94y",
-  'left-end': "_5fbct94y"
+  root: "_bfhkcdhy _1yxnt94y _mkrzmhja _4t3io7ao _kqswh2mm _1bsbo7ao _1pby1fw0",
+  'top-start': "_t9ec71a3",
+  'top-center': "_t9ec71a3",
+  'top-end': "_t9ec71a3",
+  'bottom-start': "_t9ec1hke",
+  'bottom-center': "_t9ec1hke",
+  'bottom-end': "_t9ec1hke",
+  'right-start': "_t9ecjyd4",
+  'right-end': "_t9ecjyd4",
+  'left-start': "_t9ecebzf",
+  'left-end': "_t9ecebzf"
 };
 /**
  * __Caret__

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

package/dist/cjs/ui/dismiss-control/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -24,13 +24,19 @@ var styles = {
  *
  */
 var SpotlightDismissControl = exports.SpotlightDismissControl = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var onClick = _ref.onClick,
+  var _ref$autoFocus = _ref.autoFocus,
+    autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
+    onClick = _ref.onClick,
     testId = _ref.testId;
-  return /*#__PURE__*/React.createElement(_compiled.Pressable, {
-    xcss: styles.root,
+  return /*#__PURE__*/React.createElement(_compiled.Pressable
+  // eslint-disable-next-line jsx-a11y/no-autofocus -- VERIFIED: autoFocus moving to first focusable element on non-modal modal dialog.
+  , {
+    autoFocus: autoFocus,
     onClick: onClick,
     ref: ref,
-    testId: testId
+    testId: testId,
+    xcss: styles.root,
+    "aria-label": "Dismiss"
   }, /*#__PURE__*/React.createElement(_cross.default, {
     label: "Close"
   }));

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -11,6 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _heading = _interopRequireDefault(require("@atlaskit/heading"));
+var _context = require("../../controllers/context");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 /**
  * __SpotlightHeadline__
@@ -21,7 +22,10 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 var SpotlightHeadline = exports.SpotlightHeadline = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var children = _ref.children,
     testId = _ref.testId;
+  var _useContext = (0, _react.useContext)(_context.SpotlightContext),
+    heading = _useContext.heading;
   return /*#__PURE__*/React.createElement(_heading.default, {
+    id: heading.id,
     ref: ref,
     testId: testId,
     size: "xsmall"

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

package/dist/cjs/ui/popover-content/index.compiled.css

@@ -1,5 +1 @@
-._1pby1fw0{z-index:700}
-._3um015vq{visibility:hidden}
-._3um0ewfl{visibility:visible}
-._lcxv1wug{pointer-events:auto}
-._lcxvglyw{pointer-events:none}
+._1pby1fw0{z-index:700}

package/dist/cjs/ui/popover-content/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");
@@ -16,10 +16,6 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 var styles = {
   root: "_1pby1fw0"
 };
-var visibilityStyles = {
-  visible: "_lcxv1wug _3um0ewfl",
-  hidden: "_lcxvglyw _3um015vq"
-};
 
 /**
  * The `transform: rotate(45deg);` styles used to rotate the `Caret` component result in the corners of
@@ -58,10 +54,11 @@ var PopoverContent = exports.PopoverContent = function PopoverContent(_ref) {
   var children = _ref.children,
     placement = _ref.placement,
     _ref$isVisible = _ref.isVisible,
-    isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible;
+    isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible,
+    testId = _ref.testId;
   var _useContext = (0, _react.useContext)(_context.SpotlightContext),
-    setPlacement = _useContext.setPlacement;
-  var visibility = isVisible ? 'visible' : 'hidden';
+    setPlacement = _useContext.setPlacement,
+    heading = _useContext.heading;
   (0, _react.useEffect)(function () {
     setPlacement(placement);
   }, [placement, setPlacement]);
@@ -71,10 +68,18 @@ var PopoverContent = exports.PopoverContent = function PopoverContent(_ref) {
   }, function (_ref2) {
     var ref = _ref2.ref,
       style = _ref2.style;
+    if (!isVisible) {
+      return;
+    }
     return /*#__PURE__*/React.createElement("div", {
-      ref: ref,
+      role: "dialog",
+      "data-testid": testId,
+      "aria-labelledby": heading.id,
+      ref: ref
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      ,
       style: style,
-      className: (0, _runtime.ax)([styles.root, visibilityStyles[visibility]])
+      className: (0, _runtime.ax)([styles.root])
     }, children);
   });
 };

package/dist/cjs/ui/popover-provider/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

package/dist/cjs/ui/popover-target/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

package/dist/cjs/ui/primary-action/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");
@@ -23,10 +23,12 @@ var styles = {
  *
  */
 var SpotlightPrimaryAction = exports.SpotlightPrimaryAction = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var onClick = _ref.onClick,
+  var ariaLabel = _ref['aria-label'],
+    onClick = _ref.onClick,
     children = _ref.children,
     testId = _ref.testId;
   return /*#__PURE__*/React.createElement(_compiled.Pressable, {
+    "aria-label": ariaLabel,
     ref: ref,
     testId: testId,
     xcss: styles.root,

package/dist/cjs/ui/secondary-action/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");
@@ -23,10 +23,12 @@ var styles = {
  *
  */
 var SpotlightSecondaryAction = exports.SpotlightSecondaryAction = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var onClick = _ref.onClick,
+  var ariaLabel = _ref['aria-label'],
+    onClick = _ref.onClick,
     children = _ref.children,
     testId = _ref.testId;
   return /*#__PURE__*/React.createElement(_compiled.Pressable, {
+    "aria-label": ariaLabel,
     ref: ref,
     testId: testId,
     xcss: styles.root,

package/dist/cjs/ui/show-more-control/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/ui/step-count/index.js

@@ -1,6 +1,7 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -11,6 +12,7 @@ var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _compiled = require("@atlaskit/primitives/compiled");
+var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
   root: "_1ul91ris"
@@ -29,5 +31,5 @@ var SpotlightStepCount = exports.SpotlightStepCount = /*#__PURE__*/(0, _react.fo
   }, /*#__PURE__*/React.createElement(_compiled.Text, {
     ref: ref,
     testId: testId
-  }, children));
+  }, children, " ", /*#__PURE__*/React.createElement(_visuallyHidden.default, null, "steps")));
 });

package/dist/es2019/controllers/context.js

@@ -1,25 +1,35 @@
-/* context.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* context.tsx generated by @compiled/babel-plugin v0.38.1 */
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { createContext, useState } from 'react';
+import { createContext, useId, useState } from 'react';
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export const SpotlightContext = /*#__PURE__*/createContext({
   placement: 'bottom-end',
-  setPlacement: () => undefined
+  setPlacement: () => undefined,
+  heading: {
+    id: '',
+    setId: () => undefined
+  }
 });
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export const SpotlightContextProvider = ({
   children
 }) => {
+  const id = useId();
   const [placement, setPlacement] = useState('bottom-end');
+  const [headingId, setHeadingId] = useState(`${id}-heading`);
   return /*#__PURE__*/React.createElement(SpotlightContext.Provider, {
     value: {
       placement,
-      setPlacement
+      setPlacement,
+      heading: {
+        id: headingId,
+        setId: setHeadingId
+      }
     }
   }, children);
 };

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/ui/card/caret/index.compiled.css

@@ -1,10 +1,11 @@
 ._1bsbo7ao{width:15px}
-._1eint94y{border-end-end-radius:1px}
 ._1pby1fw0{z-index:700}
-._1s1gt94y{border-start-start-radius:1px}
 ._1yxnt94y{border-end-start-radius:1px}
 ._4t3io7ao{height:15px}
-._5fbct94y{border-start-end-radius:1px}
 ._bfhkcdhy{background-color:var(--ds-background-neutral-bold,#44546f)}
 ._kqswh2mm{position:relative}
+._mkrzmhja{clip-path:polygon(0 0,100% 100%,0 100%)}
+._t9ec1hke{transform:rotate(135deg)}
+._t9ec71a3{transform:rotate(315deg)}
+._t9ecebzf{transform:rotate(225deg)}
 ._t9ecjyd4{transform:rotate(45deg)}

package/dist/es2019/ui/card/caret/index.js

@@ -1,21 +1,21 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, useContext } from 'react';
 import { SpotlightContext } from '../../../controllers/context';
 const styles = {
-  root: "_kqswh2mm _1pby1fw0 _1bsbo7ao _4t3io7ao _t9ecjyd4 _bfhkcdhy",
-  'top-start': "_1eint94y",
-  'top-center': "_1eint94y",
-  'top-end': "_1eint94y",
-  'bottom-start': "_1s1gt94y",
-  'bottom-center': "_1s1gt94y",
-  'bottom-end': "_1s1gt94y",
-  'right-start': "_1yxnt94y",
-  'right-end': "_1yxnt94y",
-  'left-start': "_5fbct94y",
-  'left-end': "_5fbct94y"
+  root: "_bfhkcdhy _1yxnt94y _mkrzmhja _4t3io7ao _kqswh2mm _1bsbo7ao _1pby1fw0",
+  'top-start': "_t9ec71a3",
+  'top-center': "_t9ec71a3",
+  'top-end': "_t9ec71a3",
+  'bottom-start': "_t9ec1hke",
+  'bottom-center': "_t9ec1hke",
+  'bottom-end': "_t9ec1hke",
+  'right-start': "_t9ecjyd4",
+  'right-end': "_t9ecjyd4",
+  'left-start': "_t9ecebzf",
+  'left-end': "_t9ecebzf"
 };
 /**
  * __Caret__

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/ui/dismiss-control/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -15,14 +15,19 @@ const styles = {
  *
  */
 export const SpotlightDismissControl = /*#__PURE__*/forwardRef(({
+  autoFocus = true,
   onClick,
   testId
 }, ref) => {
-  return /*#__PURE__*/React.createElement(Pressable, {
-    xcss: styles.root,
+  return /*#__PURE__*/React.createElement(Pressable
+  // eslint-disable-next-line jsx-a11y/no-autofocus -- VERIFIED: autoFocus moving to first focusable element on non-modal modal dialog.
+  , {
+    autoFocus: autoFocus,
     onClick: onClick,
     ref: ref,
-    testId: testId
+    testId: testId,
+    xcss: styles.root,
+    "aria-label": "Dismiss"
   }, /*#__PURE__*/React.createElement(CrossIcon, {
     label: "Close"
   }));

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,8 +1,9 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { forwardRef } from 'react';
+import { forwardRef, useContext } from 'react';
 import Heading from '@atlaskit/heading';
+import { SpotlightContext } from '../../controllers/context';
 /**
  * __SpotlightHeadline__
  *
@@ -13,7 +14,11 @@ export const SpotlightHeadline = /*#__PURE__*/forwardRef(({
   children,
   testId
 }, ref) => {
+  const {
+    heading
+  } = useContext(SpotlightContext);
   return /*#__PURE__*/React.createElement(Heading, {
+    id: heading.id,
     ref: ref,
     testId: testId,
     size: "xsmall"

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/ui/popover-content/index.compiled.css

@@ -1,5 +1 @@
-._1pby1fw0{z-index:700}
-._3um015vq{visibility:hidden}
-._3um0ewfl{visibility:visible}
-._lcxv1wug{pointer-events:auto}
-._lcxvglyw{pointer-events:none}
+._1pby1fw0{z-index:700}

package/dist/es2019/ui/popover-content/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -8,10 +8,6 @@ import { SpotlightContext } from '../../controllers/context';
 const styles = {
   root: "_1pby1fw0"
 };
-const visibilityStyles = {
-  visible: "_lcxv1wug _3um0ewfl",
-  hidden: "_lcxvglyw _3um015vq"
-};
 
 /**
  * The `transform: rotate(45deg);` styles used to rotate the `Caret` component result in the corners of
@@ -49,12 +45,13 @@ const popperPlacementMap = {
 export const PopoverContent = ({
   children,
   placement,
-  isVisible = true
+  isVisible = true,
+  testId
 }) => {
   const {
-    setPlacement
+    setPlacement,
+    heading
   } = useContext(SpotlightContext);
-  const visibility = isVisible ? 'visible' : 'hidden';
   useEffect(() => {
     setPlacement(placement);
   }, [placement, setPlacement]);
@@ -64,9 +61,19 @@ export const PopoverContent = ({
   }, ({
     ref,
     style
-  }) => /*#__PURE__*/React.createElement("div", {
-    ref: ref,
-    style: style,
-    className: ax([styles.root, visibilityStyles[visibility]])
-  }, children));
+  }) => {
+    if (!isVisible) {
+      return;
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      role: "dialog",
+      "data-testid": testId,
+      "aria-labelledby": heading.id,
+      ref: ref
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      ,
+      style: style,
+      className: ax([styles.root])
+    }, children);
+  });
 };

package/dist/es2019/ui/popover-provider/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { Manager } from '@atlaskit/popper';