Angular Material: Theming and ARIA

[00:00] To finish our Angular Material starter app, we're going to do two more things. First, change the theme of our app. Second, we're going to fix the remaining ngAria warnings that we have. For that first step, we're going to change the theme to be a different darker color. Angular Material makes theming almost too easy.

[00:20] If you head over to the documentation on their site, they have this great introduction that gets you up to speed on the different terms and the different concepts you're going to need to know to get dived in and understand theming with Angular Material specifically. One of those concepts is the idea of color intentions.

[00:41] We have a primary palette and an accent palette. Whatever you define for those palettes, the primary palette changes and affects the layout, the look of our primary elements. The accent palette affects our secondary interface elements. We're going to go ahead and set those, the primary to be brown and the accent to be red, in our app. Let's head over to the code.

[01:04] We'll come down to our config block and we'll inject the mdThemingProvider. We'll go ahead and say mdThemingProvider.theme. We're going to use the default theme. We're going to set that primary palette to brown, like we've said. We're going to set the accent palette to be red. When we save this, it refreshes. You can see it's there.

[01:40] I'm using these palettes that come default. We can set this to lime and this to orange. It's that easy. We're going to go ahead and set those back to brown and red. That's how you get into theming with Angular Material. Let's go ahead and do our second step, and fix these labels, these warnings we have for ngAria.

[02:03] What this is telling us here is that it can't tell what the aria-label should be for a specific button in our app. The button that it's referencing is the menu button. If we shrink our app down here, the menu button will reappear. It doesn't know what screen reader text to put on this because it doesn't have any text inside that button. Let's go add it up. We'll give it one.

[02:26] On that menu button, we'll say aria-label="Show User List." Now, the experience for a screen reader is much, much better and our aria is gone. Let's fix this button as well to be even a better experience for any of our users. Let's change this to "Share with." We'll use interpolation. From Angular, we'll say ul.selected.name.

[02:56] Now, when you look at the aria-label for that share button, it is "Share with Lia Lugo," so again another great experience for any of our users showing up with a screen reader. That's it. Our starter app is all the way done.

[03:12] To build it, we used some sophisticated components. We used Angular Material's great adaptive layout API and their theming API. We used some custom logic and custom CSS. Imagine doing all of this without a solid component and layout library like Angular Material.