Skip to content

Toast accessibility #300

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 5 commits into from
Nov 3, 2022
Merged

Toast accessibility #300

merged 5 commits into from
Nov 3, 2022

Conversation

mauromascarenhas
Copy link

Proposed changes

Add "ARIA" attributes to Toast instances so as to enhance performance of assistive technologies (e.g.: screen readers).

In spite of not affecting existing projects, this commit must improve the component's overall accessibility concerns, since it gives toast elements "alert" attributes in addition to better semantics in code samples available in the docs.

Screenshots (if appropriate) or codepen:

Firefox development tools displaying accessibility properties.

Types of changes

  • Bug fix (non-breaking change which fixes an issue).
  • New feature (non-breaking change which adds functionality).
  • Breaking change (fix or feature that would cause existing functionality to change).

Checklist:

  • I have read the CONTRIBUTING document.
  • My commit messages follows the conventional commit format
  • My change requires a change to the documentation, and updated it accordingly.
  • I have added tests to cover my changes.
  • All new and existing tests passed.

@mauromascarenhas
fix(toast): toast accessibility
9dc2e27 
Improve toast support to assistive technologies (e.g.: screen readers):

- Add missing "aria" attributes to toast instances.
@mauromascarenhas
docs(toast): toast accessibility
dcc65cf 
Improve toast support to assistive technologies (e.g.: screen readers):

- Update tests in order to check for "aria" attributes;
- Add "type" attribute to buttons used in HTML tests.
@mauromascarenhas
docs(toast): accessibility
59fe255 
Update toast docs so as to give code samples:

- Replaced "a" elements by "button" (semantically correct);
@mauromascarenhas
test(toast): toast accessibility (adjusts)
e7493d3 
- Fix semantic elements in HTML test file;
- Add "type" attribute to buttons used in HTML tests.
wuda-io
wuda-io previously approved these changes Nov 2, 2022
View reviewed changes
Copy link
Member

@wuda-io wuda-io left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@mauromascarenhas
fix(test): toast test
17faa57 
Fix missing tag in "toast3" HTML test.
@mauromascarenhas
Copy link
Author

mauromascarenhas commented Nov 3, 2022 •
edited
Loading

Just had to fix an issue where the "button" tag had been removed after the addition of "type" attribute in HTML test file.

@wuda-io wuda-io merged commit 2f6a0b0 into materializecss:main Nov 3, 2022
@Smankusors Smankusors added enhancement New feature or request component: toast labels Nov 3, 2022
@mauromascarenhas mauromascarenhas deleted the toast-accessibility branch November 29, 2022 22:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@wuda-io wuda-io wuda-io approved these changes

Assignees

No one assigned

Labels

component: toast enhancement New feature or request

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@mauromascarenhas @wuda-io @Smankusors