@atlaskit/progress-indicator 13.0.0 → 13.0.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/progress-indicator
 
+## 13.0.1
+
+### Patch Changes
+
+- [`6fa577ac3e5ea`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6fa577ac3e5ea) -
+  Add descriptive accessible labels for carousel controls and selectable progress indicators.
+
 ## 13.0.0
 
 ### Major Changes

package/dist/cjs/components/button-indicator.js

@@ -57,6 +57,7 @@ var ButtonIndicator = exports.ButtonIndicator = function ButtonIndicator(_ref) {
   var appearance = _ref.appearance,
     panelId = _ref.panelId,
     tabId = _ref.tabId,
+    label = _ref.label,
     isSelected = _ref.isSelected,
     onClick = _ref.onClick,
     testId = _ref.testId;
@@ -72,5 +73,5 @@ var ButtonIndicator = exports.ButtonIndicator = function ButtonIndicator(_ref) {
     onClick: onClick,
     tabIndex: isSelected ? -1 : undefined,
     testId: testId
-  }, /*#__PURE__*/React.createElement(_visuallyHidden.default, null, tabId));
+  }, /*#__PURE__*/React.createElement(_visuallyHidden.default, null, label));
 };

package/dist/cjs/components/progress-dots.js

@@ -16,7 +16,7 @@ var _buttonIndicator = require("./button-indicator");
 var _presentationalIndicator = require("./presentational-indicator");
 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 packageName = "@atlaskit/progress-indicator";
