Skip to content

fix(alert): use aria-labelledby and aria-describedby instead of aria-label#25805

Merged
averyjohnston merged 6 commits intomainfrom
FW-2000-b
Aug 23, 2022
Merged

fix(alert): use aria-labelledby and aria-describedby instead of aria-label#25805
averyjohnston merged 6 commits intomainfrom
FW-2000-b

Conversation

@averyjohnston
Copy link
Contributor

@averyjohnston averyjohnston commented Aug 23, 2022

Pull request checklist

Please check if your PR fulfills the following requirements:

  • Tests for the changes have been added (for bug fixes / features)
  • Docs have been reviewed and added / updated if needed (for bug fixes / features)
    • Some docs updates need to be made in the ionic-docs repo, in a separate PR. See the contributing guide for details.
  • Build (npm run build) was run locally and any changes were pushed
  • Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

  • Bugfix
  • Feature
  • Code style update (formatting, renaming)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • Documentation content changes
  • Other (please describe): Accessibility fixes

What is the current behavior?

In #25800, we added a default aria-label to ion-alert in order to resolve an Axe violation. However, there are two problems with this resolution:

  1. The default aria-label of 'Alert' isn't any better than having no label at all, as it doesn't give any useful information. If anything, it can lead developers into a false sense of security due to the lack of Axe errors.
  2. The ARIA spec mentions that the alertdialog role must also have an aria-describedby attribute.

Issue URL: N/A

What is the new behavior?

  • aria-label replaced with aria-labelledby and aria-describedby. The former points to the header (or the subHeader if no header is defined), and the latter points to the message.
  • If the required properties aren't set for either attribute (for example, no message), the attribute is left unset.

Does this introduce a breaking change?

  • Yes
  • No

Other information

A separate PR will be put up to document this change and show best practices with accessibility.

@github-actions github-actions bot added the package: core @ionic/core package label Aug 23, 2022
@averyjohnston averyjohnston marked this pull request as ready for review August 23, 2022 16:17
@averyjohnston averyjohnston requested a review from a team August 23, 2022 16:17
averyjohnston and others added 2 commits August 23, 2022 11:23
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: core @ionic/core package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants