braid-design-system 32.14.2 → 32.14.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # braid-design-system
 
+## 32.14.3
+
+### Patch Changes
+
+- **Autosuggest:** Fix aria-label and aria-labelledby features ([#1420](https://github.com/seek-oss/braid-design-system/pull/1420))
+
+  Fixes an issue where the `aria-label` and `aria-labelledby` props provided by a consumer were being overidden internally by the `Autosuggest` component.
+
 ## 32.14.2
 
 ### Patch Changes

package/dist/styles/lib/components/Autosuggest/Autosuggest.cjs

@@ -255,12 +255,8 @@ const createAccessbilityProps = ({
   isOpen
 }) => {
   const menuId = `${id}-menu`;
-  const labelId = `${id}-label`;
   const assistiveDescriptionId = `${id}-aria-description`;
   return {
-    labelProps: {
-      id: labelId
-    },
     inputProps: {
       id,
       role: "combobox",
@@ -269,7 +265,6 @@ const createAccessbilityProps = ({
       // backwards compatibility for screenreaders implementing ARIA 1.0
       "aria-controls": menuId,
       "aria-expanded": isOpen,
-      "aria-labelledby": labelId,
       "aria-autocomplete": "list",
       "aria-activedescendant": typeof highlightedIndex === "number" ? getItemId(id, highlightedIndex) : void 0,
       "aria-describedby": assistiveDescriptionId,
@@ -775,7 +770,6 @@ const Autosuggest = React.forwardRef(function({
             {
               ...restProps,
               id,
-              labelId: a11y.labelProps.id,
               value: value.text,
               prefix: void 0,
               secondaryIcon: onClear ? /* @__PURE__ */ jsxRuntime.jsx(

package/dist/styles/lib/components/Autosuggest/Autosuggest.mjs

@@ -251,12 +251,8 @@ const createAccessbilityProps = ({
   isOpen
 }) => {
   const menuId = `${id}-menu`;
-  const labelId = `${id}-label`;
   const assistiveDescriptionId = `${id}-aria-description`;
   return {
-    labelProps: {
-      id: labelId
-    },
     inputProps: {
       id,
       role: "combobox",
@@ -265,7 +261,6 @@ const createAccessbilityProps = ({
       // backwards compatibility for screenreaders implementing ARIA 1.0
       "aria-controls": menuId,
       "aria-expanded": isOpen,
-      "aria-labelledby": labelId,
       "aria-autocomplete": "list",
       "aria-activedescendant": typeof highlightedIndex === "number" ? getItemId(id, highlightedIndex) : void 0,
       "aria-describedby": assistiveDescriptionId,
@@ -771,7 +766,6 @@ const Autosuggest = forwardRef(function({
             {
               ...restProps,
               id,
-              labelId: a11y.labelProps.id,
               value: value.text,
               prefix: void 0,
               secondaryIcon: onClear ? /* @__PURE__ */ jsx(

package/dist/styles/lib/components/Dropdown/Dropdown.cjs

@@ -23,7 +23,6 @@ const Dropdown = React.forwardRef(
       {
         ...restProps,
         disabled,
-        labelId: void 0,
         prefix: void 0,
         secondaryMessage: null,
         value,

package/dist/styles/lib/components/Dropdown/Dropdown.mjs

@@ -22,7 +22,6 @@ const Dropdown = forwardRef(
       {
         ...restProps,
         disabled,
-        labelId: void 0,
         prefix: void 0,
         secondaryMessage: null,
         value,

package/dist/styles/lib/components/MonthPicker/MonthPicker.cjs

@@ -274,7 +274,6 @@ const MonthPicker = ({
       ...restProps,
       icon: void 0,
       prefix: void 0,
-      labelId: void 0,
       name: void 0,
       autoComplete: void 0,
       secondaryMessage: null,

package/dist/styles/lib/components/MonthPicker/MonthPicker.mjs

@@ -271,7 +271,6 @@ const MonthPicker = ({
       ...restProps,
       icon: void 0,
       prefix: void 0,
-      labelId: void 0,
       name: void 0,
       autoComplete: void 0,
       secondaryMessage: null,

package/dist/styles/lib/components/Textarea/Textarea.cjs

@@ -112,7 +112,6 @@ const Textarea = React.forwardRef(
         value,
         icon: void 0,
         prefix: void 0,
-        labelId: void 0,
         secondaryMessage: characterLimit ? getCharacterLimitStatus({
           value,
           characterLimit

package/dist/styles/lib/components/Textarea/Textarea.mjs

@@ -109,7 +109,6 @@ const Textarea = forwardRef(
         value,
         icon: void 0,
         prefix: void 0,
-        labelId: void 0,
         secondaryMessage: characterLimit ? getCharacterLimitStatus({
           value,
           characterLimit

package/dist/styles/lib/components/private/Field/Field.cjs

@@ -19,7 +19,6 @@ const clsx__default = /* @__PURE__ */ _interopDefaultCompat(clsx);
 const Field = ({
   id,
   value,
-  labelId,
   name,
   disabled,
   autoComplete,
@@ -76,7 +75,6 @@ const Field = ({
     hasVisualLabelOrDescription ? /* @__PURE__ */ jsxRuntime.jsx(
       styles_lib_components_MonthPicker_MonthPicker_cjs.FieldLabel,
       {
-        id: labelId,
         htmlFor: id,
         label: "label" in restProps ? restProps.label : void 0,
         disabled,

package/dist/styles/lib/components/private/Field/Field.mjs

@@ -15,7 +15,6 @@ import { useBackgroundLightness } from "../../Box/BackgroundContext.mjs";
 const Field = ({
   id,
   value,
-  labelId,
   name,
   disabled,
   autoComplete,
@@ -72,7 +71,6 @@ const Field = ({
     hasVisualLabelOrDescription ? /* @__PURE__ */ jsx(
       FieldLabel,
       {
-        id: labelId,
         htmlFor: id,
         label: "label" in restProps ? restProps.label : void 0,
         disabled,

package/dist/styles/lib/components/private/Placeholder/Placeholder.cjs

@@ -630,7 +630,6 @@ const PasswordField = React.forwardRef(
         value,
         icon: void 0,
         prefix: void 0,
-        labelId: void 0,
         disabled,
         secondaryMessage: null,
         alwaysShowSecondaryIcon: !disabled,
@@ -887,7 +886,6 @@ const TextField = React.forwardRef(
         ...restProps,
         id,
         value,
-        labelId: void 0,
         secondaryMessage: characterLimit ? styles_lib_components_Textarea_Textarea_cjs.getCharacterLimitStatus({
           value,
           characterLimit

package/dist/styles/lib/components/private/Placeholder/Placeholder.mjs

@@ -624,7 +624,6 @@ const PasswordField = forwardRef(
         value,
         icon: void 0,
         prefix: void 0,
-        labelId: void 0,
         disabled,
         secondaryMessage: null,
         alwaysShowSecondaryIcon: !disabled,
@@ -881,7 +880,6 @@ const TextField = forwardRef(
         ...restProps,
         id,
         value,
-        labelId: void 0,
         secondaryMessage: characterLimit ? getCharacterLimitStatus({
           value,
           characterLimit

package/dist/wireframe.chunk.d.ts

@@ -2926,7 +2926,6 @@ type FieldLabelVariant$1 = {
 interface FieldBaseProps {
     id: NonNullable<FormElementProps$1['id']>;
     value?: FormElementProps$1['value'];
-    labelId?: string;
     name?: FormElementProps$1['name'];
     disabled?: FormElementProps$1['disabled'];
     autoComplete?: FormElementProps$1['autoComplete'];
@@ -2976,7 +2975,7 @@ interface LegacyMessageSuggestion {
     /** @deprecated Use `noSuggestionsMessage` prop instead */
     message: string;
 }
-type AutosuggestBaseProps<Value> = Omit<FieldBaseProps, 'value' | 'autoComplete' | 'labelId' | 'prefix'> & {
+type AutosuggestBaseProps<Value> = Omit<FieldBaseProps, 'value' | 'autoComplete' | 'prefix'> & {
     value: AutosuggestValue<Value>;
     suggestions: Suggestions<Value> | LegacyMessageSuggestion | ((value: AutosuggestValue<Value>) => Suggestions<Value> | LegacyMessageSuggestion);
     noSuggestionsMessage?: string | {
@@ -3247,7 +3246,7 @@ declare const Drawer$1: ({ width, position, ...restProps }: DrawerProps) => JSX.
 
 type ValidDropdownChildren = AllHTMLAttributes<HTMLOptionElement | HTMLOptGroupElement>;
 type SelectProps = AllHTMLAttributes<HTMLSelectElement>;
-type DropdownBaseProps = Omit<FieldBaseProps, 'value' | 'labelId' | 'secondaryMessage' | 'prefix'> & {
+type DropdownBaseProps = Omit<FieldBaseProps, 'value' | 'secondaryMessage' | 'prefix'> & {
     children: ValidDropdownChildren[] | ValidDropdownChildren;
     value: NonNullable<SelectProps['value']>;
     onChange: NonNullable<SelectProps['onChange']>;
@@ -3474,7 +3473,7 @@ type MonthNames = [
 ];
 type FocusHandler = () => void;
 type ChangeHandler$1 = (value: MonthPickerValue) => void;
-type MonthPickerBaseProps = Omit<FieldGroupBaseProps, 'value' | 'labelId' | 'aria-describedby' | 'name' | 'autoComplete' | 'secondaryMessage' | 'autoFocus' | 'icon' | 'prefix'> & {
+type MonthPickerBaseProps = Omit<FieldGroupBaseProps, 'value' | 'aria-describedby' | 'name' | 'autoComplete' | 'secondaryMessage' | 'autoFocus' | 'icon' | 'prefix'> & {
     value: MonthPickerValue;
     onChange: ChangeHandler$1;
     onBlur?: FocusHandler;
@@ -3535,7 +3534,7 @@ interface PaginationProps {
 declare const Pagination$1: ({ page, total, linkProps, label, pageLabel, nextLabel, previousLabel, pageLimit, data, ...restProps }: PaginationProps) => JSX.Element;
 
 type InputProps$1 = AllHTMLAttributes<HTMLInputElement>;
-type PasswordFieldBaseProps = Omit<FieldBaseProps, 'value' | 'labelId' | 'secondaryMessage' | 'icon' | 'prefix'> & {
+type PasswordFieldBaseProps = Omit<FieldBaseProps, 'value' | 'secondaryMessage' | 'icon' | 'prefix'> & {
     value: NonNullable<InputProps$1['value']>;
     onChange: NonNullable<InputProps$1['onChange']>;
     onBlur?: InputProps$1['onBlur'];
@@ -3703,7 +3702,7 @@ type TagProps = {
 declare const Tag$1: ({ onClear, clearLabel, data, id, icon, children, ...restProps }: TagProps) => JSX.Element;
 
 type NativeTextareaProps = AllHTMLAttributes<HTMLTextAreaElement>;
-type TextareaBaseProps = Omit<FieldBaseProps, 'value' | 'labelId' | 'secondaryMessage' | 'icon' | 'prefix'> & {
+type TextareaBaseProps = Omit<FieldBaseProps, 'value' | 'secondaryMessage' | 'icon' | 'prefix'> & {
     value: NonNullable<NativeTextareaProps['value']>;
     onChange: NonNullable<NativeTextareaProps['onChange']>;
     onBlur?: NativeTextareaProps['onBlur'];
@@ -3750,7 +3749,7 @@ declare const validTypes: {
     url: string;
 };
 type InputProps = AllHTMLAttributes<HTMLInputElement>;
-type TextFieldBaseProps = Omit<FieldBaseProps, 'value' | 'labelId' | 'secondaryMessage'> & {
+type TextFieldBaseProps = Omit<FieldBaseProps, 'value' | 'secondaryMessage'> & {
     value: NonNullable<InputProps['value']>;
     type?: keyof typeof validTypes;
     inputMode?: InputProps['inputMode'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "braid-design-system",
-  "version": "32.14.2",
+  "version": "32.14.3",
   "description": "Themeable design system for the SEEK Group",
   "homepage": "https://seek-oss.github.io/braid-design-system/",
   "bugs": {