-var packageVersion = "12.0.20";
+var packageVersion = "13.0.0";
 var progressIndicatorGapMap = {
   comfortable: {
     default: 'space.100',
@@ -50,6 +50,7 @@ var ProgressDots = function ProgressDots(_ref) {
     ariaControls = _ref$ariaControls === void 0 ? 'panel' : _ref$ariaControls,
     _ref$ariaLabel = _ref.ariaLabel,
     ariaLabel = _ref$ariaLabel === void 0 ? 'tab' : _ref$ariaLabel,
+    getAriaLabel = _ref.getAriaLabel,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'default' : _ref$size,
     _ref$spacing = _ref.spacing,
@@ -127,6 +128,7 @@ var ProgressDots = function ProgressDots(_ref) {
     var isSelected = selectedIndex === index;
     var tabId = "".concat(ariaLabel).concat(index);
     var panelId = "".concat(ariaControls).concat(index);
+    var label = getAriaLabel ? getAriaLabel(index) : tabId;
     var indicatorTestId = testId && "".concat(testId, "-ind-").concat(index);
     return onSelect ? /*#__PURE__*/_react.default.createElement(_buttonIndicator.ButtonIndicator, {
       key: index,
@@ -135,6 +137,7 @@ var ProgressDots = function ProgressDots(_ref) {
       isSelected: isSelected,
       tabId: tabId,
       panelId: panelId,
+      label: label,
       onClick: function onClick(event) {
         return onSelectWithAnalytics({
           event: event,

package/dist/es2019/components/button-indicator.js

@@ -48,6 +48,7 @@ export const ButtonIndicator = ({
   appearance,
   panelId,
   tabId,
+  label,
   isSelected,
   onClick,
   testId
@@ -64,5 +65,5 @@ export const ButtonIndicator = ({
     onClick: onClick,
     tabIndex: isSelected ? -1 : undefined,
     testId: testId
-  }, /*#__PURE__*/React.createElement(VisuallyHidden, null, tabId));
+  }, /*#__PURE__*/React.createElement(VisuallyHidden, null, label));
 };

package/dist/es2019/components/progress-dots.js

@@ -6,7 +6,7 @@ import { Box, Inline } from '@atlaskit/primitives/compiled';
 import { ButtonIndicator } from './button-indicator';
 import { PresentationalIndicator } from './presentational-indicator';
 const packageName = "@atlaskit/progress-indicator";
-const packageVersion = "12.0.20";
+const packageVersion = "13.0.0";
 const progressIndicatorGapMap = {
   comfortable: {
     default: 'space.100',
@@ -37,6 +37,7 @@ const ProgressDots = ({
   appearance = 'default',
   ariaControls = 'panel',
   ariaLabel = 'tab',
+  getAriaLabel,
   size = 'default',
   // NOTE: `spacing` is a reserved HTML attribute and will be added to the
   // element, replaced with `gutter`.
@@ -119,6 +120,7 @@ const ProgressDots = ({
     const isSelected = selectedIndex === index;
     const tabId = `${ariaLabel}${index}`;
     const panelId = `${ariaControls}${index}`;
+    const label = getAriaLabel ? getAriaLabel(index) : tabId;
     const indicatorTestId = testId && `${testId}-ind-${index}`;
     return onSelect ? /*#__PURE__*/React.createElement(ButtonIndicator, {
       key: index,
@@ -127,6 +129,7 @@ const ProgressDots = ({
       isSelected: isSelected,
       tabId: tabId,
       panelId: panelId,
+      label: label,
       onClick: event => onSelectWithAnalytics({
         event,
         index

package/dist/esm/components/button-indicator.js

@@ -48,6 +48,7 @@ export var ButtonIndicator = function ButtonIndicator(_ref) {
   var appearance = _ref.appearance,
     panelId = _ref.panelId,
     tabId = _ref.tabId,
+    label = _ref.label,
     isSelected = _ref.isSelected,
     onClick = _ref.onClick,
     testId = _ref.testId;
@@ -63,5 +64,5 @@ export var ButtonIndicator = function ButtonIndicator(_ref) {
     onClick: onClick,
     tabIndex: isSelected ? -1 : undefined,
     testId: testId
-  }, /*#__PURE__*/React.createElement(VisuallyHidden, null, tabId));
+  }, /*#__PURE__*/React.createElement(VisuallyHidden, null, label));
 };

package/dist/esm/components/progress-dots.js

@@ -7,7 +7,7 @@ import { Box, Inline } from '@atlaskit/primitives/compiled';
 import { ButtonIndicator } from './button-indicator';
 import { PresentationalIndicator } from './presentational-indicator';
 var packageName = "@atlaskit/progress-indicator";
-var packageVersion = "12.0.20";
+var packageVersion = "13.0.0";
 var progressIndicatorGapMap = {
   comfortable: {
     default: 'space.100',
@@ -41,6 +41,7 @@ var ProgressDots = function ProgressDots(_ref) {
     ariaControls = _ref$ariaControls === void 0 ? 'panel' : _ref$ariaControls,
     _ref$ariaLabel = _ref.ariaLabel,
     ariaLabel = _ref$ariaLabel === void 0 ? 'tab' : _ref$ariaLabel,
+    getAriaLabel = _ref.getAriaLabel,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'default' : _ref$size,
     _ref$spacing = _ref.spacing,
@@ -118,6 +119,7 @@ var ProgressDots = function ProgressDots(_ref) {
     var isSelected = selectedIndex === index;
     var tabId = "".concat(ariaLabel).concat(index);
     var panelId = "".concat(ariaControls).concat(index);
+    var label = getAriaLabel ? getAriaLabel(index) : tabId;
     var indicatorTestId = testId && "".concat(testId, "-ind-").concat(index);
     return onSelect ? /*#__PURE__*/React.createElement(ButtonIndicator, {
       key: index,
@@ -126,6 +128,7 @@ var ProgressDots = function ProgressDots(_ref) {
       isSelected: isSelected,
       tabId: tabId,
       panelId: panelId,
+      label: label,
       onClick: function onClick(event) {
         return onSelectWithAnalytics({
           event: event,

package/dist/types/components/button-indicator.d.ts

@@ -6,6 +6,7 @@ import type { DotsAppearance } from './types';
 type ButtonIndicatorProps = {
     panelId: string;
     tabId: string;
+    label: string;
     appearance: DotsAppearance;
     isSelected: boolean;
     testId?: string;
@@ -30,5 +31,5 @@ export declare const ButtonIndicator: ({
  * - [Code](https://atlassian.design/components/{packageName}/code)
  * - [Usage](https://atlassian.design/components/{packageName}/usage)
  */
-appearance, panelId, tabId, isSelected, onClick, testId, }: ButtonIndicatorProps) => JSX.Element;
+appearance, panelId, tabId, label, isSelected, onClick, testId, }: ButtonIndicatorProps) => JSX.Element;
 export {};

package/dist/types/types.d.ts

@@ -17,6 +17,10 @@ export interface ProgressDotsProps {
      * @default 'tab'
      */
     ariaLabel?: string;
+    /**
+     * Returns the accessible label for each selectable indicator.
+     */
+    getAriaLabel?: (index: number) => string;
     /**
      * Function called when an indicator is selected.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/progress-indicator",
-	"version": "13.0.0",
+	"version": "13.0.1",
 	"description": "A progress indicator shows the user where they are along the steps of a journey.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -47,11 +47,11 @@
 		"@af/accessibility-testing": "workspace:^",
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/button": "^24.0.0",
+		"@atlaskit/button": "^24.1.0",
 		"@atlaskit/css": "^1.0.0",
 		"@atlaskit/docs": "^12.0.0",
 		"@atlaskit/link": "^4.0.0",
-		"@atlaskit/section-message": "^9.0.0",
+		"@atlaskit/section-message": "^9.1.0",
 		"@atlassian/react-compiler-gating": "workspace:^",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/structured-docs-types": "workspace:^",