Modifying Expectations🌐

I was really excited to start working with Ushahidi! 😊 The timeline I had looked sort of achievable, and that was the thrilling part about starting this journey. My initial goals for this internship were very very okay for me. I wanted to understand the organization's existing accessibility standards, evaluate the current state of their web application, and chart a path forward to enhance its inclusivity💪.

When I started the internship, the timeline for week one included things like exploring the Ushahidi Platform Client's user interface and functionality, and setting up the necessary tools and environments for the accessibility review. I was actually ahead of schedule on these tasks, which meant I had more time to tackle the week two goals. 🕰️

However, as time went on, I realized that things became more in-depth and interesting. 🤔 I had to learn certain concepts before I could tackle the project tasks. As I progressed through the first three weeks, my goals remained embracing, but on week four, I made peace with the wise words of John Wooden: "Flexibility is the key to stability." 💫

My mentor, Mary, and I had to modify the timeline on week four. Initially, the plan was to have the accessibility review finalized and the documentation of findings completed. But we realized that this would not work, as there were other things I needed to work on in between. 🤝 So, we decided to make the accessibility review a weekly task, allowing me to work on it consistently and incorporate the learnings along the way.

Even now, when I look back at the timeline, there are some goals that make me smile with satisfaction. 😊 I'm so happy that I was able to achieve them, like:

1. Create a structured plan to test the application, document the findings, and outline the steps required to remediate or solve (for a better word) the identified issues.

2. 📝 Understand Ushahidi's existing web accessibility standards and best practices.

3. 🔍 Use this internship to deepen my understanding of web accessibility principles, standards, and best practices.

4. 📚 Explore opportunities for accessibility advocacy within the broader web accessibility community. 🗣️ This last one was particularly exciting, as I had the opportunity to be a panelist at an event hosted by Ushahidi, where we discussed accessibility and its future. 🎤 This experience allowed me to see my project from a different perspective (lens) and further solidify my commitment to accessibility.

I know you are asking yourself "what are these things you claim you had to learn before the implementation?" Well here they are;

1. Tab Order and Focus Management : One of the initial challenges I faced was with the company info section, which had a dropdown (with content) inside. At first, I thought the solution was to simply add tabindex="0" everywhere 😅 Mary can testify this . However, after carefully investigating the classes applied to the elements, I realized that the focus was actually being hidden. The key was to properly manage the tab order and ensure smooth focus transitions. You can view the pull request here to see how we tackled this issue.

2. Understanding the Code Structure: Another learning moment came when working with the list-item cards in the "Settings > Survey > Add Survey > Add Field" feature. Mary and I decided to change the cards from using standard <div> elements to the <mzima-client-button> component. During this process, I noticed a few things about the button's default styling:

   • The text inside the button was centered.

   • The button had a yellow background color, but I wanted the button to be transparent or have no color.

   • I did not need the default padding around the button in this particular instance.

To address these concerns, I had to carefully analyze the classes attached to the button for styling and determine the underlying size and expand properties. You can see the changes I made here.

3. Radio buttons Focusability using the Keyboard only: This is my current struggle, an issue related to the focusability and operability of radio buttons, particularly within the "Saved Filter" feature of our Ushahidi Platform.While I'm pleased with the progress I've made so far, I'm eager to investigate and find a solution to this problem.

   The main challenge I'm facing is ensuring the radio buttons in the filter are properly focusable and operable for users. This has led me to explore various Angular directives and components, including app-filter-control, mat-radio-button, mat-select, ng-container, and ng-template. With the help of my mentor Mary, I was able to identify app-filter-control as the component directly related to the filter functionality. I am sure that with this, I will be able to come up with something.

Woohoo! 🎉 Another thing I'm so proud of myself is taking on the challenge of integrating pa11y into our platform. This is going to be a game-changer for helping us identify and address accessibility issues in a much more automated and efficient way, especially for our awesome contributors! 💪

I recently had a super engaging chat with Mary about this, and she had some fantastic suggestions based on her previous conversation with Anna. The plan is to make this a delightful user experience, kind of like how you launch a React app and it asks you questions right there in the terminal. 💻 Mary even shared an example of what she worked on, and walking through it with her was incredibly motivating. I can't wait to dive in and create my own version of this accessibility!

Throughout this journey, I've learned the importance of flexibility and adaptability. 🌪️ The path may not always be linear, but with determination and a willingness to embrace the unexpected, great things can be achieved.

Read my Other Blogs here:
Know About Rose
Everyone Struggles
Know your Audience