fix: aria label issue for dropdown selectors

Author: r0b1n

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/DatagridDropdownFilter.editorPreview.tsx

@@ -10,6 +10,7 @@ function Preview(props: DatagridDropdownFilterPreviewProps): ReactElement {
     return (
         <Select
             className={props.class}
+            ariaLabel={props.ariaLabel}
             style={parseStyle(props.style)}
             options={[]}
             empty={!props.clearable}

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/__tests__/DatagridDropdownFilter.spec.tsx

@@ -24,6 +24,8 @@ const commonProps: DatagridDropdownFilterContainerProps = {
     multiSelect: false,
     clearable: false,
     emptySelectionCaption: dynamicValue("Select"),
+    emptyOptionCaption: dynamicValue("None"),
+    ariaLabel: dynamicValue("AriaLabel"),
     selectedItemsStyle: "text",
     selectionMethod: "checkbox"
 };

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/__tests__/__snapshots__/DatagridDropdownFilter.spec.tsx.snap

@@ -47,7 +47,7 @@ exports[`Dropdown Filter with single instance with single attribute renders corr
         class="widget-dropdown-filter-menu-slot"
       >
         <ul
-          aria-labelledby="downshift-:r0:-label"
+          aria-label="AriaLabel"
           class="widget-dropdown-filter-menu"
           id="downshift-:r0:-menu"
           role="listbox"

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/components/AttrFilter.tsx

@@ -24,7 +24,7 @@ function Connector(props: DatagridDropdownFilterContainerProps & EnumFilterProps
         <EnumFilterContainer
             {...props}
             multiselect={props.multiSelect}
-            ariaLabel={props.ariaLabel?.value}
+            ariaLabel={props.ariaLabel?.value ?? ""}
             className={props.class}
             styles={props.style}
             emptyOptionCaption={props.emptyOptionCaption?.value ?? ""}

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/components/RefFilter.tsx

@@ -10,7 +10,7 @@ function Connector(props: DatagridDropdownFilterContainerProps & RefFilterProps)
         <RefFilterContainer
             {...props}
             multiselect={props.multiSelect}
-            ariaLabel={props.ariaLabel?.value}
+            ariaLabel={props.ariaLabel?.value ?? ""}
             className={props.class}
             styles={props.style}
             emptyOptionCaption={props.emptyOptionCaption?.value ?? ""}

packages/shared/widget-plugin-dropdown-filter/src/containers/EnumFilterContainer.tsx

@@ -18,7 +18,7 @@ import { EnumFilterStore } from "../stores/EnumFilterStore";
 import { FilterOptionsType, SelectedItemsStyleEnum, SelectionMethodEnum } from "../typings/widget";
 
 export interface EnumFilterContainerProps {
-    ariaLabel?: string;
+    ariaLabel: string;
     className?: string;
     defaultValue?: string;
     emptyOptionCaption: string;
@@ -70,6 +70,7 @@ const SelectWidget = observer(function SelectWidget(props: EnumFilterContainerPr
             showCheckboxes={ctrl1.multiselect}
             className={props.className}
             style={props.styles}
+            ariaLabel={props.ariaLabel}
         />
     );
 });
@@ -85,6 +86,7 @@ const ComboboxWidget = observer(function ComboboxWidget(props: EnumFilterContain
             options={ctrl2.options}
             inputPlaceholder={ctrl2.inputPlaceholder}
             emptyCaption={ctrl2.emptyCaption}
+            ariaLabel={props.ariaLabel}
             useComboboxProps={ctrl2.useComboboxProps}
             onClear={ctrl2.handleClear}
             onFocus={ctrl2.handleFocus}
@@ -112,6 +114,7 @@ const TagPickerWidget = observer(function TagPickerWidget(props: EnumFilterConta
             onBlur={ctrl3.handleBlur}
             inputPlaceholder={ctrl3.inputPlaceholder}
             emptyCaption={ctrl3.emptyCaption}
+            ariaLabel={props.ariaLabel}
             empty={ctrl3.isEmpty}
             showCheckboxes={props.selectionMethod === "checkbox"}
             selectedStyle={props.selectedItemsStyle}

packages/shared/widget-plugin-dropdown-filter/src/containers/RefFilterContainer.tsx

@@ -19,7 +19,7 @@ import { GateProvider } from "@mendix/widget-plugin-mobx-kit/GateProvider";
 import { DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/props-gate";
 
 export interface RefFilterContainerProps {
-    ariaLabel?: string;
+    ariaLabel: string;
     className?: string;
     defaultValue?: string;
     emptyOptionCaption: string;
@@ -73,6 +73,7 @@ const SelectWidget = observer(function SelectWidget(props: RefFilterContainerPro
             showCheckboxes={ctrl1.multiselect}
             className={props.className}
             style={props.styles}
+            ariaLabel={props.ariaLabel}
         />
     );
 });
@@ -89,6 +90,7 @@ const ComboboxWidget = observer(function ComboboxWidget(props: RefFilterContaine
             options={ctrl2.options}
             inputPlaceholder={ctrl2.inputPlaceholder}
             emptyCaption={ctrl2.emptyCaption}
+            ariaLabel={props.ariaLabel}
             useComboboxProps={ctrl2.useComboboxProps}
             onClear={ctrl2.handleClear}
             onFocus={ctrl2.handleFocus}
@@ -120,6 +122,7 @@ const TagPickerWidget = observer(function TagPickerWidget(props: RefFilterContai
             onMenuScroll={handleMenuScroll}
             inputPlaceholder={ctrl3.inputPlaceholder}
             emptyCaption={ctrl3.emptyCaption}
+            ariaLabel={props.ariaLabel}
             empty={ctrl3.isEmpty}
             showCheckboxes={props.selectionMethod === "checkbox"}
             selectedStyle={props.selectedItemsStyle}

packages/shared/widget-plugin-dropdown-filter/src/controllers/EnumBaseController.ts

@@ -56,6 +56,7 @@ export interface EnumBaseControllerProps {
     emptyOptionCaption: string;
     emptySelectionCaption: string;
     placeholder: string;
+    ariaLabel: string;
 }
 
 export interface CustomOption<T> {

packages/shared/widget-plugin-dropdown-filter/src/controllers/EnumComboboxController.ts

@@ -5,6 +5,8 @@ import { ComboboxControllerMixin } from "./mixins/ComboboxControllerMixin";
 export class EnumComboboxController extends ComboboxControllerMixin(EnumBaseController) {
     constructor({ gate }: { gate: DerivedPropsGate<EnumBaseControllerProps> }) {
         super({ gate, multiselect: false });
-        this.inputPlaceholder = gate.props.placeholder ?? "Search";
+        this.inputPlaceholder = gate.props.placeholder;
+        this.emptyCaption = gate.props.emptySelectionCaption;
+        this.ariaLabel = gate.props.ariaLabel;
     }
 }

packages/shared/widget-plugin-dropdown-filter/src/controllers/EnumSelectController.ts

@@ -7,5 +7,6 @@ export class EnumSelectController extends SelectControllerMixin(EnumBaseControll
         super({ gate, multiselect: gate.props.multiselect });
         this.emptyOption.caption = gate.props.emptyOptionCaption;
         this.emptyCaption = gate.props.emptySelectionCaption;
+        this.ariaLabel = gate.props.ariaLabel;
     }
 }

packages/shared/widget-plugin-dropdown-filter/src/controllers/EnumTagPickerController.ts

@@ -16,7 +16,9 @@ export class EnumTagPickerController extends TagPickerControllerMixin(EnumBaseCo
 
     constructor({ gate }: { gate: DerivedPropsGate<Props> }) {
         super({ gate, multiselect: gate.props.multiselect });
-        this.inputPlaceholder = gate.props.placeholder ?? "Search";
+        this.inputPlaceholder = gate.props.placeholder;
+        this.emptyCaption = gate.props.emptySelectionCaption;
+        this.ariaLabel = gate.props.ariaLabel;
         this.filterSelectedOptions = gate.props.selectionMethod === "rowClick";
         this.selectedStyle = gate.props.selectedItemsStyle;
         this.selectionMethod = this.selectedStyle === "boxes" ? gate.props.selectionMethod : "checkbox";

packages/shared/widget-plugin-dropdown-filter/src/controllers/RefBaseController.ts

@@ -31,4 +31,5 @@ export interface RefBaseControllerProps {
     emptyOptionCaption: string;
     emptySelectionCaption: string;
     placeholder: string;
+    ariaLabel: string;
 }

packages/shared/widget-plugin-dropdown-filter/src/controllers/RefComboboxController.ts

@@ -7,6 +7,7 @@ export class RefComboboxController extends ComboboxControllerMixin(RefBaseContro
         super({ gate, multiselect: false });
         this.inputPlaceholder = gate.props.placeholder;
         this.emptyCaption = gate.props.emptySelectionCaption;
+        this.ariaLabel = gate.props.ariaLabel;
     }
 
     handleFocus = (event: React.FocusEvent<HTMLInputElement>): void => {

packages/shared/widget-plugin-dropdown-filter/src/controllers/RefSelectController.ts

@@ -7,6 +7,7 @@ export class RefSelectController extends SelectControllerMixin(RefBaseController
         super({ gate, multiselect: gate.props.multiselect });
         this.emptyOption.caption = gate.props.emptyOptionCaption;
         this.emptyCaption = gate.props.emptySelectionCaption;
+        this.ariaLabel = gate.props.ariaLabel;
     }
 
     handleFocus = (): void => {

packages/shared/widget-plugin-dropdown-filter/src/controllers/RefTagPickerController.ts

@@ -18,6 +18,7 @@ export class RefTagPickerController extends TagPickerControllerMixin(RefBaseCont
         super({ gate, multiselect: gate.props.multiselect });
         this.inputPlaceholder = gate.props.placeholder;
         this.emptyCaption = gate.props.emptySelectionCaption;
+        this.ariaLabel = gate.props.ariaLabel;
         this.filterSelectedOptions = gate.props.selectionMethod === "rowClick";
         this.selectedStyle = gate.props.selectedItemsStyle;
         this.selectionMethod = this.selectedStyle === "boxes" ? gate.props.selectionMethod : "checkbox";

packages/shared/widget-plugin-dropdown-filter/src/controllers/mixins/ComboboxControllerMixin.ts

@@ -27,6 +27,7 @@ export function ComboboxControllerMixin<TBase extends BaseController>(Base: TBas
         inputValue = "";
         inputPlaceholder = "";
         emptyCaption = "";
+        ariaLabel = "";
 
         constructor(...args: any[]) {
             super(...args);

packages/shared/widget-plugin-dropdown-filter/src/controllers/mixins/SelectControllerMixin.ts

@@ -23,6 +23,7 @@ const none = "[[__none__]]" as const;
 export function SelectControllerMixin<TBase extends BaseController>(Base: TBase) {
     return class SelectControllerMixin extends Base {
         emptyCaption = "";
+        ariaLabel = "";
 
         readonly emptyOption = {
             value: none,

packages/shared/widget-plugin-dropdown-filter/src/controllers/mixins/TagPickerControllerMixin.ts

@@ -28,6 +28,7 @@ export function TagPickerControllerMixin<TBase extends BaseController>(Base: TBa
         inputValue = "";
         inputPlaceholder = "";
         emptyCaption = "";
+        ariaLabel = "";
         filterSelectedOptions = false;
 
         constructor(...args: any[]) {

packages/shared/widget-plugin-dropdown-filter/src/controls/base/OptionsWrapper.tsx

@@ -19,6 +19,7 @@ type OptionsWrapperProps = {
     options: OptionWithState[];
     highlightedIndex: number;
     showCheckboxes: boolean;
+    label: string;
 } & (
     | Pick<UseComboboxPropGetters<OptionWithState>, "getMenuProps" | "getItemProps">
     | Pick<UseSelectPropGetters<OptionWithState>, "getMenuProps" | "getItemProps">
@@ -27,13 +28,24 @@ type OptionsWrapperProps = {
 const noop = (): void => {};
 
 export const OptionsWrapper = forwardRef((props: OptionsWrapperProps, ref: RefObject<HTMLDivElement>): ReactElement => {
-    const { cls, style, onMenuScroll, isOpen, highlightedIndex, showCheckboxes, getMenuProps, getItemProps } = props;
+    const {
+        cls,
+        style,
+        onMenuScroll,
+        isOpen,
+        highlightedIndex,
+        showCheckboxes,
+        getMenuProps,
+        getItemProps,
+        label,
+        options
+    } = props;
     return (
         <div className={cls.popover} hidden={!isOpen} ref={ref} style={style}>
             <div className={cls.menuSlot}>
-                <ul {...getMenuProps({ className: cls.menu })} onScroll={onMenuScroll}>
+                <ul {...getMenuProps({ className: cls.menu, "aria-label": label })} onScroll={onMenuScroll}>
                     {isOpen &&
-                        props.options.map((item, index) => (
+                        options.map((item, index) => (
                             <li
                                 data-selected={item.selected || undefined}
                                 data-highlighted={highlightedIndex === index || undefined}
@@ -51,7 +63,7 @@ export const OptionsWrapper = forwardRef((props: OptionsWrapperProps, ref: RefOb
                                 {showCheckboxes && (
                                     <span className={cls.checkboxSlot}>
                                         <input
-                                            className={props.cls.checkbox}
+                                            className={cls.checkbox}
                                             role="presentation"
                                             type="checkbox"
                                             checked={item.selected}

packages/shared/widget-plugin-dropdown-filter/src/controls/combobox/Combobox.tsx

@@ -12,6 +12,7 @@ interface ComboboxProps {
     options: OptionWithState[];
     inputPlaceholder: string;
     emptyCaption: string;
+    ariaLabel: string;
     empty: boolean;
     className?: string;
     style?: React.CSSProperties;
@@ -43,7 +44,7 @@ export const Combobox = observer(function Combobox(props: ComboboxProps) {
             <input
                 className={cls.input}
                 {...getInputProps({
-                    "aria-label": props.inputPlaceholder || "Search",
+                    "aria-label": props.ariaLabel,
                     ref: inputRef,
                     onBlur: props.onBlur,
                     onFocus: props.onFocus,
@@ -56,6 +57,7 @@ export const Combobox = observer(function Combobox(props: ComboboxProps) {
             </button>
             <OptionsWrapper
                 cls={cls}
+                label={props.ariaLabel}
                 ref={refs.setFloating}
                 style={floatingStyles}
                 onMenuScroll={props.onMenuScroll}

packages/shared/widget-plugin-dropdown-filter/src/controls/select/Select.tsx

@@ -20,6 +20,7 @@ interface SelectProps {
     onClear: () => void;
     onFocus?: React.FocusEventHandler<HTMLDivElement>;
     onMenuScroll?: React.UIEventHandler<HTMLUListElement>;
+    ariaLabel: string;
 }
 
 const cls = classes();
@@ -54,6 +55,7 @@ export const Select = observer(function Select(props: SelectProps): React.ReactE
             </div>
             <OptionsWrapper
                 cls={cls}
+                label={props.ariaLabel}
                 ref={refs.setFloating}
                 style={floatingStyles}
                 onMenuScroll={props.onMenuScroll}

packages/shared/widget-plugin-dropdown-filter/src/controls/tag-picker/TagPicker.tsx

@@ -16,7 +16,7 @@ interface TagPickerProps {
     emptyCaption: string;
     showCheckboxes: boolean;
     selectedStyle?: "boxes" | "text";
-    ariaLabel?: string;
+    ariaLabel: string;
     className?: string;
     style?: React.CSSProperties;
     useMultipleSelectionProps: () => UseMultipleSelectionProps<OptionWithState>;
@@ -119,6 +119,7 @@ export const TagPicker = observer(function TagPicker(props: TagPickerProps): Rea
             </button>
             <OptionsWrapper
                 cls={cls}
+                label={inputLabel}
                 ref={refs.setFloating}
                 style={floatingStyles}
                 onMenuScroll={props.onMenuScroll}