From 31ff95ac7755bf65be4310d45668ee95d6e96133 Mon Sep 17 00:00:00 2001
From: HBS999 <mrbirb007@gmail.com>
Date: Wed, 30 Oct 2024 00:32:37 +0300
Subject: [PATCH] fix: hidden inputs should have a default aria-label

---
 .../src/colors/color-area/color-area-hidden-input-base.tsx  | 6 +++++-
 .../src/colors/color-area/color-area-hidden-input-x.tsx     | 2 +-
 .../src/colors/color-area/color-area-hidden-input-y.tsx     | 2 +-
 packages/core/src/colors/color-area/color-area.intl.ts      | 1 +
 4 files changed, 8 insertions(+), 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
index 4d635fe7..40df89a6 100644
--- 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
index 4b1f2dfa..606adc6d 100644
--- 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
index f094fcc6..cf4e14ff 100644
--- 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
index 0259af10..daafff1a 100644
--- 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",
 };