WelcomeMessage header text marked as heading

[piwysocki]

Changes

role="heading" attribute and aria-level="1" attribute added to WelcomeMessage heading.

It adds heading semantics to markup without the risk of breaking any styles.

References

This change resolves an issue in accessibility.
Header name and title appears to be heading for section of content, but is not marked as heading for screen reader users.

Testing

• This change adds unit test coverage
• This change adds integration test coverage
• This change has been tested on the latest version of the platform/language

Checklist

• I have read the Auth0 general contribution guidelines
• I have read the Auth0 Code of Conduct
• All code quality tools/guidelines have been run/followed
• All relevant assets have been compiled

[frederikprijck]

Thanks for the PR, can you elaborate which tool showed this as an a11y issue to try and understand what's happening and how a welcome message is treated as a heading?

Thanks

[pbuckleyfen]

Hey, as outlined in rule 1.3.1.e Headings - Text that acts as a heading visually or structurally MUST be designated as a true heading in the markup.

The Welcome message visually acts as the main element heading on the login screen.

Providing a heading element will aid screen reader users to understand the structure of the content

[piwysocki]

More info provided above

[frederikprijck]

Thanks for this change, looks legit and definetly want to look into adding this.

Has this been tester with a certain screenreader?

[piwysocki]

Yes, tested with NVDA.

Before and after:

[stevehobbsdev]

Thanks for your contribution here @piwysocki ! 🎉