Skip to content
This repository was archived by the owner on Oct 1, 2018. It is now read-only.

Conversation

@knitcodemonkey
Copy link
Contributor

@knitcodemonkey knitcodemonkey commented Oct 15, 2017

fix (Component): add accessibility features

Add accessibility features to the documentation for wider usability amongst the users.

  1. wrap the toolbar in a <header /> element to allow the proper classification of the toolbar
  2. wrap the element with a <main /> element instead of a <div /> element
  3. add a role="navigation" to the sidenav for screenreaders
  4. add an aria-label="menu" tag to the mat-icon-button because screen readers couldn't identify text to read inside the element
  5. bump up the font-weight on the .title element to fulfill color contrast requirements
    There is still a color contrast problem within the side menu. The current color is #e91e63, but it should be #E4165C to fulfill color contrast requirements. Additional work will also need to be done on the menu to add navigation via arrow keys.

This does not close any existing issues, and should not include any breaking changes.

1. Wrapped the toolbar in a <header /> element to allow the proper classification of the toolbar.
2. wrapped the <router-outlet /> element with a <main /> element instead of a <div /> element
3. Added a role="navigation" to the sidenav for screenreaders
4. Added an aria-label="menu" tag to the mat-icon-button because screen readers couldn't identify text to read inside the element.
5. Bumped up the font-weight on the .title element to fulfill color contrast requirements.

There is still a color contrast problem within the side menu. The current color is #e91e63, but it should be #E4165C to fulfill color contrast requirements.
@rxjs-bot
Copy link

Warnings
⚠️

commit message does not follows conventional change log (1)

(1) : RxJS uses conventional change log to generate changelog automatically. It seems some of commit messages are not following those, please check contributing guideline and update commit messages.

Generated by 🚫 dangerJS

@btroncone
Copy link
Collaborator

Awesome! 👍🏻

@knitcodemonkey knitcodemonkey changed the title Adding some accessibility features fix (Component): add accessibility features Oct 15, 2017
@ladyleet ladyleet merged commit 6e83bb6 into ReactiveX:master Oct 16, 2017
@ladyleet
Copy link
Member

merged thanksssss! :) this was amaze

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants