The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Angular Material: Theming and ARIA

Angular Material: Theming and ARIA

3:33
Themes convey meaning through color, tones, and contrasts. And the theme color palettes, alphas, and shadows deliver a consistent tone to your application and a unified feel for all Angular Material UI components. Theming allows developers to change the intention and meaning of the application by changing the colors and shadows. Accessibility is a huge - often overlooked - feature in modern web applications. Angular Material components all implement ARIA features whenever possible. And for usage scenarios where the ARIA attributes are not explicitly provided and cannot be inferred, then Angular Material will provide details console warnings alerting the developer. Let’s use the Angular Material Theming service to change the background, primary, accent, and warning colors used within the entire application. These will be configured at startup using the $mdThemeProvider. Let’s also resolve the two ARIA warnings shown in console. These originate from icon buttons where the ARIA label cannot be inferred. So let’s add a static aria-label and a dynamic, interpolated aria-label to those buttons. > This course presented by Thomas Burleson and Aaron Frost
Watch this lesson now
Avatar
egghead.io

Themes convey meaning through color, tones, and contrasts. And the theme color palettes, alphas, and shadows deliver a consistent tone to your application and a unified feel for all Angular Material UI components. Theming allows developers to change the intention and meaning of the application by changing the colors and shadows.

Accessibility is a huge - often overlooked - feature in modern web applications. Angular Material components all implement ARIA features whenever possible. And for usage scenarios where the ARIA attributes are not explicitly provided and cannot be inferred, then Angular Material will provide details console warnings alerting the developer.

Let’s use the Angular Material Theming service to change the background, primary, accent, and warning colors used within the entire application. These will be configured at startup using the $mdThemeProvider.

Let’s also resolve the two ARIA warnings shown in console. These originate from icon buttons where the ARIA label cannot be inferred. So let’s add a static aria-label and a dynamic, interpolated aria-label to those buttons.

This course presented by Thomas Burleson and Aaron Frost

Avatar
Nina

Could you please upload the code to github.

In reply to egghead.io
Avatar
Paul

Thx for a great course. Really good.

Interestingly, if you use <md-icon md-font-set="material-icons"> with <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> the aria-labels are added automatically.

In reply to egghead.io
Avatar
Ian Poston

Nice angular-material lesson Thomas and Aaron. There were times when a different user gets selected in sidenav and the share details with the previous user would stay open in the bottom sheet so I added this line $mdBottomSheet.hide(self.selected); when function selectUser(user) is called in the UserController. Also the sidenav was overlapping the bottom sheet on small screen so I added this line $mdBottomSheet.hide($event); when function toggleUserList ($event) is called. Notice I am passing in $event to trigger the the hide functionality. I think this looks more complete. Thank you!

In reply to egghead.io
Avatar
Dane

Someone posted earlier that the github they are referencing is https://github.com/angular/material-start/tree/es5-tutorial/app

In reply to Nina
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?