Goal of this workshop

The goal of this workshop is to learn how to style some MUI components using the McMaster Digital Branding Guidelines. You will not be an expert on MUI by the end of the class and this is okay. We want to cover the basics of MUI styling, but as with any skill, mastering it takes practice. You will also learn the basics of mobile user interface design as well as how to use the WAVE tool to evaluate your website for AODA compliance.

Learning Objectives

At the end of this workshop, attendees will be able to:

• Style a Next.js application with MUI components
• Use custom typography fonts and styles
• Style common interactive UI elements like buttons, speed dials and file input widgets
• Modify web application components to scale properly on small screen devices
• Evaluate your website for AODA compliance using the WAVE tool and fix common accessibility errors
• Design and implement accessible focus indicators for common MUI components

Table of Content

1. Styling Modern Web Apps
   1. Favicon
   2. Typography
   3. Navigation Bar
   4. Dark and Light Mode
   5. Interactive UI Elements
      1. Buttons
      2. Buttons With a Dropdown Menu
      3. File Input Widget
      4. Speed Dials
      5. Dropdown Menu
   6. Summary
2. Mobile UI
   1. Footer
   2. Navigation Bar
   3. Buttons
   4. Vertical Tabs
   5. Summary
3. AODA Compliance
   1. WAVE Tool
   2. Contrast Error
   3. Empty Button Error
   4. Missing Form Label
   5. Focus Indicators
   6. Summary
4. Conclusion

---