Skip to content

Comments

fix: add aria-label to custom variable inputs for screen reader acces…#129

Open
sh1vam31 wants to merge 1 commit intojoplin:masterfrom
sh1vam31:fix/accessibility-aria-labels-custom-variables_#121
Open

fix: add aria-label to custom variable inputs for screen reader acces…#129
sh1vam31 wants to merge 1 commit intojoplin:masterfrom
sh1vam31:fix/accessibility-aria-labels-custom-variables_#121

Conversation

@sh1vam31
Copy link

Fixes #121

When a template with custom variables was used, the input fields in the
popup dialog had no aria-label attributes. This caused screen readers
like NVDA and VoiceOver to announce fields without names, e.g.:

  • "edit text" (instead of "name, edit text")
  • "stepper" (instead of "age, stepper")
  • "pop up button" (instead of "color, pop up button")

Fix

Added aria-label attribute to all 6 custom variable input types:

  • text.ts → <input type="text">
  • number.ts → <input type="number">
  • date.ts → <input type="date">
  • time.ts → <input type="time">
  • boolean.ts → <select>
  • enum.ts → <select> (dropdown)

Testing

Tested manually using macOS VoiceOver (⌘ + F5):

Before fix: VoiceOver said "stepper", "pop up button" with no field names.

After fix: VoiceOver correctly announces field names:

  • "name, edit text"
  • "age, stepper"
  • "color, Red, pop up button"
  • "meeting_date, date picker"
  • "has_vip, Yes, pop up button"

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Accessibility, elements for customising custom variables when creating template are unlabeled for screenreader

1 participant