@atlaskit/editor-toolbar 0.0.2 → 0.0.4

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-toolbar
 
+## 0.0.4
+
+### Patch Changes
+
+- [#192343](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/192343)
+  [`9cb0878241016`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9cb0878241016) -
+  ED-28736 more extensible selection extensions API
+
+## 0.0.3
+
+### Patch Changes
+
+- [#192616](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/192616)
+  [`b97ca8e19b601`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b97ca8e19b601) -
+  [ED-28595] add aria-attributes to toolbar button and toolbar dropdown item
+- Updated dependencies
+
 ## 0.0.2
 
 ### Patch Changes

package/examples/toolbar/examples/ExampleManuallyComposedToolbar.tsx

@@ -153,7 +153,7 @@ export const ExampleManuallyComposedToolbar = () => {
 								<ToolbarNestedDropdownMenu
 									elemBefore={<AIAdjustLengthIcon label="Adjust length" />}
 									text="Adjust length"
-									elemAfter={<NestedDropdownRightIcon label={'Choose desired tone'}/>}
+									elemAfter={<NestedDropdownRightIcon label={'Choose desired tone'} />}
 									isDisabled={isAdjustLengthDisabled}
 								>
 									<ToolbarDropdownItemSection>
@@ -174,7 +174,7 @@ export const ExampleManuallyComposedToolbar = () => {
 								<ToolbarNestedDropdownMenu
 									elemBefore={<AIChangeToneIcon label="Change tone" />}
 									text="Change tone"
-									elemAfter={<NestedDropdownRightIcon label={'Choose desired tone'}/>}
+									elemAfter={<NestedDropdownRightIcon label={'Choose desired tone'} />}
 								>
 									<ToolbarDropdownItemSection>
 										<ToolbarDropdownItem
@@ -206,7 +206,7 @@ export const ExampleManuallyComposedToolbar = () => {
 								<ToolbarNestedDropdownMenu
 									elemBefore={<AITranslateIcon label="Translate" />}
 									text="Translate"
-									elemAfter={<NestedDropdownRightIcon label={'Choose language option'}/>}
+									elemAfter={<NestedDropdownRightIcon label={'Choose language option'} />}
 								>
 									<ToolbarDropdownItemSection>
 										<ToolbarDropdownItem
@@ -275,6 +275,7 @@ export const ExampleManuallyComposedToolbar = () => {
 										onClick={onClick('Normal text', onSetTextStyle('normal'))}
 										isSelected={textStyle === 'normal'}
 										textStyle="normal"
+										ariaKeyshortcuts="⌘⌥0"
 									>
 										Normal text
 									</ToolbarDropdownItem>
@@ -284,6 +285,7 @@ export const ExampleManuallyComposedToolbar = () => {
 										onClick={onClick('Heading one', onSetTextStyle('heading1'))}
 										isSelected={textStyle === 'heading1'}
 										textStyle="heading1"
+										ariaKeyshortcuts="⌘⌥1"
 									>
 										Heading 1
 									</ToolbarDropdownItem>
@@ -293,6 +295,7 @@ export const ExampleManuallyComposedToolbar = () => {
 										onClick={onClick('Heading two', onSetTextStyle('heading2'))}
 										isSelected={textStyle === 'heading2'}
 										textStyle="heading2"
+										ariaKeyshortcuts="⌘⌥2"
 									>
 										Heading 2
 									</ToolbarDropdownItem>
@@ -302,6 +305,7 @@ export const ExampleManuallyComposedToolbar = () => {
 										onClick={onClick('Heading three', onSetTextStyle('heading3'))}
 										isSelected={textStyle === 'heading3'}
 										textStyle="heading3"
+										ariaKeyshortcuts="⌘⌥3"
 									>
 										Heading 3
 									</ToolbarDropdownItem>
@@ -311,6 +315,7 @@ export const ExampleManuallyComposedToolbar = () => {
 										onClick={onClick('Heading four', onSetTextStyle('heading4'))}
 										isSelected={textStyle === 'heading4'}
 										textStyle="heading4"
+										ariaKeyshortcuts="⌘⌥4"
 									>
 										Heading 4
 									</ToolbarDropdownItem>
@@ -320,6 +325,7 @@ export const ExampleManuallyComposedToolbar = () => {
 										onClick={onClick('Heading five', onSetTextStyle('heading5'))}
 										isSelected={textStyle === 'heading5'}
 										textStyle="heading5"
+										ariaKeyshortcuts="⌘⌥5"
 									>
 										Heading 5
 									</ToolbarDropdownItem>
@@ -329,6 +335,7 @@ export const ExampleManuallyComposedToolbar = () => {
 										onClick={onClick('Heading six', onSetTextStyle('heading6'))}
 										isSelected={textStyle === 'heading6'}
 										textStyle="heading6"
+										ariaKeyshortcuts="⌘⌥6"
 									>
 										Heading 6
 									</ToolbarDropdownItem>
@@ -338,6 +345,7 @@ export const ExampleManuallyComposedToolbar = () => {
 										onClick={onClick('Quote', onSetTextStyle('quote'))}
 										isSelected={textStyle === 'quote'}
 										textStyle="normal"
+										ariaKeyshortcuts="⌘⌥9"
 									>
 										Quote
 									</ToolbarDropdownItem>
@@ -358,16 +366,18 @@ export const ExampleManuallyComposedToolbar = () => {
 								groupLocation="start"
 								isSelected={formatting.bold || formatting.italic}
 								isDisabled={formatting.italic ? isItalicDisabled : isBoldDisabled}
+								ariaKeyshortcuts={formatting.italic && !formatting.bold ? '⌘I' : '⌘B'}
 							/>
 						</ToolbarTooltip>
 						<ToolbarDropdownMenu icon={MoreItemsIcon} label="More formatting" groupLocation="end">
 							<ToolbarDropdownItemSection>
 								<ToolbarDropdownItem
-								elemBefore={<BoldIcon label="Bold" />}
-								elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘B" />}
-								onClick={onClick('Bold', onToggleFormatting('bold'))}
-								isSelected={formatting.bold}
-								isDisabled={isBoldDisabled}
+									elemBefore={<BoldIcon label="Bold" />}
+									elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘B" />}
+									onClick={onClick('Bold', onToggleFormatting('bold'))}
+									isSelected={formatting.bold}
+									isDisabled={isBoldDisabled}
+									ariaKeyshortcuts="⌘B"
 								>
 									Bold
 								</ToolbarDropdownItem>
@@ -377,16 +387,18 @@ export const ExampleManuallyComposedToolbar = () => {
 									onClick={onClick('Italic', onToggleFormatting('italic'))}
 									isSelected={formatting.italic}
 									isDisabled={isItalicDisabled}
+									ariaKeyshortcuts="⌘I"
 								>
 									Italic
 								</ToolbarDropdownItem>
 							</ToolbarDropdownItemSection>
-							<ToolbarDropdownDivider/>
+							<ToolbarDropdownDivider />
 							<ToolbarDropdownItemSection>
 								<ToolbarDropdownItem
 									elemBefore={<ClearFormattingIcon label="Clear formatting" />}
 									elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘\" />}
 									onClick={onClick('Clear formatting')}
+									ariaKeyshortcuts="⌘\"
 								>
 									Clear formatting
 								</ToolbarDropdownItem>
@@ -449,11 +461,12 @@ export const ExampleManuallyComposedToolbar = () => {
 						>
 							<ToolbarDropdownItemSection>
 								<ToolbarDropdownItem
-								elemBefore={<ListBulletedIcon label="Bulleted list" />}
-								elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⇧8" />}
-								onClick={onClick('Bulleted list', onToggleListOrAlignment('bulleted'))}
-								isSelected={listOrAlignment === 'bulleted'}
-								isDisabled={isBulletedListDisabled}
+									elemBefore={<ListBulletedIcon label="Bulleted list" />}
+									elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⇧8" />}
+									onClick={onClick('Bulleted list', onToggleListOrAlignment('bulleted'))}
+									isSelected={listOrAlignment === 'bulleted'}
+									isDisabled={isBulletedListDisabled}
+									ariaKeyshortcuts="⌘⇧8"
 								>
 									Bulleted list
 								</ToolbarDropdownItem>
@@ -463,6 +476,7 @@ export const ExampleManuallyComposedToolbar = () => {
 									onClick={onClick('Numbered list', onToggleListOrAlignment('numbered'))}
 									isSelected={listOrAlignment === 'numbered'}
 									isDisabled={isNumberedListDisabled}
+									ariaKeyshortcuts="⌘⇧7"
 								>
 									Numbered list
 								</ToolbarDropdownItem>
@@ -513,9 +527,9 @@ export const ExampleManuallyComposedToolbar = () => {
 							>
 								<ToolbarDropdownItemSection>
 									<ToolbarDropdownItem
-									elemBefore={<AddIcon label="Create Jira work item" />}
-									onClick={onClick('Create Jira work item')}
-									isDisabled={isCreateJiraWorkItemDisabled}
+										elemBefore={<AddIcon label="Create Jira work item" />}
+										onClick={onClick('Create Jira work item')}
+										isDisabled={isCreateJiraWorkItemDisabled}
 									>
 										Create Jira work item
 									</ToolbarDropdownItem>

package/package.json

@@ -3,7 +3,7 @@
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
 	},
-	"version": "0.0.2",
+	"version": "0.0.4",
 	"description": "Common UI for Toolbars across the platform",
 	"atlassian": {
 		"team": "Editor"
@@ -24,16 +24,16 @@
 	},
 	"dependencies": {
 		"@atlaskit/badge": "^18.1.0",
-		"@atlaskit/button": "^23.2.0",
+		"@atlaskit/button": "^23.3.0",
 		"@atlaskit/css": "^0.12.0",
 		"@atlaskit/dropdown-menu": "^16.3.0",
-		"@atlaskit/icon": "^27.7.0",
+		"@atlaskit/icon": "^27.8.0",
 		"@atlaskit/icon-lab": "^5.2.0",
-		"@atlaskit/logo": "^19.5.0",
+		"@atlaskit/logo": "^19.6.0",
 		"@atlaskit/popup": "^4.3.0",
-		"@atlaskit/primitives": "^14.10.0",
+		"@atlaskit/primitives": "^14.11.0",
 		"@atlaskit/tokens": "^5.6.0",
-		"@atlaskit/tooltip": "^20.3.0",
+		"@atlaskit/tooltip": "^20.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.3"
 	},

package/src/index.ts

@@ -5,6 +5,7 @@ export { ToolbarDropdownItem } from './ui/ToolbarDropdownItem';
 export { ToolbarDropdownMenu } from './ui/ToolbarDropdownMenu';
 export { ToolbarKeyboardShortcutHint } from './ui/ToolbarKeyboardShortcutHint';
 export { ToolbarSection } from './ui/ToolbarSection';
+export { ToolbarTooltip } from './ui/ToolbarTooltip';
 
 export { AIAdjustLengthIcon } from './ui/icons/AIAdjustLengthIcon';
 export { AIChatIcon } from './ui/icons/AIChatIcon';
@@ -30,4 +31,4 @@ export { QuoteIcon } from './ui/icons/QuoteIcon';
 export { TextColorIcon } from './ui/icons/TextColorIcon';
 export { TextIcon } from './ui/icons/TextIcon';
 
-export type { ToolbarButtonGroupLocation } from './types';
+export type { IconComponent, ToolbarButtonGroupLocation } from './types';

package/src/ui/ToolbarButton.tsx

@@ -89,6 +89,7 @@ type ToolbarButtonProps = Partial<TriggerProps> & {
 	icon: IconComponent;
 	groupLocation?: ToolbarButtonGroupLocation;
 	isDisabled?: boolean;
+	ariaKeyshortcuts?: string;
 };
 
 export const ToolbarButton = forwardRef(
@@ -108,6 +109,7 @@ export const ToolbarButton = forwardRef(
 			testId,
 			groupLocation,
 			isDisabled,
+			ariaKeyshortcuts,
 		}: ToolbarButtonProps,
 		ref: Ref<HTMLButtonElement>,
 	) => {
@@ -126,9 +128,11 @@ export const ToolbarButton = forwardRef(
 					groupLocation === 'middle' && styles.groupMiddle,
 					groupLocation === 'end' && styles.groupEnd,
 				)}
+				aria-pressed={isSelected}
 				aria-expanded={ariaExpanded}
 				aria-haspopup={ariaHasPopup}
 				aria-controls={ariaControls}
+				aria-keyshortcuts={ariaKeyshortcuts}
 				data-ds--level={dataDsLevel}
 				onClick={onClick}
 				onBlur={onBlur}

package/src/ui/ToolbarDropdownItem.tsx

@@ -77,32 +77,45 @@ export type CustomDropdownMenuItemButtonProps = CustomItemComponentProps & {
 	'aria-haspopup'?: boolean;
 	'aria-disabled'?: boolean;
 	'aria-pressed'?: boolean;
+	'aria-keyshortcuts'?: string;
 };
 
-const CustomDropdownMenuItemButton = forwardRef<HTMLButtonElement, CustomDropdownMenuItemButtonProps>(({
-	children,
-	'data-testid': testId,
-	'aria-haspopup': ariaHasPopup,
-	'aria-disabled': ariaDisabled,
-	'aria-pressed': ariaPressed,
-	onClick,
-	tabIndex,
-}, ref) =>
-	<Pressable
-		testId={testId}
-		xcss={cx(styles.toolbarDropdownItem, ariaDisabled ? styles.disabled : ariaPressed ? styles.selected : styles.enabled)}
-		onClick={onClick}
-		tabIndex={tabIndex}
-		aria-haspopup={ariaHasPopup}
-		aria-expanded={ariaHasPopup ? ariaPressed ? true : false : undefined}
-		aria-pressed={ariaPressed}
-		aria-disabled={ariaDisabled}
-		ref={ref}
-	>
-		{children}
-	</Pressable>
-)
-
+const CustomDropdownMenuItemButton = forwardRef<
+	HTMLButtonElement,
+	CustomDropdownMenuItemButtonProps
+>(
+	(
+		{
+			children,
+			'data-testid': testId,
+			'aria-haspopup': ariaHasPopup,
+			'aria-disabled': ariaDisabled,
+			'aria-pressed': ariaPressed,
+			'aria-keyshortcuts': ariaKeyshortcuts,
+			onClick,
+			tabIndex,
+		},
+		ref,
+	) => (
+		<Pressable
+			testId={testId}
+			xcss={cx(
+				styles.toolbarDropdownItem,
+				ariaDisabled ? styles.disabled : ariaPressed ? styles.selected : styles.enabled,
+			)}
+			onClick={onClick}
+			tabIndex={tabIndex}
+			aria-haspopup={ariaHasPopup}
+			aria-expanded={ariaHasPopup ? (ariaPressed ? true : false) : undefined}
+			aria-pressed={ariaPressed}
+			aria-disabled={ariaDisabled}
+			aria-keyshortcuts={ariaKeyshortcuts}
+			ref={ref}
+		>
+			{children}
+		</Pressable>
+	),
+);
 
 type ToolbarDropdownItemProps = {
 	onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;
@@ -113,8 +126,9 @@ type ToolbarDropdownItemProps = {
 	textStyle?: TextStyle;
 	isDisabled?: boolean;
 	hasNestedDropdownMenu?: boolean;
-	triggerRef?: Ref<HTMLButtonElement>
+	triggerRef?: Ref<HTMLButtonElement>;
 	testId?: string;
+	ariaKeyshortcuts?: string;
 };
 
 export const ToolbarDropdownItem = ({
@@ -128,7 +142,8 @@ export const ToolbarDropdownItem = ({
 	hasNestedDropdownMenu,
 	triggerRef,
 	testId,
-}: ToolbarDropdownItemProps) =>
+	ariaKeyshortcuts,
+}: ToolbarDropdownItemProps) => (
 	<DropdownItem
 		onClick={onClick}
 		elemBefore={elemBefore}
@@ -137,9 +152,11 @@ export const ToolbarDropdownItem = ({
 		isDisabled={isDisabled}
 		aria-haspopup={hasNestedDropdownMenu}
 		aria-pressed={isSelected}
+		aria-keyshortcuts={ariaKeyshortcuts}
 		ref={triggerRef}
 		component={CustomDropdownMenuItemButton}
 		testId={testId}
 	>
 		<Box xcss={styles[textStyle]}>{children}</Box>
 	</DropdownItem>
+);

package/tsconfig.app.json

@@ -49,6 +49,9 @@
 		{
 			"path": "../../design-system/logo/tsconfig.app.json"
 		},
+		{
+			"path": "../../design-system/menu/tsconfig.app.json"
+		},
 		{
 			"path": "../../design-system/popup/tsconfig.app.json"
 		},