DetailsList: select all button should not have aria-describedby if no label is present

[natalieethell]

Pull request checklist

• Addresses an existing issue: Fixes DetailList - select all button, adding aria-describedby attribute even if no label is provided #6638
• Include a change request file using $ npm run change

Description of changes

The aria-describedby attribute of the select all button in DetailsList should only be set to {this._id}-checkTooltip if the label with that id exists. I added the same conditional used for adding the label with id {this._id}-checkTooltip to adding aria-describedby with id {this._id}-checkTooltip.

These changes also add aria labels to select all checkboxes in all DetailsList examples.

Focus areas to test

Added two tests in DetailsHeader.test.tsx to verify the following two scenarios:

1. Ensure that aria-describedby does not exist on the select all button when an ariaLabelForSelectAllCheckbox prop is not passed in.
2. Ensure that aria-describedby exists on the select all button when an ariaLabelForSelectAllCheckbox prop is passed in and an onRenderColumnHeaderTooltip is not passed in.

Microsoft Reviewers: Open in CodeFlow

[KevinTCoughlin]

[KevinTCoughlin]

This is totally fine, but you can also do:

    expect(
      component
        .find(`#${selectAllCheckBoxAriaLabelledBy}`)
        .first()
        .getDOMNode()
        .hasAttribute('aria-describedby')
    ).toBe(false);

[msft-github-bot]

🎉office-ui-fabric-react@v6.84.1 has been released which incorporates this pull request.:tada:

Handy Links:

• Release Notes
• Official NPM Release
• Test the release with Developer Demo Site

[natalieethell]

Fixes #7 and #8 in #6646, too.