@atlaskit/spotlight 0.3.2 → 0.3.3

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/spotlight
 
+## 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.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/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");
@@ -27,6 +27,7 @@ var SpotlightDismissControl = exports.SpotlightDismissControl = /*#__PURE__*/(0,
   var onClick = _ref.onClick,
     testId = _ref.testId;
   return /*#__PURE__*/React.createElement(_compiled.Pressable, {
+    "aria-label": "Dismiss",
     xcss: styles.root,
     onClick: onClick,
     ref: ref,

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.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");
@@ -58,9 +58,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;
+    setPlacement = _useContext.setPlacement,
+    heading = _useContext.heading;
   var visibility = isVisible ? 'visible' : 'hidden';
   (0, _react.useEffect)(function () {
     setPlacement(placement);
@@ -72,7 +74,12 @@ var PopoverContent = exports.PopoverContent = function PopoverContent(_ref) {
     var ref = _ref2.ref,
       style = _ref2.style;
     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]])
     }, 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.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/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";
@@ -19,6 +19,7 @@ export const SpotlightDismissControl = /*#__PURE__*/forwardRef(({
   testId
 }, ref) => {
   return /*#__PURE__*/React.createElement(Pressable, {
+    "aria-label": "Dismiss",
     xcss: styles.root,
     onClick: onClick,
     ref: ref,

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.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";
@@ -49,10 +49,12 @@ const popperPlacementMap = {
 export const PopoverContent = ({
   children,
   placement,
-  isVisible = true
+  isVisible = true,
+  testId
 }) => {
   const {
-    setPlacement
+    setPlacement,
+    heading
   } = useContext(SpotlightContext);
   const visibility = isVisible ? 'visible' : 'hidden';
   useEffect(() => {
@@ -65,7 +67,12 @@ export const PopoverContent = ({
     ref,
     style
   }) => /*#__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: ax([styles.root, visibilityStyles[visibility]])
   }, 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';

package/dist/es2019/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 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/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 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -15,11 +15,13 @@ const styles = {
  *
  */
 export const SpotlightPrimaryAction = /*#__PURE__*/forwardRef(({
+  'aria-label': ariaLabel,
   onClick,
   children,
   testId
 }, ref) => {
   return /*#__PURE__*/React.createElement(Pressable, {
+    "aria-label": ariaLabel,
     ref: ref,
     testId: testId,
     xcss: styles.root,

package/dist/es2019/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 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -15,11 +15,13 @@ const styles = {
  *
  */
 export const SpotlightSecondaryAction = /*#__PURE__*/forwardRef(({
+  'aria-label': ariaLabel,
   onClick,
   children,
   testId
 }, ref) => {
   return /*#__PURE__*/React.createElement(Pressable, {
+    "aria-label": ariaLabel,
     ref: ref,
     testId: testId,
     xcss: styles.root,

package/dist/es2019/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 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,9 +1,10 @@
-/* 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 } from 'react';
 import { Flex, Text } from '@atlaskit/primitives/compiled';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 const styles = {
   root: "_1ul91ris"
 };
@@ -22,5 +23,5 @@ export const SpotlightStepCount = /*#__PURE__*/forwardRef(({
   }, /*#__PURE__*/React.createElement(Text, {
     ref: ref,
     testId: testId
-  }, children));
+  }, children, ' ', /*#__PURE__*/React.createElement(VisuallyHidden, null, "steps")));
 });

package/dist/esm/controllers/context.js

@@ -1,8 +1,8 @@
-/* context.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* context.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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
 
@@ -11,20 +11,35 @@ export var SpotlightContext = /*#__PURE__*/createContext({
   placement: 'bottom-end',
   setPlacement: function setPlacement() {
     return undefined;
+  },
+  heading: {
+    id: '',
+    setId: function setId() {
+      return undefined;
+    }
   }
 });
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export var SpotlightContextProvider = function SpotlightContextProvider(_ref) {
   var children = _ref.children;
+  var id = useId();
   var _useState = useState('bottom-end'),
     _useState2 = _slicedToArray(_useState, 2),
     placement = _useState2[0],
     setPlacement = _useState2[1];
+  var _useState3 = useState("".concat(id, "-heading")),
+    _useState4 = _slicedToArray(_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/esm/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/esm/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/esm/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 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/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/esm/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/esm/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";
@@ -18,6 +18,7 @@ export var SpotlightDismissControl = /*#__PURE__*/forwardRef(function (_ref, ref
   var onClick = _ref.onClick,
     testId = _ref.testId;
   return /*#__PURE__*/React.createElement(Pressable, {
+    "aria-label": "Dismiss",
     xcss: styles.root,
     onClick: onClick,
     ref: ref,

package/dist/esm/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/esm/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/esm/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__
  *
@@ -12,7 +13,10 @@ import Heading from '@atlaskit/heading';
 export var SpotlightHeadline = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     testId = _ref.testId;
+  var _useContext = useContext(SpotlightContext),
+    heading = _useContext.heading;
   return /*#__PURE__*/React.createElement(Heading, {
+    id: heading.id,
     ref: ref,
     testId: testId,
     size: "xsmall"

package/dist/esm/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/esm/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";
@@ -50,9 +50,11 @@ export var 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 = useContext(SpotlightContext),
-    setPlacement = _useContext.setPlacement;
+    setPlacement = _useContext.setPlacement,
+    heading = _useContext.heading;
   var visibility = isVisible ? 'visible' : 'hidden';
   useEffect(function () {
     setPlacement(placement);
@@ -64,7 +66,12 @@ export var PopoverContent = function PopoverContent(_ref) {
     var ref = _ref2.ref,
       style = _ref2.style;
     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: ax([styles.root, visibilityStyles[visibility]])
     }, children);

package/dist/esm/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';

package/dist/esm/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 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/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 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -15,10 +15,12 @@ var styles = {
  *
  */
 export var SpotlightPrimaryAction = /*#__PURE__*/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(Pressable, {
+    "aria-label": ariaLabel,
     ref: ref,
     testId: testId,
     xcss: styles.root,

package/dist/esm/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 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -15,10 +15,12 @@ var styles = {
  *
  */
 export var SpotlightSecondaryAction = /*#__PURE__*/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(Pressable, {
+    "aria-label": ariaLabel,
     ref: ref,
     testId: testId,
     xcss: styles.root,

package/dist/esm/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 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,9 +1,10 @@
-/* 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 } from 'react';
 import { Flex, Text } from '@atlaskit/primitives/compiled';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 var styles = {
   root: "_1ul91ris"
 };
@@ -21,5 +22,5 @@ export var SpotlightStepCount = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, /*#__PURE__*/React.createElement(Text, {
     ref: ref,
     testId: testId
-  }, children));
+  }, children, ' ', /*#__PURE__*/React.createElement(VisuallyHidden, null, "steps")));
 });

package/dist/types/controllers/context.d.ts

@@ -7,6 +7,10 @@ import type { Placement } from '../types';
 interface SpotlightContextType {
     placement: Placement;
     setPlacement: Dispatch<SetStateAction<Placement>>;
+    heading: {
+        id: string;
+        setId: Dispatch<SetStateAction<string>>;
+    };
 }
 export declare const SpotlightContext: import("react").Context<SpotlightContextType>;
 export declare const SpotlightContextProvider: ({ children }: {

package/dist/types/ui/popover-content/index.d.ts

@@ -5,6 +5,12 @@
 import { type ReactNode } from 'react';
 import type { Placement } from '../../types';
 interface PopoverContentProps {
+    /**
+     * A `testId` prop is provided for specified elements, which is a unique
+     * string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests
+     */
+    testId?: string;
     placement: Placement;
     isVisible?: boolean;
     children: ReactNode;
@@ -14,5 +20,5 @@ interface PopoverContentProps {
  *
  * A `PopoverContent` is the element that is shown as a popover.
  */
-export declare const PopoverContent: ({ children, placement, isVisible }: PopoverContentProps) => JSX.Element;
+export declare const PopoverContent: ({ children, placement, isVisible, testId }: PopoverContentProps) => JSX.Element;
 export {};

package/dist/types/ui/primary-action/index.d.ts

@@ -19,6 +19,10 @@ export interface SpotlightPrimaryActionProps {
      * The action to take when the button is clicked.
      */
     onClick?: PressableProps['onClick'];
+    /**
+     * An accessible label to read out in the event that the displayed text does not provide anough context.
+     */
+    'aria-label'?: string;
 }
 /**
  * __Spotlight primary action__

package/dist/types/ui/secondary-action/index.d.ts

@@ -19,6 +19,10 @@ export interface SpotlightSecondaryActionProps {
      * The action to take when the button is clicked.
      */
     onClick?: PressableProps['onClick'];
+    /**
+     * An accessible label to read out in the event that the displayed text does not provide anough context.
+     */
+    'aria-label'?: string;
 }
 /**
  * __Spotlight secondary action__

package/dist/types-ts4.5/controllers/context.d.ts

@@ -7,6 +7,10 @@ import type { Placement } from '../types';
 interface SpotlightContextType {
     placement: Placement;
     setPlacement: Dispatch<SetStateAction<Placement>>;
+    heading: {
+        id: string;
+        setId: Dispatch<SetStateAction<string>>;
+    };
 }
 export declare const SpotlightContext: import("react").Context<SpotlightContextType>;
 export declare const SpotlightContextProvider: ({ children }: {

package/dist/types-ts4.5/ui/popover-content/index.d.ts

@@ -5,6 +5,12 @@
 import { type ReactNode } from 'react';
 import type { Placement } from '../../types';
 interface PopoverContentProps {
+    /**
+     * A `testId` prop is provided for specified elements, which is a unique
+     * string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests
+     */
+    testId?: string;
     placement: Placement;
     isVisible?: boolean;
     children: ReactNode;
@@ -14,5 +20,5 @@ interface PopoverContentProps {
  *
  * A `PopoverContent` is the element that is shown as a popover.
  */
-export declare const PopoverContent: ({ children, placement, isVisible }: PopoverContentProps) => JSX.Element;
+export declare const PopoverContent: ({ children, placement, isVisible, testId }: PopoverContentProps) => JSX.Element;
 export {};

package/dist/types-ts4.5/ui/primary-action/index.d.ts

@@ -19,6 +19,10 @@ export interface SpotlightPrimaryActionProps {
      * The action to take when the button is clicked.
      */
     onClick?: PressableProps['onClick'];
+    /**
+     * An accessible label to read out in the event that the displayed text does not provide anough context.
+     */
+    'aria-label'?: string;
 }
 /**
  * __Spotlight primary action__

package/dist/types-ts4.5/ui/secondary-action/index.d.ts

@@ -19,6 +19,10 @@ export interface SpotlightSecondaryActionProps {
      * The action to take when the button is clicked.
      */
     onClick?: PressableProps['onClick'];
+    /**
+     * An accessible label to read out in the event that the displayed text does not provide anough context.
+     */
+    'aria-label'?: string;
 }
 /**
  * __Spotlight secondary action__

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/spotlight",
-	"version": "0.3.2",
+	"version": "0.3.3",
 	"description": "A spotlight introduces users to various points of interest across Atlassian through focused messages or multi-step tours.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,8 +32,9 @@
 		"@atlaskit/icon": "^28.2.0",
 		"@atlaskit/image": "^3.0.0",
 		"@atlaskit/popper": "^7.1.0",
-		"@atlaskit/primitives": "^14.14.0",
+		"@atlaskit/primitives": "^14.15.0",
 		"@atlaskit/tokens": "^6.3.0",
+		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.3"
 	},