Google Summer of Code: High Contrast Themes
I helped develop better support for Windows High Contrast mode in Wagtail. Let me walk you through how I updated different components of the Wagtail admin to provide better high contrast support for Windows users.
Hello everyone! I'm Anuja Raj Verma, and I was selected by the Wagtail community and Google to participate in Google Summer of Code (GSoC) 2022. My project was "High Contrast Themes". GSoC is a whole collection of learning experiences, including learning about open source and developing skills to improve communication. Let's walk through the GSoC journey from my perspective.
About Me
I'm a final year undergraduate student at IIT Kharagpur.
I have worked as a full stack developer in my prior internships.
About the team
I have had the most wonderful experience working with the Wagtail community. My mentors – Jane Hughes, Thibaud Colas, and Scott Cranfill – have taught me many things.
About the project: High Contrast Themes
My project was to work extensively on the Windows High Contrast Mode (WHCM) support for the Wagtail admin and incorporate accessibility tools for testing any UI changes that are made in the future. The primary aim was to ensure the Wagtail administration interface is legible in WHCM.
What is Windows High Contrast Mode and why is it needed?
Accessibility features of a website have turned out to be essential requirements over the years. WHCM ensures that a customized user interface's elements will have high enough contrast for the requirements of users with low vision. Though working without WHCM is a better option for some users, many have visual disabilities and find the UI difficult to navigate as a result. Therefore, to give all users a satisfactory admin interface, we had to ensure WHCM would be supported.
How did I start?
The biggest dilemma was figuring out where to begin when it comes to contributing or understanding the Wagtail codebase. There was no better answer than "Start Communicating". GSoC offers such a huge open source community where we can discuss ideas (even the most basic ones) and keep learning every day. So, trying to learn slowly and consistently every day as well as keeping a steady pace definitely helped me in the long run.
Apart from communication and contribution, the proposal in itself was an important start. I tried to finish my proposal well before the deadline so I could get many suggestions on how I can improve it through the Wagtail community
Overall, the 3 Cs were important for me – communication, contribution, and commitment.
The community bonding period
This period was one of the best times because I got a chance to become more familiar with the codebase and other details about the project. During this time, I discussed various timelines and sub-divisions of the original project with my mentors. My mentors were always there to help the seeds of my ideas blossom and I found it was very important to discuss the ideas with them. I made sure to raise my doubts regarding any existing code that was related to my project or in general related to the existing codebase.
The coding period
Most of of my work could be mainly divided into two categories:
- Fixing the detected or already existing accessibility issues (mostly contrast issues).
- Conducting accessibility tests to ensure the changes I made are applicable on all themes of the contrast mode.
Before midterm evaluation
My work before the midterm included improving the contrast ratios and component definition of the admin in WHCM. I used Windows 11 Contrast Themes and Chrome Dev Tools for manual accessibility tests as I made the changes.
Initially, I tried to fix the already existing issues that were mentioned in an audit performed by Kyle Bayliss. The changes I made were mainly focused on improving the visual contrast to allow components to be visible in contrast modes.
Later, along with my mentors, I focused mainly on the style guide components inside the admin. Most of the UI components needed a media query definition to allow the CSS to work specifically for the contrast themes. My main tools included forced-colors media queries and the system colors. An example code snippet is as follows:
// Media for Windows High Contrast Mode @media (forced-colors: active) { .help-block { border: 3px solid currentColor; // ensure visible separation in WHCM } .help-warning { border-style: dotted; } .help-critical { border-style: dashed; } }
I made 9 pull requests focused just on the contrast themes, as well as reported a few contrast and accessibility issues.
This is what the Wagtail page editor now looks like in Wagtail 4, which was released at the end of August, using high contrast mode:
After midterm evaluation
My work after the midterm period was focused mainly on conducting automated tests. This was a little tricky because I had to do a lot of research about all the the automated testing tools and had to pick one according to the needs of the project. I discussed options with my mentors and decided to go with Pa11y. I tested the Wagtail Bakery demo site with code written in JavaScript to test its navigation pages.
I also worked with pa11y-ci, which is very similar to Pa11y. The only difference was that pa11y-ci offers its own file extension and so JavaScript code would not be needed. I reviewed the pa11y testing for the Wagtail admin created by my mentor Thibaud to get a better understanding better of session implementation in automated testing to test URLs that are protected by user credentials.
Since Thibaud already used Pa11y to test Wagtail, I used a similar approach with the Wagtail Bakery demo site.
Future aspects
I intend to improve this project. Also, it can act as the starting point for anyone who would be interested in contributing to the project further. A few of the improvements and new features could be:
- Performing automated Pa11y testing with the Wagtail Bakery demo admin interface.
- Extending the contrast improvements to the Wagtail Bakery demo site.
Key learnings
The 3–4 months of this journey have been quite thrilling and fruitful in terms of all the things I learned. But if I could sum up the key learnings, they would be:
- Open source is a very structured way of mutual learning. I have gained so much knowledge about the culture of open source that will keep me motivated to contribute further.
- Polish your old skills and incorporate new skills. My mentors and the whole Wagtail community have helped my skills blossom and taught me optimisation.
- Build confidence to present your ideas. Ideas may or may not always work but the urge to constantly think beyond a basic solution leads to better creativity.
- Sense of belonging. With so many people from all across the world, GSoC gives you the opportunity to interact with so many creative minds in the form of your co-participants, mentors, and the whole community. I feel like we must celebrate the truest essence of that bonding.
Conclusion
I had a fun learning experience while working with Wagtail. I was afraid of asking questions initially but I overcame that to some extent throughout my journey. I loved the Wagtail community and I got guidance and help whenever I got stuck. I would like to thank my mentors Jane Hughes, Thibaud Colas, and Scott Cranfill for helping and guiding me throughout the process. I also would like to thank LB for helping me get comfortable with the Wagtail open source community during the application period.