Skip to content

fix: improve accessibility in DailyNoteWidget (#2560) - #3267

Open
aaniya22 wants to merge 2 commits into
Priyanshu-byte-coder:mainfrom
aaniya22:fix/2560-daily-note-widget-a11y
Open

fix: improve accessibility in DailyNoteWidget (#2560)#3267
aaniya22 wants to merge 2 commits into
Priyanshu-byte-coder:mainfrom
aaniya22:fix/2560-daily-note-widget-a11y

Conversation

@aaniya22

Copy link
Copy Markdown
Contributor

Summary

Replaced a clickable <p> tag with a proper <button> for the yesterday-note toggle in DailyNoteWidget, and added an aria-label to the note textarea for screen reader users.

Closes #2560


Type of Change

  • 🐛 Bug fix (non-breaking change that fixes an issue)

What Changed

  • Changed the "Yesterday you planned to:" toggle from a <p onClick> to a semantic <button type="button"> in src/components/DailyNoteWidget.tsx
  • Added aria-label="Today's coding plan" to the auto-save textarea
  • Reviewed the auto-save hook's dependency array — debounceFunction is already correctly memoized with useCallback([note]) and included in the effect's deps; no change needed there

How to Test

  1. Open the Daily Note widget on the dashboard
  2. Tab through the widget using only the keyboard
  3. Confirm the "Yesterday you planned to:" toggle can be focused and activated with Enter/Space, and that a screen reader announces the textarea's purpose

Expected result: Toggle is keyboard-focusable and operable as a button (not just clickable), and the textarea has an accessible name.


Screenshots / Recordings

N/A — visual appearance unchanged, only semantics/accessibility improved.


Checklist

  • Linked the related issue above
  • Self-reviewed my own diff
  • No unnecessary console.log, debug code, or commented-out blocks
  • npm run lint passes locally
  • No TypeScript errors (npm run type-check)
  • Added or updated tests where applicable
  • Updated documentation / comments if behavior changed

Accessibility (UI changes only)

  • Keyboard navigation works correctly
  • Color contrast meets WCAG AA standard
  • ARIA labels / roles added where needed
  • Tested on mobile / responsive layout

Additional Context

None.

)

Replaced clickable <p> tag with a <button> for the yesterday-note
toggle, and added an aria-label to the note textarea.

Signed-off-by: aaniya22 <aaniyaatomar@gmail.com>
@github-actions github-actions Bot added type:bug GSSoC type bonus: bug fix type:feature GSSoC type bonus: new feature type:design GSSoC type bonus: UI/design (+10 pts) type:performance GSSoC type bonus: performance (+15 pts) labels Jul 28, 2026
@github-actions github-actions Bot added gssoc26 GSSoC 2026 contribution type:accessibility GSSoC type bonus: accessibility (+15 pts) labels Jul 28, 2026
@github-actions

Copy link
Copy Markdown

GSSoC Label Checklist 🏷️

@Priyanshu-byte-coder — please apply the appropriate labels before merging:

Difficulty (pick one):

  • level:beginner — 20 pts
  • level:intermediate — 35 pts
  • level:advanced — 55 pts
  • level:critical — 80 pts

Quality (optional):

  • quality:clean — ×1.2 multiplier
  • quality:exceptional — ×1.5 multiplier

Validation (required to score):

  • gssoc:approved — counts for points
  • gssoc:invalid / gssoc:spam / gssoc:ai-slop — does not score

Type labels (type:*) are auto-detected from files and title. Review and adjust if needed.
Points formula: (difficulty × quality_multiplier) + type_bonus

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

gssoc26 GSSoC 2026 contribution type:accessibility GSSoC type bonus: accessibility (+15 pts) type:bug GSSoC type bonus: bug fix type:design GSSoC type bonus: UI/design (+10 pts) type:feature GSSoC type bonus: new feature type:performance GSSoC type bonus: performance (+15 pts)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Improve accessibility and hook dependencies in DailyNoteWidget

1 participant