Use icon button label as the aria-label to improve accessibility.

packages/material/modules/widgets/core/MaterialButton.jsx

@@ -27,12 +27,14 @@ export default (props) => {
   const icon = renderIcon?.(iconProps);
 
   if (!label || hideLabelsFor[type]) {
+    // For icons, use the label as aria-label for accessibility
     return (
       <IconButton
         size="small" 
         disabled={readonly} 
         onClick={onClick} 
         color={typeToColor[type]}
+        aria-label={label}
       >{icon}</IconButton>
     );
   } else {

packages/material/modules/widgets/value/MaterialAutocomplete.jsx

@@ -9,7 +9,7 @@ import Box from "@material-ui/core/Box";
 import { makeStyles } from "@material-ui/core/styles";
 import CheckBoxOutlineBlankIcon from "@material-ui/icons/CheckBoxOutlineBlank";
 import CheckBoxIcon from "@material-ui/icons/CheckBox";
-import { Hooks, Utils } from "@react-awesome-query-builder/ui";
+import { Hooks } from "@react-awesome-query-builder/ui";
 const { useListValuesAutocomplete } = Hooks;
 
 const nonCheckedIcon = <CheckBoxOutlineBlankIcon fontSize="small" style={{ marginRight: 10, marginTop: 4 }} />;
@@ -58,7 +58,7 @@ export default (props) => {
     uif: "mui"
   });
 
-  // setings
+  // settings
   const {defaultSelectWidth, defaultSearchWidth} = config.settings;
   const {width, ...rest} = customProps || {};
   let customInputProps = rest.input || {};
@@ -73,6 +73,10 @@ export default (props) => {
     minWidth: minWidth
   };
   const placeholder = !readonly ? aPlaceholder : "";
+
+  // For accessibility, always give the input field an aria-label
+  const ariaLabel = placeholder || config.settings.fieldPlaceholder;
+
   const hasValue = selectedValue != null;
   // should be simple value to prevent re-render!s
   const value = hasValue ? selectedValue : (multiple ? emptyArray : null);
@@ -120,6 +124,7 @@ export default (props) => {
         inputProps={{
           ...params.inputProps,
           value,
+          "aria-label": ariaLabel,
         }}
         InputProps={{
           ...params.InputProps,
@@ -133,6 +138,7 @@ export default (props) => {
         }}
         disabled={readonly}
         placeholder={placeholder}
+        aria-label={placeholder}
         error={!!errorText}
         //onChange={onInputChange}
         {...customInputProps}

packages/mui/modules/widgets/core/MuiButton.jsx

@@ -27,12 +27,14 @@ export default memo((props) => {
   const icon = renderIcon?.(iconProps);
 
   if (!label || hideLabelsFor[type]) {
+    // For icons, use the label as aria-label for accessibility
     return (
       <IconButton
         size="small" 
         disabled={readonly} 
         onClick={onClick} 
         color={typeToColor[type]}
+        aria-label={label}
       >{icon}</IconButton>
     );
   } else {

packages/mui/modules/widgets/value/MuiAutocomplete.jsx

@@ -11,7 +11,6 @@ import ListItemIcon from "@mui/material/ListItemIcon";
 import ListItemText from "@mui/material/ListItemText";
 import Tooltip from "@mui/material/Tooltip";
 import { Hooks } from "@react-awesome-query-builder/ui";
-import { styled } from "@mui/system";
 import { useTheme } from "@mui/material/styles";
 const { useListValuesAutocomplete } = Hooks;
 const emptyArray = [];
@@ -63,7 +62,7 @@ export default (props) => {
     isFieldAutocomplete,
   });
 
-  // setings
+  // settings
   const {defaultSelectWidth, defaultSearchWidth} = config.settings;
   const {width, ...rest} = customProps || {};
   let customInputProps = rest.input || {};
@@ -78,6 +77,10 @@ export default (props) => {
     minWidth: minWidth
   };
   const placeholder = !readonly ? aPlaceholder : "";
+
+  // For accessibility, always give the input field an aria-label
+  const ariaLabel = placeholder || config.settings.fieldPlaceholder;
+
   const hasValue = selectedValue != null;
   // should be simple value to prevent re-render!s
   const value = hasValue ? selectedValue : (multiple ? emptyArray : null);
@@ -106,6 +109,7 @@ export default (props) => {
         inputProps={{
           ...params.inputProps,
           value,
+          "aria-label": ariaLabel,
         }}
         InputProps={{
           ...params.InputProps,

packages/tests/specs/WidgetsMaterial.test.ts

@@ -95,6 +95,70 @@ describe("material-ui widgets interactions", () => {
       ignoreLog: ignoreLogDatePicker,
     });
   });
+});
+
+describe("material-ui IconButton accessibility - aria-label", () => {
+  // When deleteLabel is defined it is used as the aria-label for icon buttons
+  it("delete button label is used as aria-label", async () => {
+    await with_qb_material(configs.with_modified_delete_label,
+      inits.with_number,
+      "JsonLogic",
+      () => {
+        const deleteBtn = document.querySelector<HTMLElement>(
+          ".rule--header .MuiIconButton-root" 
+        );
+        expect(deleteBtn, "deleteBtn").to.exist;
+        const ariaLabel = deleteBtn?.getAttribute("aria-label");
+        expect(ariaLabel).to.eq("Delete rule");
+      }
+    );
+  });
+
+  // When deleteLabel is not defined icon buttons do not have an aria-label
+  it("delete button with no label defined has no aria-label", async () => {
+    await with_qb_material(configs.with_no_delete_label,
+      inits.with_number,
+      "JsonLogic",
+      () => {
+        const deleteBtn = document.querySelector<HTMLElement>(
+          ".rule--header .MuiIconButton-root" 
+        );
+        expect(deleteBtn, "deleteBtn").to.exist;
+        expect(deleteBtn?.hasAttribute("aria-label")).to.eq(false);
+      }
+    );
+  });
+});
 
+describe("material-ui Autocomplete accessibility - aria-label", () => {
+  // Autocomplete uses fieldPlaceholder from config as the aria-label
+  it("fieldPlaceholder is used as aria-label", async () => {
+    await with_qb_material(configs.with_modified_field_placeholder,
+      inits.with_number,
+      "JsonLogic",
+      () => {
+        const fieldCombo = document.querySelector<HTMLElement>(
+          ".rule--field .MuiAutocomplete-input"
+        );
+        expect(fieldCombo, "field combobox").to.exist;
+        const ariaLabel = fieldCombo?.getAttribute("aria-label");
+        expect(ariaLabel).to.eq("autocomplete placeholder");
+      }
+    );
+  });
 
+  // When fieldPlaceholder is not defined Autocompletes do not have an aria-label
+  it("select field combobox has no aria-label when fieldPlaceholder is not defined", async () => {
+    await with_qb_material(configs.with_no_field_placeholder,
+      inits.with_number,
+      "JsonLogic",
+      () => {
+        const fieldCombo = document.querySelector<HTMLElement>(
+          ".rule--field .MuiAutocomplete-input"
+        );
+        expect(fieldCombo, "field combobox").to.exist;
+        expect(fieldCombo?.hasAttribute("aria-label")).to.eq(false);
+      }
+    );
+  });
 });

packages/tests/specs/WidgetsMui.test.ts

@@ -213,3 +213,69 @@ describe("mui widgets interactions", () => {
   });
 
 });
+
+describe("mui IconButton accessibility - aria-label", () => {
+  // When deleteLabel is defined it is used as the aria-label for icon buttons
+  it("delete button label is used as aria-label", async () => {
+    await with_qb_mui(configs.with_modified_delete_label,
+      inits.with_number,
+      "JsonLogic",
+      () => {
+        const deleteBtn = document.querySelector<HTMLElement>(
+          ".rule--header .MuiIconButton-root" 
+        );
+        expect(deleteBtn, "deleteBtn").to.exist;
+        const ariaLabel = deleteBtn?.getAttribute("aria-label");
+        expect(ariaLabel).to.eq("Delete rule");
+      }
+    );
+  });
+
+  // When deleteLabel is not defined icon buttons do not have an aria-label
+  it("delete button with no label defined has no aria-label", async () => {
+    await with_qb_mui(configs.with_no_delete_label,
+      inits.with_number,
+      "JsonLogic",
+      () => {
+        const deleteBtn = document.querySelector<HTMLElement>(
+          ".rule--header .MuiIconButton-root" 
+        );
+        expect(deleteBtn, "deleteBtn").to.exist;
+        expect(deleteBtn?.hasAttribute("aria-label")).to.eq(false);
+      }
+    );
+  });
+});
+
+describe("mui Autocomplete accessibility - aria-label", () => {
+  // Autocomplete uses fieldPlaceholder from config as the aria-label
+  it("fieldPlaceholder is used as aria-label", async () => {
+    await with_qb_mui(configs.with_modified_field_placeholder,
+      inits.with_number,
+      "JsonLogic",
+      () => {
+        const fieldCombo = document.querySelector<HTMLElement>(
+          ".rule--field .MuiAutocomplete-input"
+        );
+        expect(fieldCombo, "field combobox").to.exist;
+        const ariaLabel = fieldCombo?.getAttribute("aria-label");
+        expect(ariaLabel).to.eq("autocomplete placeholder");
+      }
+    );
+  });
+
+  // When fieldPlaceholder is not defined Autocompletes do not have an aria-label
+  it("select field combobox has no aria-label when fieldPlaceholder is not defined", async () => {
+    await with_qb_mui(configs.with_no_field_placeholder,
+      inits.with_number,
+      "JsonLogic",
+      () => {
+        const fieldCombo = document.querySelector<HTMLElement>(
+          ".rule--field .MuiAutocomplete-input"
+        );
+        expect(fieldCombo, "field combobox").to.exist;
+        expect(fieldCombo?.hasAttribute("aria-label")).to.eq(false);
+      }
+    );
+  });
+});

packages/tests/support/configs.js

@@ -1578,3 +1578,80 @@ export const with_dot_in_field = (BasicConfig) => ({
     },
   },
 });
