Thank you for sharing this article and your analysis of reproducing the Angular Material theme picker. I did a good deal of work last year to make it more accessible for screen reader and keyboard users.
However I am a little worried that your final solution may be less accessible (I haven't had time to try it in a screen reader or keyboard yet as I am on my phone).
I would suggest that the menu trigger be a button with the mat-icon-button attribute rather than just a bare mat-icon.
I can understand not replicating our approach for indicating the selected theme menu item, but it would be helpful to somehow indicate which theme is active in your implementation.
FullStack JavaScript Developer
Google Dev Expert for Angular - https://bit.ly/SiddAjmeraGDE
Angular Instructor on Udemy - https://www.udemy.com/course/angular-all-you-need-to-know/
Thank you for sharing this article and your analysis of reproducing the Angular Material theme picker. I did a good deal of work last year to make it more accessible for screen reader and keyboard users.
However I am a little worried that your final solution may be less accessible (I haven't had time to try it in a screen reader or keyboard yet as I am on my phone).
I would suggest that the menu trigger be a button with the mat-icon-button attribute rather than just a bare mat-icon.
I can understand not replicating our approach for indicating the selected theme menu item, but it would be helpful to somehow indicate which theme is active in your implementation.
Thanks again!
Ahhh! Great feedback. 😍 I'll update the article accordingly. 🙂
Thank you soo much for sharing this and helping me improve the article 🙌🏻