mirror of
https://github.com/barkeser2002/offline-db.git
synced 2026-09-25 02:19:59 +03:00
Barış Keserandgoogle-labs-jules[bot]
90a57ef76a
Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
13 lines
2.5 KiB
Markdown
13 lines
2.5 KiB
Markdown
## 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`.
|