+
+export const with_modified_delete_label = (BasicConfig) => ({
+  ...BasicConfig,
+  fields: {
+    num: {
+      label: "Number",
+      type: "number",
+      preferWidgets: ["number"],
+      fieldSettings: {
+        min: -1,
+        max: 5
+      },
+    },
+  },
+  settings: {
+    ...BasicConfig.settings,
+    deleteLabel: "Delete rule",
+  }
+});
+
+export const with_no_delete_label = (BasicConfig) => ({
+  ...BasicConfig,
+  fields: {
+    num: {
+      label: "Number",
+      type: "number",
+      preferWidgets: ["number"],
+      fieldSettings: {
+        min: -1,
+        max: 5
+      },
+    },
+  },
+  settings: {
+    ...BasicConfig.settings,
+    deleteLabel: null,
+  }
+});
+
+
+export const with_modified_field_placeholder = (BasicConfig) => ({
+  ...BasicConfig,
+  fields: {
+    num: {
+      label: "Number",
+      type: "number",
+      preferWidgets: ["number"],
+      fieldSettings: {
+        min: -1,
+        max: 5
+      },
+    },
+  },
+  settings: {
+    ...BasicConfig.settings,
+    fieldPlaceholder: "autocomplete placeholder",
+  }
+});
+
+export const with_no_field_placeholder = (BasicConfig) => ({
+  ...BasicConfig,
+  fields: {
+    num: {
+      label: "Number",
+      type: "number",
+      preferWidgets: ["number"],
+      fieldSettings: {
+        min: -1,
+        max: 5
+      },
+    },
+  },
+  settings: {
+    ...BasicConfig.settings,
+    fieldPlaceholder: null,
+  }
+});