Skip to content

Fix VoiceOver for labels in the Delete modal

Paulina Sedlak-Jakubowska requested to merge 420729-fix-voiceover-for-labels-in-the-delete-modal-when-deleting-a-file into master

What does this MR do and why?

Adding ids to form inputs, so that the label can be associated with them. This fixes how the screen reader announces the fields. Labels where already present on the form group element, just the ids were missing.

Note: Originally the issue stated to fix the focus within the modal, so it won't move directly to Delete button after moving to the second step. This was actually fixed in the original issue, so I've only tackled the field labels.

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Before After
Screen recording of delete modal for LFS file with fields missing labels Screen recording of delete modal for LFS file with fields with labels

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

  1. Install LFS: git lfs install
  2. Enable LFS tracking git lfs track "*.md"
  3. Add a file with a type that is being tracked by git LFS (e.g. my_file.md)
  4. Open the file
  5. Turn on the screen reader: on McOS go to Settings, than Accessibility, then VoiceOver. After that, return to the browser. Alternatively, you can use AssistiveLabs (credentials in Password1) with the option for connecting the local environment.
  6. Click Delete button and move to the second step in the modal.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #420729 (closed)

Edited by Paulina Sedlak-Jakubowska

Merge request reports