@atlaskit/dropdown-menu 16.6.0 → 16.7.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/dropdown-menu
 
+## 16.7.0
+
+### Minor Changes
+
+- [`35e953efa932c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/35e953efa932c) -
+  Clean up flag to improve accessibility of dropdown menu.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 16.6.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 16.6.0
 
 ### Minor Changes

package/dist/cjs/dropdown-menu.js

@@ -20,7 +20,6 @@ var _useControlled = _interopRequireDefault(require("@atlaskit/ds-lib/use-contro
 var _useFocusEvent = _interopRequireDefault(require("@atlaskit/ds-lib/use-focus-event"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
 var _layering = require("@atlaskit/layering");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _popup = _interopRequireDefault(require("@atlaskit/popup"));
 var _constants = require("@atlaskit/theme/constants");
 var _focusManager = _interopRequireDefault(require("./internal/components/focus-manager"));
@@ -282,7 +281,7 @@ var DropdownMenu = function DropdownMenu(_ref) {
     onClose: handleOnClose,
     zIndex: zIndex,
     placement: placement,
-    role: shouldRenderToParent && currentLevel > 0 && (0, _platformFeatureFlags.fg)('platform-dst-nested-dropdown-menu-role') ? 'group' : undefined,
+    role: shouldRenderToParent && currentLevel > 0 ? 'group' : undefined,
     fallbackPlacements: fallbackPlacements,
     testId: testId && "".concat(testId, "--content"),
     shouldUseCaptureOnOutsideClick: true

package/dist/cjs/internal/hooks/use-register-item-with-focus-manager.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 var _react = require("react");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _focusManager = require("../components/focus-manager");
+// eslint-disable-next-line sort-imports
+
 // This function is called whenever a MenuItem mounts.
 // The refs stored in the context are used to programmatically
 // control focus on a user navigates using the keyboard.

package/dist/es2019/dropdown-menu.js

@@ -9,7 +9,6 @@ import useControlledState from '@atlaskit/ds-lib/use-controlled';
 import useFocus from '@atlaskit/ds-lib/use-focus-event';
 import ExpandIcon from '@atlaskit/icon/core/chevron-down';
 import { useLayering } from '@atlaskit/layering';
-import { fg } from '@atlaskit/platform-feature-flags';
 import Popup from '@atlaskit/popup';
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { layers } from '@atlaskit/theme/constants';
@@ -253,7 +252,7 @@ const DropdownMenu = ({
     onClose: handleOnClose,
     zIndex: zIndex,
     placement: placement,
-    role: shouldRenderToParent && currentLevel > 0 && fg('platform-dst-nested-dropdown-menu-role') ? 'group' : undefined,
+    role: shouldRenderToParent && currentLevel > 0 ? 'group' : undefined,
     fallbackPlacements: fallbackPlacements,
     testId: testId && `${testId}--content`,
     shouldUseCaptureOnOutsideClick: true

package/dist/es2019/internal/hooks/use-register-item-with-focus-manager.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line sort-imports
 import { useContext, useEffect, useRef } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { FocusManagerContext } from '../components/focus-manager';

package/dist/esm/dropdown-menu.js

@@ -15,7 +15,6 @@ import useControlledState from '@atlaskit/ds-lib/use-controlled';
 import useFocus from '@atlaskit/ds-lib/use-focus-event';
 import ExpandIcon from '@atlaskit/icon/core/chevron-down';
 import { useLayering } from '@atlaskit/layering';
-import { fg } from '@atlaskit/platform-feature-flags';
 import Popup from '@atlaskit/popup';
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { layers } from '@atlaskit/theme/constants';
@@ -274,7 +273,7 @@ var DropdownMenu = function DropdownMenu(_ref) {
     onClose: handleOnClose,
     zIndex: zIndex,
     placement: placement,
-    role: shouldRenderToParent && currentLevel > 0 && fg('platform-dst-nested-dropdown-menu-role') ? 'group' : undefined,
+    role: shouldRenderToParent && currentLevel > 0 ? 'group' : undefined,
     fallbackPlacements: fallbackPlacements,
     testId: testId && "".concat(testId, "--content"),
     shouldUseCaptureOnOutsideClick: true

package/dist/esm/internal/hooks/use-register-item-with-focus-manager.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line sort-imports
 import { useContext, useEffect, useRef } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { FocusManagerContext } from '../components/focus-manager';

package/dist/types/internal/hooks/use-register-item-with-focus-manager.d.ts

@@ -1,2 +1,3 @@
-declare function useRegisterItemWithFocusManager(hasPopup?: boolean): import("react").MutableRefObject<HTMLAnchorElement | HTMLButtonElement | null>;
+import { type MutableRefObject } from 'react';
+declare function useRegisterItemWithFocusManager(hasPopup?: boolean): MutableRefObject<HTMLAnchorElement | HTMLButtonElement | null>;
 export default useRegisterItemWithFocusManager;

package/dist/types-ts4.5/internal/hooks/use-register-item-with-focus-manager.d.ts

@@ -1,2 +1,3 @@
-declare function useRegisterItemWithFocusManager(hasPopup?: boolean): import("react").MutableRefObject<HTMLAnchorElement | HTMLButtonElement | null>;
+import { type MutableRefObject } from 'react';
+declare function useRegisterItemWithFocusManager(hasPopup?: boolean): MutableRefObject<HTMLAnchorElement | HTMLButtonElement | null>;
 export default useRegisterItemWithFocusManager;

package/dropdown-menu.docs.tsx

@@ -0,0 +1,54 @@
+import path from 'path';
+
+import type { ComponentStructuredContentSource } from '@atlassian/structured-docs-types';
+
+const documentation: ComponentStructuredContentSource[] = [
+	{
+		name: 'DropdownMenu',
+		description: 'A dropdown menu component for displaying contextual actions and options.',
+		status: 'general-availability',
+		import: {
+			name: 'DropdownMenu',
+			package: '@atlaskit/dropdown-menu',
+			type: 'default',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		usageGuidelines: [
+			'Use for 5–15 items; navigation or command (action on selection)',
+			'Avoid truncation—check max width; avoid truncated labels',
+			'Nested menu: maximum two layers',
+			'In a modal, use shouldRenderToParent for correct focus and screen reader behavior',
+			'Disabled triggers are not supported (see Button a11y)',
+			'Use Select for search/select; Checkbox for multiple from list; Radio for short single choice',
+		],
+		contentGuidelines: [
+			'Logical order (e.g. most selected first); group with uppercase section title',
+			'Use verbs for actions, nouns for links; no articles; single line per item',
+			'Use clear, descriptive menu item labels',
+			'Keep menu item text concise',
+			'Group related actions logically',
+			'Use consistent terminology across menu items',
+		],
+		accessibilityGuidelines: [
+			'Avoid truncation—ensure max width does not cut off labels',
+			'Focus lock when open; keyboard open should focus first item',
+			'Nested menu: maximum two layers',
+			'In modal use shouldRenderToParent for focus and voicing',
+			'Provide clear labels for dropdown triggers',
+			'Ensure keyboard navigation with arrow keys',
+			'Use appropriate ARIA attributes',
+		],
+		examples: [
+			{
+				name: 'Dropdown Menu',
+				description: 'Dropdown Menu example',
+				source: path.resolve(__dirname, './examples/ai/dropdown-menu.tsx'),
+			},
+		],
+		keywords: ['dropdown', 'menu', 'actions', 'options', 'popup', 'contextual'],
+		categories: ['navigation', 'interaction'],
+	},
+];
+
+export default documentation;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/dropdown-menu",
-	"version": "16.6.0",
+	"version": "16.7.0",
 	"description": "A dropdown menu displays a list of actions or options to a user.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -26,8 +26,8 @@
 	"dependencies": {
 		"@atlaskit/button": "^23.10.0",
 		"@atlaskit/css": "^0.19.0",
-		"@atlaskit/ds-lib": "^5.4.0",
-		"@atlaskit/icon": "^32.0.0",
+		"@atlaskit/ds-lib": "^6.0.0",
+		"@atlaskit/icon": "^32.1.0",
 		"@atlaskit/layering": "^3.6.0",
 		"@atlaskit/menu": "^8.4.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
@@ -52,7 +52,7 @@
 		"@atlaskit/atlassian-navigation": "^5.6.0",
 		"@atlaskit/avatar": "^25.8.0",
 		"@atlaskit/checkbox": "^17.3.0",
-		"@atlaskit/docs": "^11.6.0",
+		"@atlaskit/docs": "^11.7.0",
 		"@atlaskit/form": "^15.4.0",
 		"@atlaskit/heading": "^5.3.0",
 		"@atlaskit/link": "^3.3.0",
@@ -63,6 +63,7 @@
 		"@atlaskit/toggle": "^15.2.0",
 		"@atlassian/a11y-jest-testing": "^0.10.0",
 		"@atlassian/feature-flags-test-utils": "^1.0.0",
+		"@atlassian/structured-docs-types": "workspace:^",
 		"@testing-library/react": "^16.3.0",
 		"@testing-library/user-event": "^14.4.3",
 		"jest-in-case": "^1.0.2",
@@ -84,9 +85,6 @@
 		"platform_dst_dropdown_radio_default_selected_fix": {
 			"type": "boolean"
 		},
-		"platform-dst-nested-dropdown-menu-role": {
-			"type": "boolean"
-		},
 		"platform_dst_menu_item_focus": {
 			"type": "boolean"
 		}