Accessibility

[sshty2018]

Is there any way to

1. Add aria-labels to operator drop down and combinator drop down.
2. Change the title and add aria-label when
   adding the rules (Instead of the default "Query Builder") and inside group (Instead of Rule at path 0-0-0 etc)

[jakeboone02]

Question 1

We don't have a way to add arbitrary props to the select element rendered by the default ValueSelector (but that seems like a good idea...after all, you can add arbitrary props to the value selectors from the compatibility packages). So to add aria-label to dropdowns in the default theme you'd (currently) have to reimplement ValueSelector like this:

import { QueryBuilder, useValueSelector } from 'react-querybuilder';

const A11yValueSelector = (props: VersatileSelectorProps) => {
  const { onChange, val } = useValueSelector(props);

  const selectElementChangeHandler = useSelectElementChangeHandler({ multiple: props.multiple, onChange });

  const ariaLabel = `...some logic here based on props...`;

  return (
    <select
      aria-label={ariaLabel} // <--- Added
      data-testid={props.testID}
      className={props.className}
      value={val}
      title={props.title}
      disabled={props.disabled}
      multiple={!!props.multiple}
      onChange={selectElementChangeHandler}
    >
      {toOptions(props.options)}
    </select>
  );
};

const App = () => (
  <QueryBuilder controlElements={{ valueSelector: A11yValueSelector }} />
);

Question 2

This is a much easier one to answer: use the accessibleDescriptionGenerator prop.