The GSoC Summary : On Zendalona, Trudesk and Accessibility
The Project: Trudesk Customization for Zendalona
The project I worked on as part of Google Summer of Code 2024(GSoC 2024) involved customizing Trudesk to meet the specific needs of Zendalona, with a strong focus on enhancing accessibility for users relying on screen readers and keyboard navigation. Trudesk, being a Single Page Application (SPA), posed unique challenges in terms of dynamic content updates, keyboard accessibility, and screen reader compatibility.
The Grand Plan
The plan, at the outset, seemed straightforward enough: make the project more screen reader-friendly during the first month and then dive into implementing some custom features. Simple, right? Well, as it turns out, that initial scope was significantly optimistic. The goal of making the project truly accessible to screen readers quickly revealed itself to be a monumental task, far more complex than I had anticipated.
As I started navigating through the codebase, I realized that the issues weren’t just surface-level tweaks—they were deeply embedded in the structure of the application. The project was heavily reliant on custom components, which meant that many accessibility issues couldn’t be resolved with a quick fix. Each custom component had its own quirks, and figuring out where the problems lay often felt like trying to find a needle in a haystack. A task that seemed simple on the surface, like making a button accessible or ensuring a popup was announced, often took hours or even days of trial and error.
On top of that, the project setup itself was not the most cooperative. Every time I thought I was making progress, I’d hit a roadblock when trying to build the project on a different machine. The setup would break, and I’d find myself back at square one, trying to troubleshoot issues that seemed to crop up out of nowhere. It was frustrating, to say the least. But thanks to my mentor, @Akshay, these challenges became bearable. There were moments when I’d spend hours wrestling with a problem, only for him to step in and solve it in a matter of seconds. His guidance was invaluable, and I can’t overstate how much his support meant during those tough times.
Despite these challenges, by the end of the GSoC coding period on August 19th, the project had come a long way. The entire application can now be navigated using just the keyboard, with screen reader announcements guiding the way. It’s a far cry from where we started, but it’s not perfect yet. There are still some issues that need to be addressed, as noted in the TODO list, but the progress made so far is something I’m proud of. The journey has been intense, filled with unexpected hurdles, but seeing the project become more inclusive and accessible has made it all worth it.
The work isn’t done, but this phase of the project has laid a solid foundation for the improvements yet to come.
Key Changes and Contributions
Aria Live Regions for Dynamic Content:
Since Trudesk dynamically renders content, it was crucial to implement aria-live regions to ensure screen readers announce changes appropriately. This enhancement made the application more accessible for users who rely on assistive technologies.
Improved Keyboard Navigation and Focus Management:
I made sure that all links, buttons, and custom components like accordions were fully navigable using the keyboard. Proper focus management was implemented, ensuring a seamless navigation experience.
Shadow Components for Announcements:
One of the innovative solutions involved creating shadow components with low z-index and aria-live attributes. These components track UI changes through JavaScript and ensure that necessary updates are properly announced by screen readers.
General Enhancements:
In addition to accessibility improvements, I also made general enhancements such as fixing faulty installations and implementing authentication-based restrictions on various endpoints.
You can read more about the project at ZenDesk post
You can explore the codebase for these enhancements on my custom Trudesk repository. The project is currently hosted and live at zendesk.animaregem.me.
Merged Pull Requests
Throughout the project, I submitted several pull requests (PRs) to the original Trudesk repository, which were subsequently merged. Here are the key PRs that were integrated:
Branches in the Custom Trudesk Repository
The custom Trudesk repository contains several branches that represent different stages and features of the project:
- Master Branch: The stable version with all basic setup and initial enhancements.
- Zendesk Branch: Contains specific customizations for Zendalona, focusing heavily on accessibility improvements.
The TODO List: What’s Next?
Even after the GSoC period, there are still some pending tasks to further refine and enhance the project:
- Fixing the SingleSelect Component: The SingleSelect component still requires some adjustments for better accessibility.
- Creating a SignUp Page: A SignUp page needs to be implemented or integrated from the upstream
nextbranch. - Announcing Popups: Ensuring that all popups are properly announced when they appear.
- Fixing the Textarea Component: The textarea component needs improvements to enhance its accessibility.
- Guidance for Text Entries: Implementing prompts for users to “type your message” in relevant text entry fields.
The Verdict
My GSoC journey with Zendalona, Trudesk, and accessibility has been an enriching experience. It was more than just coding; it was about understanding the importance of inclusivity in technology. By enhancing Trudesk’s accessibility, we’ve taken a step towards ensuring that the web is usable by everyone, regardless of their abilities.
If you’re interested in the project or want to contribute, feel free to check out the custom Trudesk repository and the hosted version at https://zendesk.animaregem.me. Let’s keep pushing for a more accessible web!
References
ARIA and Keyboard Shortcuts:
Combobox and Accordion Patterns:
General Accessibility Guidelines:
Focus Management and UI Considerations:
Project-Specific Resources:
React and SPA Accessibility:
Other Useful Discussions and Solutions:
Video References:
These references were instrumental in guiding the development process and ensuring that the final product met the necessary accessibility standards.