@atlaskit/dropdown-menu 16.1.0 → 16.1.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/dropdown-menu
 
+## 16.1.2
+
+### Patch Changes
+
+- [#172917](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/172917)
+  [`8a3d5265aaa3b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8a3d5265aaa3b) -
+  Adds aria described by for better screen reader context
+
+## 16.1.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 16.1.0
 
 ### Minor Changes

package/dist/cjs/radio/dropdown-item-radio.js

@@ -13,10 +13,10 @@ var _react = _interopRequireWildcard(require("react"));
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _menu = require("@atlaskit/menu");
 var _buttonItem = _interopRequireDefault(require("@atlaskit/menu/button-item"));
+var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _radioIcon = _interopRequireDefault(require("../internal/components/radio-icon"));
 var _useRadioState3 = _interopRequireDefault(require("../internal/hooks/use-radio-state"));
 var _useRegisterItemWithFocusManager = _interopRequireDefault(require("../internal/hooks/use-register-item-with-focus-manager"));
-var _isVoiceOverSupported = _interopRequireDefault(require("../internal/utils/is-voice-over-supported"));
 var _excluded = ["children", "defaultSelected", "testId", "id", "title", "description", "isDisabled", "isSelected", "onClick", "shouldDescriptionWrap", "shouldTitleWrap", "interactionName"];
 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); }
 /**
@@ -68,6 +68,7 @@ var DropdownItemRadio = function DropdownItemRadio(_ref) {
     value: "none"
   }, /*#__PURE__*/_react.default.createElement(_buttonItem.default, (0, _extends2.default)({
     "aria-checked": selected,
+    "aria-describedby": "".concat(id, "-radio"),
     description: description,
     iconBefore: /*#__PURE__*/_react.default.createElement(_radioIcon.default, {
       checked: selected
@@ -77,7 +78,7 @@ var DropdownItemRadio = function DropdownItemRadio(_ref) {
     isSelected: selected,
     onClick: onClickHandler,
     ref: itemRef,
-    role: (0, _isVoiceOverSupported.default)() ? 'radio' : 'menuitemradio',
+    role: "menuitemradio",
     shouldDescriptionWrap: shouldDescriptionWrap,
     shouldTitleWrap: shouldTitleWrap,
     testId: testId
@@ -88,6 +89,8 @@ var DropdownItemRadio = function DropdownItemRadio(_ref) {
     title: title,
     interactionName: interactionName
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-  }, rest), children));
+  }, rest), children), /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, {
+    id: "".concat(id, "-radio")
+  }, "radio button ", selected));
 };
 var _default = exports.default = DropdownItemRadio;

package/dist/es2019/radio/dropdown-item-radio.js

@@ -3,10 +3,10 @@ import React, { useCallback } from 'react';
 import noop from '@atlaskit/ds-lib/noop';
 import { SELECTION_STYLE_CONTEXT_DO_NOT_USE } from '@atlaskit/menu';
 import ButtonItem from '@atlaskit/menu/button-item';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 import RadioIcon from '../internal/components/radio-icon';
 import useRadioState from '../internal/hooks/use-radio-state';
 import useRegisterItemWithFocusManager from '../internal/hooks/use-register-item-with-focus-manager';
-import isVoiceOverSupported from '../internal/utils/is-voice-over-supported';
 /**
  * __Dropdown item radio__
  *
@@ -50,6 +50,7 @@ const DropdownItemRadio = ({
     value: "none"
   }, /*#__PURE__*/React.createElement(ButtonItem, _extends({
     "aria-checked": selected,
+    "aria-describedby": `${id}-radio`,
     description: description,
     iconBefore: /*#__PURE__*/React.createElement(RadioIcon, {
       checked: selected
@@ -59,7 +60,7 @@ const DropdownItemRadio = ({
     isSelected: selected,
     onClick: onClickHandler,
     ref: itemRef,
-    role: isVoiceOverSupported() ? 'radio' : 'menuitemradio',
+    role: "menuitemradio",
     shouldDescriptionWrap: shouldDescriptionWrap,
     shouldTitleWrap: shouldTitleWrap,
     testId: testId
@@ -70,6 +71,8 @@ const DropdownItemRadio = ({
     title: title,
     interactionName: interactionName
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-  }, rest), children));
+  }, rest), children), /*#__PURE__*/React.createElement(VisuallyHidden, {
+    id: `${id}-radio`
+  }, "radio button ", selected));
 };
 export default DropdownItemRadio;

package/dist/esm/radio/dropdown-item-radio.js

@@ -6,10 +6,10 @@ import React, { useCallback } from 'react';
 import noop from '@atlaskit/ds-lib/noop';
 import { SELECTION_STYLE_CONTEXT_DO_NOT_USE } from '@atlaskit/menu';
 import ButtonItem from '@atlaskit/menu/button-item';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 import RadioIcon from '../internal/components/radio-icon';
 import useRadioState from '../internal/hooks/use-radio-state';
 import useRegisterItemWithFocusManager from '../internal/hooks/use-register-item-with-focus-manager';
-import isVoiceOverSupported from '../internal/utils/is-voice-over-supported';
 /**
  * __Dropdown item radio__
  *
@@ -59,6 +59,7 @@ var DropdownItemRadio = function DropdownItemRadio(_ref) {
     value: "none"
   }, /*#__PURE__*/React.createElement(ButtonItem, _extends({
     "aria-checked": selected,
+    "aria-describedby": "".concat(id, "-radio"),
     description: description,
     iconBefore: /*#__PURE__*/React.createElement(RadioIcon, {
       checked: selected
@@ -68,7 +69,7 @@ var DropdownItemRadio = function DropdownItemRadio(_ref) {
     isSelected: selected,
     onClick: onClickHandler,
     ref: itemRef,
-    role: isVoiceOverSupported() ? 'radio' : 'menuitemradio',
+    role: "menuitemradio",
     shouldDescriptionWrap: shouldDescriptionWrap,
     shouldTitleWrap: shouldTitleWrap,
     testId: testId
@@ -79,6 +80,8 @@ var DropdownItemRadio = function DropdownItemRadio(_ref) {
     title: title,
     interactionName: interactionName
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-  }, rest), children));
+  }, rest), children), /*#__PURE__*/React.createElement(VisuallyHidden, {
+    id: "".concat(id, "-radio")
+  }, "radio button ", selected));
 };
 export default DropdownItemRadio;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/dropdown-menu",
-	"version": "16.1.0",
+	"version": "16.1.2",
 	"description": "A dropdown menu displays a list of actions or options to a user.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -26,17 +26,18 @@
 	},
 	"dependencies": {
 		"@atlaskit/button": "^23.2.0",
-		"@atlaskit/css": "^0.10.0",
+		"@atlaskit/css": "^0.11.0",
 		"@atlaskit/ds-lib": "^4.0.0",
-		"@atlaskit/icon": "^27.0.0",
+		"@atlaskit/icon": "^27.1.0",
 		"@atlaskit/layering": "^3.0.0",
 		"@atlaskit/menu": "^8.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popup": "^4.3.0",
-		"@atlaskit/primitives": "^14.8.0",
+		"@atlaskit/primitives": "^14.9.0",
 		"@atlaskit/spinner": "^18.0.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tokens": "^5.2.0",
+		"@atlaskit/tokens": "^5.4.0",
+		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
 		"bind-event-listener": "^3.0.0"
 	},