Second week participating in The Collab Lab.
We are building a smart shopping list application using React and Firebase. This week, I paired with another team member to add a new feature to allow users to submit a list name and create a new shopping list.
Wrapped up the assigned issue for the week and spent time on the week's learning module about accessibility.
Here are some essential a11y reminders:
✅ Always use valid semantic HTML and include ARIA roles only when they are needed and HTML tags can't be used.
🖼️ Always include alt attribute in images (though there are cases when it should be left blank).
🎹 Ensure that all content is reachable via keyboard, and that both content and tab ordering make sense
👇🏽 Be aware of the target size of the elements in your app; you can refer to this Accessible Target Sizes Cheatsheet for practical guidelines.
🎨 Make sure content and background color have sufficient contrast ratios and that state is not expressed to users using only color.
Also, have been reading to refresh some concepts and learn more about React patterns.
Learning highlights of my week
Used Accessibility Insights Chrome extension to find accessibility issues on our app.
I initiated a review of the main React hooks, starting with
useEffectand how it works. I understood the functionality and also learned about scenarios where you might not need it because there might be more efficient ways to achieve re-renders in React applications.
On Sunday, we will have the weekly sync with the entire team, where we will present our feature and be introduced to new issues for the upcoming week.
Here is the recording of our previous session:
See you next week! Thanks for reading :)
Top comments (0)