diff --git a/.changeset/empty-oranges-laugh.md b/.changeset/empty-oranges-laugh.md new file mode 100644 index 00000000..55fd21c8 --- /dev/null +++ b/.changeset/empty-oranges-laugh.md @@ -0,0 +1,5 @@ +--- +"@easypost/easy-ui": minor +--- + +feat: support traditional aria labeling for TextField, Textarea, and Select diff --git a/documentation/specs/Select.md b/documentation/specs/Select.md index c2e20c14..c5cccd98 100644 --- a/documentation/specs/Select.md +++ b/documentation/specs/Select.md @@ -12,7 +12,6 @@ The `Select` component allows users to select a value from a set of options. Tho - Setting the `size` property also sets size for iconAtStart: The size values map to Easy UI's token sizes for icons. - When `errorText` is supplied with `validationState="invalid"`, `helperText` is overriden. -- `isLabelVisuallyHidden` property can be used to visually hide the label. - Supports disabled state. ### Risks and Challenges @@ -59,10 +58,9 @@ export type SelectProps = AriaSelectProps & export type BaseSelectFieldProps = { /** - * Visually hides the label, but keeps it accessible. - * @default false + * Accessibility label for select field. */ - isLabelVisuallyHidden?: boolean; + "aria-label"?: string; /** * Whether the select field is disabled. * @default false @@ -219,7 +217,7 @@ export function Component() { Accessibility -- Labels should be included on all select fields as they describe the purpose of any associated form control. In situations when you may want the label to be visually hidden, use the `isLabelVisuallyHidden` prop. +- Labels should be included on all select fields as they describe the purpose of any associated form control. In situations when you may want the label to be visually hidden, provide a label via the `aria-label` prop. - The dropdown has an ARIA role of `listbox`. ## Dependencies diff --git a/documentation/specs/TextField.md b/documentation/specs/TextField.md index 31c72ac9..aad13598 100644 --- a/documentation/specs/TextField.md +++ b/documentation/specs/TextField.md @@ -15,7 +15,6 @@ The `TextField` component allows users to input text on a single line and provid - Setting the `size` property also sets size for iconAtStart and iconAtEnd: The size values map to Easy UI's token sizes for icons. - When `errorText` is supplied with `validationState="invalid"`, `helperText` is overriden. - Underlying input type can be set to `text`, `email`, `password`, `tel`, or `search`. -- `isLabelVisuallyHidden` property can be used to visually hide the label. ### Risks and Challenges @@ -49,10 +48,9 @@ export type InputFieldProps = AriaTextFieldProps & { */ type?: InputType; /** - * Visually hides the label, but keeps it accessible. - * @default false + * Accessibility label for input field. */ - isLabelVisuallyHidden?: boolean; + "aria-label"?: string; /** * Whether the input is disabled. * @default false @@ -121,7 +119,6 @@ export function TextField(props: TextFieldProps) { const { type = "text", size = "md", - isLabelVisuallyHidden = false, isDisabled = false, isRequired = false, validationState = "valid", @@ -141,7 +138,6 @@ export function TextField(props: TextFieldProps) {