fix: hidden inputs should have a default aria-label

kobaltedev · Oct 29, 2024 · 31ff95a · 31ff95a
1 parent c6dbd11
commit 31ff95a
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 3 deletions.
diff --git a/packages/core/src/colors/color-area/color-area-hidden-input-base.tsx b/packages/core/src/colors/color-area/color-area-hidden-input-base.tsx
@@ -50,6 +50,10 @@ export function ColorAreaHiddenInputBase(props: ColorAreaHiddenInputBaseProps) {
 
 	const isVertical = () => local.orientation === "vertical";
 
+	const ariaLabel = () => {
+		return [fieldProps.ariaLabel(), context.translations().colorPicker].filter(Boolean).join(", ");
+	};
+
 	const onChange: JSX.ChangeEventHandlerUnion<HTMLInputElement, Event> = (
 		e,
 	) => {
@@ -97,7 +101,7 @@ export function ColorAreaHiddenInputBase(props: ColorAreaHiddenInputBaseProps) {
 			aria-roledescription={context.translations().twoDimensionalSlider}
 			aria-valuetext={valueText()}
 			aria-orientation={local.orientation}
-			aria-label={fieldProps.ariaLabel()}
+			aria-label={ariaLabel()}
 			aria-labelledby={fieldProps.ariaLabelledBy()}
 			aria-describedby={fieldProps.ariaDescribedBy()}
 			aria-invalid={

diff --git a/packages/core/src/colors/color-area/color-area-hidden-input-x.tsx b/packages/core/src/colors/color-area/color-area-hidden-input-x.tsx
@@ -4,5 +4,5 @@ import { ColorAreaHiddenInputBase } from "./color-area-hidden-input-base";
 export type ColorAreaHiddenInputXProps = ComponentProps<"input">;
 
 export function ColorAreaHiddenInputX(props: ColorAreaHiddenInputXProps) {
-	return <ColorAreaHiddenInputBase />;
+	return <ColorAreaHiddenInputBase {...props} />;
 }
diff --git a/packages/core/src/colors/color-area/color-area-hidden-input-y.tsx b/packages/core/src/colors/color-area/color-area-hidden-input-y.tsx
@@ -4,5 +4,5 @@ import { ColorAreaHiddenInputBase } from "./color-area-hidden-input-base";
 export type ColorAreaHiddenInputYProps = ComponentProps<"input">;
 
 export function ColorAreaHiddenInputY(props: ColorAreaHiddenInputYProps) {
-	return <ColorAreaHiddenInputBase orientation="vertical" />;
+	return <ColorAreaHiddenInputBase orientation="vertical" {...props} />;
 }
diff --git a/packages/core/src/colors/color-area/color-area.intl.ts b/packages/core/src/colors/color-area/color-area.intl.ts
@@ -1,4 +1,5 @@
 export const COLOR_AREA_INTL_TRANSLATIONS = {
+	colorPicker: "Color picker",
 	twoDimensionalSlider: "2D slider",
 };