Barış Keserandgoogle-labs-jules[bot]
90a57ef76a
Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
2.5 KiB
2024-03-05 - Add aria-labels to NextUI Switch components
Learning: In the frontend Next.js application, NextUI <Switch> components do not inherently expose accessible names to screen readers when they lack an explicit <label> element wrapping them. This can cause screen readers to simply announce "switch" without providing context on what the switch actually toggles, leading to a poor accessibility experience.
Action: When using NextUI <Switch> components that act as standalone toggles or don't have a dedicated, associated <label> element, always include an explicit aria-label attribute (e.g., aria-label="Toggle Maintenance Mode") to ensure the control's purpose is accurately communicated to assistive technologies.
2025-03-06 - Always Provide Meaningful alt Text to Custom Image/Avatar Components
Learning: In React UI components that wrap <img> tags (e.g., custom Avatar components), it's a common oversight to hardcode the alt attribute or leave it out entirely, making dynamic images inaccessible to screen readers. For example, rendering character avatars with alt="Avatar" fails to identify who the avatar represents.
Action: When creating or modifying custom React image components (like Avatar), ensure the component signature accepts an alt prop and passes it down to the underlying <img> tag. At the call site, always provide descriptive alt text (e.g., alt={char.character.name}) rather than relying on generic fallbacks.
2024-03-08 - Empty State Filtering Logic
Learning: When implementing frontend filtering logic for search or list states, returning an empty array [] when the search query is empty can inadvertently trigger "No Results" empty states when the user clears their search query.
Action: Always return the original, unfiltered dataset (or intentionally render a default placeholder state) when the search query is empty rather than an empty array to prevent unexpectedly blanking out the UI when the query is cleared.
2025-03-09 - Accessible Tooltips for Icon-Only Buttons
Learning: While relying on aria-label for isIconOnly buttons is sufficient for screen readers, it leaves sighted users (especially those on desktop using a mouse) guessing the function of ambiguous icons.
Action: When using ambiguous icon-only buttons (like Grid/List views, or Action toggles), always wrap the button in a NextUI <Tooltip> component to provide an immediate, accessible textual description for sighted users on hover or focus, complementing the existing aria-label.