SUR-323 - Accessibility fixes for Force UI components.

.storybook/preview.tsx

@@ -11,6 +11,16 @@ const preview: Preview = {
 				date: /Date$/i,
 			},
 		},
+		a11y: {
+			config: {
+				rules: [
+					{
+						id: 'color-contrast',
+						enabled: false,
+					},
+				],
+			},
+		},
 	},
 	decorators: [
 		(Story) => (

.storybook/test-runner.js

@@ -1,15 +1,31 @@
-const { injectAxe, checkA11y } = require('axe-playwright');
+const { getStoryContext } = require('@storybook/test-runner');
+const { injectAxe, checkA11y, configureAxe } = require('axe-playwright');
 
 module.exports = {
 	async preVisit(page) {
 		await injectAxe(page);
 	},
-	async postVisit(page) {
-		await checkA11y(page, '#storybook-root', {
+	async postVisit(page, context) {
+		// Get the entire context of a story, including parameters, args, argTypes, etc.
+		const storyContext = await getStoryContext(page, context);
+		// Apply story-level a11y rules
+		await configureAxe(page, {
+			rules: storyContext.parameters?.a11y?.config?.rules,
+		});
+
+		// Do not run a11y tests on disabled stories.
+		if (storyContext.parameters?.a11y?.disable) {
+			return;
+		}
+
+		const element =
+			storyContext.parameters?.a11y?.element ?? '#storybook-root';
+		await checkA11y(page, element, {
 			detailedReport: true,
 			detailedReportOptions: {
 				html: true,
 			},
+			rules: [{ 'color-contrast': { enabled: false } }],
 		});
 	},
 };

src/components/alert/alert.tsx

@@ -110,6 +110,7 @@ const Alert = ( {
 									closeIconClassNames.light
 							) }
 							onClick={ () => closeAlert() }
+							aria-label="Close alert"
 						>
 							<X />
 						</button>
@@ -157,6 +158,7 @@ const Alert = ( {
 								closeIconClassNames.light
 						) }
 						onClick={ () => closeAlert() }
+						aria-label="Close alert"
 					>
 						<X />
 					</button>

src/components/area-chart/area-chart.stories.tsx

@@ -205,6 +205,7 @@ export const AreaChartCard1: Story1 = ( args ) => (
 				</Label>
 				<Button className="p-0" variant="ghost">
 					<ArrowUpRight className="text-icon-secondary size-4" />
+					<span className="sr-only">View Details</span>
 				</Button>
 			</Container>
 			<Container containerType="flex" align="center" gap="xs">
@@ -267,6 +268,7 @@ export const AreaChartCard2: Story1 = ( args ) => (
 				</Label>
 				<Button className="p-0" variant="ghost">
 					<ArrowUpRight className="text-icon-secondary size-4" />
+					<span className="sr-only">View Details</span>
 				</Button>
 			</Container>
 			<Container containerType="flex" align="center" gap="xs">

src/components/area-chart/area-chart.tsx

@@ -93,7 +93,7 @@ const AreaChart = ( {
 	xAxisDataKey,
 	yAxisDataKey,
 	xAxisFontSize = 'sm', // sm, md, lg
-	xAxisFontColor = '#4B5563',
+	xAxisFontColor = '#6B7280',
 	chartWidth = 350,
 	chartHeight = 200,
 }: AreaChartProps ) => {

src/components/avatar/avatar.tsx

@@ -33,6 +33,7 @@ const Avatar = forwardRef<Ref, AvatarProps>(
 			alt,
 			children,
 			className,
+			...props
 		},
 		ref
 	) => {
@@ -116,6 +117,7 @@ const Avatar = forwardRef<Ref, AvatarProps>(
 				{ ...( textAvatar
 					? { children: getChildren() }
 					: { src: url, alt, onError: handleImageError } ) }
+				{ ...props }
 			/>
 		);
 	}

src/components/bar-chart/bar-chart.stories.tsx

@@ -260,6 +260,7 @@ export const BarChartCard1: Story1 = ( args ) => (
 				</Label>
 				<Button className="p-0" variant="ghost">
 					<ArrowUpRight className="text-icon-secondary size-4" />
+					<span className="sr-only">View Details</span>
 				</Button>
 			</Container>
 			<Container containerType="flex" align="center" gap="xs">
@@ -321,6 +322,7 @@ export const BarChartCard2: Story1 = ( args ) => (
 				</Label>
 				<Button className="p-0" variant="ghost">
 					<ArrowUpRight className="text-icon-secondary size-4" />
+					<span className="sr-only">View Details</span>
 				</Button>
 			</Container>
 			<Container containerType="flex" align="center" gap="xs">
@@ -385,6 +387,7 @@ export const BarChartCard3: Story1 = ( args ) => (
 				</Label>
 				<Button className="p-0" variant="ghost">
 					<ArrowUpRight className="text-icon-secondary size-4" />
+					<span className="sr-only">View Details</span>
 				</Button>
 			</Container>
 			<Container containerType="flex" align="center" gap="xs">
@@ -450,6 +453,7 @@ export const BarChartCard4: Story1 = ( args ) => (
 				</Label>
 				<Button className="p-0" variant="ghost">
 					<ArrowUpRight className="text-icon-secondary size-4" />
+					<span className="sr-only">View Details</span>
 				</Button>
 			</Container>
 			<Container containerType="flex" align="center" gap="xs">
@@ -514,6 +518,7 @@ export const AreaChartCard5: Story1 = ( args ) => (
 				</Label>
 				<Button className="p-0" variant="ghost">
 					<ArrowUpRight className="text-icon-secondary size-4" />
+					<span className="sr-only">View Details</span>
 				</Button>
 			</Container>
 			<Container containerType="flex" align="center" gap="xs">

src/components/bar-chart/bar-chart.tsx

@@ -101,8 +101,8 @@ const BarChart = ( {
 	xAxisDataKey,
 	yAxisDataKey,
 	xAxisFontSize = 'sm', // sm, md, lg
-	xAxisFontColor = '#4B5563',
-	yAxisFontColor = '#4B5563',
+	xAxisFontColor = '#6B7280',
+	yAxisFontColor = '#6B7280',
 	chartWidth = 350,
 	chartHeight = 200,
 	borderRadius = 8,

src/components/breadcrumb/breadcrumb.tsx

@@ -111,9 +111,9 @@ export const BreadcrumbSeparator = ( { type }: BreadcrumbSeparatorProps ) => {
 	};
 
 	return (
-		<span className="flex items-center text-text-tertiary mx-2">
+		<li className="flex items-center text-text-tertiary mx-2">
 			{ separatorIcons[ type ] || separatorIcons.arrow }
-		</span>
+		</li>
 	);
 };
 BreadcrumbSeparator.displayName = 'Breadcrumb.Separator';

src/components/cards/plugin-blocks.stories.tsx

@@ -91,6 +91,7 @@ const Template2 = ( args: Template2Props ) => {
 					<Container.Item className="items-center">
 						<Button className="p-0" variant="ghost">
 							<ArrowUpRight />
+							<span className="sr-only">View Details</span>
 						</Button>
 					</Container.Item>
 				</Container>

src/components/cards/widget-blocks.stories.tsx

@@ -255,6 +255,7 @@ const Template1 = ( args: Template1Props ) => {
 						<Button variant="ghost" className="p-0 leading-none	">
 							{ ' ' }
 							<Ellipsis />
+							<span className="sr-only">Option</span>
 						</Button>
 					</Container.Item>
 				</Container>

src/components/datepicker/datepicker-component.tsx

@@ -199,6 +199,7 @@ const DatePickerComponent = ( {
 						variant="ghost"
 						onClick={ handlePrevButtonClick }
 						className="bg-background-primary border-none cursor-pointer"
+						aria-label="Previous Button"
 					>
 						<ChevronLeft className="h-4 w-4" />
 					</Button>
@@ -226,6 +227,7 @@ const DatePickerComponent = ( {
 						variant="ghost"
 						onClick={ handleNextButtonClick }
 						className="bg-background-primary border-none cursor-pointer"
+						aria-label="Next Button"
 					>
 						<ChevronRight className="h-4 w-4" />
 					</Button>

src/components/drawer/drawer.tsx

@@ -189,8 +189,10 @@ const Drawer = ( {
 						'fixed z-auto w-0 h-0 overflow-visible',
 						className
 					) }
-					role="dialog"
 					ref={ drawerContainerRef }
+					role="dialog"
+					aria-modal="true"
+					aria-label="drawer"
 				>
 					{ children }
 				</div>

src/components/dropdown-menu/dropdown-menu.stories.tsx

@@ -50,6 +50,7 @@ export const AvatarTrigger: Story = ( args ) => (
 	<DropdownMenu { ...args } placement="bottom-start">
 		<DropdownMenu.Trigger>
 			<Avatar>John</Avatar>
+			<span className="sr-only">Open Menu</span>
 		</DropdownMenu.Trigger>
 		<DropdownMenu.Content className="w-60">
 			<DropdownMenu.List>
@@ -67,6 +68,7 @@ export const IconTrigger: Story = ( args ) => (
 	<DropdownMenu { ...args } placement="bottom-end">
 		<DropdownMenu.Trigger>
 			<House />
+			<span className="sr-only">Open Menu</span>
 		</DropdownMenu.Trigger>
 		<DropdownMenu.Content className="w-60">
 			<DropdownMenu.List>

src/components/dropdown-menu/dropdown-menu.tsx

@@ -5,7 +5,7 @@ import React, {
 	cloneElement,
 	Fragment,
 	isValidElement,
-	type ReactNode,
+	type ReactElement,
 } from 'react';
 import {
 	useFloating,
@@ -39,8 +39,8 @@ export const DropdownMenu = ( {
 	placement = 'bottom',
 	offset: offsetValue = 10,
 	boundary = 'clippingAncestors',
-	dropdownPortalRoot = null,
-	dropdownPortalId = '',
+	dropdownPortalRoot,
+	dropdownPortalId,
 	children,
 	className,
 }: DropdownMenuProps ) => {
@@ -83,27 +83,23 @@ export const DropdownMenu = ( {
 	return (
 		<DropdownMenuContext.Provider value={ { handleClose } }>
 			<div className={ cn( 'relative inline-block', className ) }>
-				<div
-					ref={ refs.setReference }
-					onClick={ toggleMenu }
-					role="button"
-					tabIndex={ 0 }
-					{ ...getReferenceProps() }
-					className="cursor-pointer"
-				>
-					{ React.Children.map( children, ( child ) => {
-						if (
-							(
-								child as ReactNode & {
-									type: { displayName: string };
-								}
-							)?.type?.displayName === 'DropdownMenu.Trigger'
-						) {
-							return child;
-						}
-						return null;
-					} ) }
-				</div>
+				{ React.Children.map( children, ( child ) => {
+					if (
+						React.isValidElement( child ) &&
+						(
+							child as ReactElement & {
+								type: { displayName: string };
+							}
+						)?.type?.displayName === 'DropdownMenu.Trigger'
+					) {
+						return cloneElement( child as ReactElement, {
+							ref: refs.setReference,
+							onClick: toggleMenu,
+							...getReferenceProps(),
+						} );
+					}
+					return null;
+				} ) }
 
 				{ isMounted && (
 					<FloatingPortal
@@ -121,7 +117,7 @@ export const DropdownMenu = ( {
 							{ React.Children.map( children, ( child ) => {
 								if (
 									(
-										child as ReactNode & {
+										child as ReactElement & {
 											type?: { displayName: string };
 										}
 									)?.type?.displayName ===
@@ -144,11 +140,27 @@ DropdownMenu.displayName = 'DropdownMenu';
 export const DropdownMenuTrigger = React.forwardRef<
 	HTMLDivElement,
 	DropdownCommonProps
->( ( { children, className }, ref ) => (
-	<div ref={ ref } role="button" tabIndex={ 0 } className={ className }>
-		{ children }
-	</div>
-) );
+>( ( { children, className, ...props }, ref ) => {
+	if ( isValidElement( children ) ) {
+		return React.cloneElement( children as React.ReactElement, {
+			className,
+			ref,
+			...props,
+		} );
+	}
+
+	return (
+		<div
+			ref={ ref }
+			className={ cn( 'cursor-pointer', className ) }
+			role="button"
+			tabIndex={ 0 }
+			{ ...props }
+		>
+			{ children }
+		</div>
+	);
+} );
 
 DropdownMenuTrigger.displayName = 'DropdownMenu.Trigger';
 

src/components/editor-input/editor-input.stories.tsx

@@ -5,6 +5,13 @@ const meta: Meta<typeof EditorInput> = {
 	title: 'Atoms/EditorInput',
 	component: EditorInput,
 	tags: [ 'autodocs' ],
+	parameters: {
+		a11y: {
+			config: {
+				rules: [ { id: 'aria-input-field-name', enabled: false } ],
+			},
+		},
+	},
 	decorators: [
 		( Story ) => (
 			<div