@heliosgraphics/ui 2.0.0-alpha.82 → 2.0.0-alpha.83

package/components/Alert/Alert.tsx

@@ -23,12 +23,13 @@ export const Alert: FC<AlertProps> = ({ children, onClose, title, icon, color, a
 	})
 
 	return (
-		<Flex className={alertClasses} padding={6} gap={6} data-ui-component="Alert">
+		<Flex className={alertClasses} padding={6} gap={6} role="alert" aria-live="polite" data-ui-component="Alert">
 			{!!onClose && (
 				<ButtonGroup className={styles.alertButtonGroup}>
 					<Button
 						isIconOnly={true}
 						value="Close"
+						aria-label="Close"
 						color={resolvedColor}
 						appearance={appearance}
 						size="tiny"

package/components/Breadcrumb/Breadcrumb.tsx

@@ -15,7 +15,11 @@ export const Breadcrumb: FC<BreadcrumbProps> = ({ items }) => {
 
 				return (
 					<Fragment key={key}>
-						<AComponent href={item.href} onClick={item.onClick}>
+						<AComponent
+							href={item.href}
+							onClick={item.onClick}
+							{...(item.isActive && { "aria-current": "page" as const })}
+						>
 							<Text
 								type="div"
 								fontStyle={item?.isActive ? "italic" : "normal"}
@@ -24,7 +28,7 @@ export const Breadcrumb: FC<BreadcrumbProps> = ({ items }) => {
 								{item.name}
 							</Text>
 						</AComponent>
-						{!isLast && <Icon icon="arrow-right" size={12} emphasis="tertiary" />}
+						{!isLast && <Icon icon="arrow-right" size={12} emphasis="tertiary" aria-hidden={true} />}
 					</Fragment>
 				)
 			})}

package/components/Button/Button.tsx

@@ -147,6 +147,7 @@ export const Button: FC<ButtonProps> = ({
 			data-ui-size={size}
 			aria-disabled={isDisabled || isLoading}
 			aria-busy={isLoading}
+			aria-label={isIconOnly ? value : undefined}
 			tabIndex={isDisabled ? -1 : (tabIndex ?? 0)}
 			role={role}
 			{...(onClick && { onClick: handleClick })}
@@ -166,7 +167,6 @@ export const Button: FC<ButtonProps> = ({
 				accept={accept}
 				multiple={multiple}
 				tabIndex={-1}
-				role={role}
 				onChange={onChange}
 				defaultValue={isIconOnly || isFileType ? "" : value}
 			/>

package/components/Checkbox/Checkbox.tsx

@@ -18,6 +18,7 @@ export const Checkbox: FC<CheckboxProps> = ({
 	isSmall,
 	description,
 	isDisabled,
+	isRequired,
 	onChange,
 	label,
 }) => {
@@ -38,7 +39,15 @@ export const Checkbox: FC<CheckboxProps> = ({
 		<div className={checkboxClasses}>
 			<label className={checkboxLabelClasses} htmlFor={checkboxId}>
 				<span className={styles.checkbox__mark}>
-					<input type="checkbox" checked={isChecked} onChange={onChange} disabled={isDisabled} id={checkboxId} />
+					<input
+						type="checkbox"
+						checked={isChecked}
+						onChange={onChange}
+						disabled={isDisabled}
+						required={isRequired}
+						aria-label={isLabelHidden ? label : undefined}
+						id={checkboxId}
+					/>
 					<Icon icon="check" size={isSmall ? 14 : 18} className={styles.checkbox__checkboxIcon} />
 					<div className={styles.checkbox__checkboxMark} />
 				</span>

package/components/Details/Details.tsx

@@ -11,7 +11,7 @@ export const Details: FC<DetailsProps> = ({ children, label, isOpen }) => {
 				<Text type="small" fontWeight="medium">
 					{label}
 				</Text>
-				<Icon icon="caret-down" size={20} emphasis="tertiary" />
+				<Icon icon="caret-down" size={20} emphasis="tertiary" aria-hidden={true} />
 			</summary>
 			<div>{children}</div>
 		</details>

package/components/Dialog/Dialog.tsx

@@ -88,7 +88,7 @@ export const Dialog: FC<DialogProps> = ({ title, children, isNarrow, isOpen, isC
 						{title}
 					</Heading>
 					<ButtonGroup>
-						<Button icon="x" intent="neutral" value="" onClick={onClose} size="small" isIconOnly={true} />
+						<Button icon="x" intent="neutral" value="Close dialog" onClick={onClose} size="small" isIconOnly={true} />
 					</ButtonGroup>
 				</Flex>
 			)}

package/components/Dot/Dot.tsx

@@ -26,7 +26,7 @@ export const Dot: FC<DotProps> = ({ colorAccent, size = 8, color = "blue" }) =>
 
 	return (
 		<div className={styles.dot} style={dotStyle}>
-			<svg width="100%" height="100%" viewBox="0 0 20 20">
+			<svg width="100%" height="100%" viewBox="0 0 20 20" aria-hidden={true}>
 				{colorAccent ? (
 					<>
 						<linearGradient id={dotId}>

package/components/Dropdown/Dropdown.tsx

@@ -76,7 +76,9 @@ export const Dropdown: FC<DropdownProps> = ({ children, items, isDisabled, posit
 
 	return (
 		<div className={dropdownClasses} onMouseEnter={mouseEnter} onMouseLeave={mouseLeave}>
-			<div onClick={onSetVisible}>{renderChildren}</div>
+			<div onClick={onSetVisible} aria-expanded={isVisible} aria-haspopup="listbox">
+				{renderChildren}
+			</div>
 			<nav
 				className={navClasses}
 				style={{

package/components/Icon/Icon.tsx

@@ -22,6 +22,7 @@ export const Icon: FC<IconProps> = memo(({ icon, className, emphasis, size }) =>
 		<div
 			className={iconClasses}
 			style={iconSizeStyle}
+			aria-hidden={true}
 			data-ui-component="Icon"
 			dangerouslySetInnerHTML={{ __html: icons[icon] || "" }}
 		/>

package/components/Menu/components/MenuItem/MenuItem.tsx

@@ -32,6 +32,7 @@ export const MenuItem: FC<MenuItemProps> = ({
 			isBetween={true}
 			gap={4}
 			isYCentered={true}
+			{...(isActive && { "aria-current": "page" as const })}
 		>
 			<Flex isYCentered={true} gap={4}>
 				{icon && (

package/components/Pill/Pill.tsx

@@ -44,7 +44,14 @@ export const Pill: FC<PillProps> = memo(
 		const pillTextSize = isSmall ? "tiny" : "small"
 
 		return (
-			<Flex {...(onClick && { onClick })} className={pillClasses} isCentered={true} gap={2} data-ui-component="Pill">
+			<Flex
+				{...(onClick && { onClick })}
+				className={pillClasses}
+				isCentered={true}
+				gap={2}
+				aria-label={isLabelHidden ? label : undefined}
+				data-ui-component="Pill"
+			>
 				{icon && <Icon size={PILL_ICON_SIZE[size] || 16} icon={icon} />}
 				{!isLabelHidden && (
 					<Text type={pillTextSize} whiteSpace="nowrap" {...(isMono && { fontFamily: "mono" })} fontWeight="medium">

package/components/Radio/Radio.tsx

@@ -17,6 +17,7 @@ export const Radio: FC<RadioProps> = ({
 	isSmall,
 	description,
 	isDisabled,
+	isRequired,
 	onChange,
 	label,
 	name,
@@ -44,6 +45,8 @@ export const Radio: FC<RadioProps> = ({
 						checked={isChecked}
 						onChange={onChange}
 						disabled={isDisabled}
+						required={isRequired}
+						aria-label={isLabelHidden ? label : undefined}
 						id={radioId}
 						name={name}
 						value={value}

package/components/Select/Select.tsx

@@ -29,7 +29,13 @@ export const Select: FC<SelectProps> = ({
 		<Flex isColumn={true} className={selectClasses}>
 			<InputLabel label={label} id={htmlFor} isHidden={!!isLabelHidden} isDisabled={!!isDisabled} />
 			<Flex>
-				<select className={styles.select__select} onChange={onChange} id={htmlFor} value={selectedValue}>
+				<select
+					className={styles.select__select}
+					onChange={onChange}
+					id={htmlFor}
+					value={selectedValue}
+					aria-label={isLabelHidden ? label : undefined}
+				>
 					{items?.map((item, key) => {
 						return (
 							<option key={key} value={item.value} disabled={item.isDisabled}>

package/components/Shimmer/Shimmer.tsx

@@ -12,6 +12,9 @@ export const Shimmer: FC<ShimmerProps> = ({ isRounded, paddingTop, paddingBottom
 	return (
 		<div
 			className={styles.shimmer}
+			role="status"
+			aria-busy={true}
+			aria-label="Loading"
 			style={{
 				height: height + "px",
 				paddingTop: (paddingTop ?? 0) + "px",

package/components/Toggle/Toggle.tsx

@@ -39,7 +39,10 @@ export const Toggle: FC<ToggleProps> = ({
 			<label className={toggleLabelClasses} htmlFor={toggleId}>
 				<input
 					type="checkbox"
+					role="switch"
 					checked={isChecked}
+					aria-checked={isChecked}
+					aria-label={isLabelHidden ? label : undefined}
 					onChange={onChange}
 					required={isRequired}
 					disabled={isDisabled}

package/components/Tooltip/Tooltip.tsx

@@ -98,8 +98,16 @@ const TooltipComponent: FC<TooltipProps> = ({ children = null, position = "botto
 			}
 		}
 
+		const handleKeyDown = (event: KeyboardEvent): void => {
+			if (event.key === "Escape") {
+				popover.hidePopover()
+				setIsOpen(false)
+			}
+		}
+
 		trigger.addEventListener("mouseenter", handleMouseEnter)
 		trigger.addEventListener("mouseleave", handleMouseLeave)
+		trigger.addEventListener("keydown", handleKeyDown)
 
 		globalThis.addEventListener("resize", positionTooltip)
 		globalThis.addEventListener("scroll", positionTooltip, true)
@@ -107,6 +115,7 @@ const TooltipComponent: FC<TooltipProps> = ({ children = null, position = "botto
 		return (): void => {
 			trigger.removeEventListener("mouseenter", handleMouseEnter)
 			trigger.removeEventListener("mouseleave", handleMouseLeave)
+			trigger.removeEventListener("keydown", handleKeyDown)
 			globalThis.removeEventListener("resize", positionTooltip)
 			globalThis.removeEventListener("scroll", positionTooltip, true)
 		}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@heliosgraphics/ui",
-	"version": "2.0.0-alpha.82",
+	"version": "2.0.0-alpha.83",
 	"type": "module",
 	"sideEffects": false,
 	"author": "Chris Puska <chris@puska.org>",