Support complex aria-labelledby queries #1281
Description
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); });