Support complex aria-labelledby queries

[jossmac-plenti]

Describe the feature you'd like:

I'd like getByLabelText to resolve the contents of aria-labelledby and associated elements. As I'm writing this it occurs to me that this might be too costly and perhaps better suited to something like axe.

Describe alternatives you've considered:

I've resorted to a combination of getByRole + getByText and checking IDs.

Teachability, Documentation, Adoption, Migration Strategy:

The summarised/pseudo code looks something like:

let contentId = 'content-id';
let spinnerId = 'spinner-id';

return (
  <button
    aria-disabled={props.pending ? true : undefined}
    aria-labelledby={props.pending ? `${contentId} ${spinnerId}` : undefined}
  >
    <span id={contentId}>{props.children}</span>
    {props.pending && (
      <span id={spinnerId} aria-label="pending" aria-hidden>
        ...
      </span>
    )}
  </button>
);

The desired test would look something like:

it('supports "pending" prop', () => {
  let buttonText = 'Submit';
  let { getByLabelText } = render(<Button pending>{buttonText}</Button>);

  expect(getByLabelText(`${buttonText} pending`)).toHaveAttribute("aria-disabled", true);
});

[jossmac-plenti]

Moved to testing-library/react-testing-library#1260