Skip to content

Draft: Move focus on the original element on drawer close

What does this MR do and why?

Currently, when the drawer is closed, the focus is lost from the window. This results in confusion for a accessible user who is navigating using keyboard.

This MR moves focus to the source element when the drawer is closed. The impacted areas are:

  1. Issue list
  2. Work item list
  3. Boards
  4. Child items list on work item detail

References

Please include cross links to any resources that are relevant to this MR. This will give reviewers and future readers helpful context to give an efficient review of the changes introduced.

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Scenario Before After
Issue list

Screen Recording 2025-01-09 at 12.23.55 PM.mov

Screen Recording 2025-01-09 at 12.06.40 PM.mov

Work items list

Screen Recording 2025-01-09 at 12.24.38 PM.mov

Screen Recording 2025-01-09 at 11.59.47 AM.mov

Boards

Screen Recording 2025-01-09 at 12.19.54 PM.mov

Screen Recording 2025-01-09 at 12.07.30 PM.mov

Child items widget

Screen Recording 2025-01-09 at 12.15.01 PM.mov

Screen Recording 2025-01-09 at 12.10.05 PM.mov

How to set up and validate locally

Prerequisites:

  1. Enable FF issues_list_drawer
  2. Enable FF work_items_view_preference
  3. Enable FF epics_list_drawer

Steps to verify on the issue list:

  1. Login with any user
  2. Go to Project/Group > Issues or Group > Epics
  3. Open or create an Issue/Epic
  4. Navigate to the link of the item in the list using key board
  5. Press enter
  6. The focus will be on the first element of the drawer.
  7. Navigate to the close drawer button
  8. Press enter
  9. Verify the focus retains to the original link

Steps to verify on the boards:

  1. Login with any user
  2. Go to Project/Group > Issue boards or Group > Epics boards
  3. Navigate to any of the link of the item on the boards list using key board
  4. Press enter
  5. The focus will be on the first element of the drawer.
  6. Navigate to the close drawer button
  7. Press enter
  8. Verify the focus retains to the original link

Steps to verify on the child items widget:

  1. Login with any user
  2. Go to detail page of any Issue/Epic/Objective
  3. Navigate to any of the link of the item in the child item widget using key board
  4. Press enter
  5. The focus will be on the first element of the drawer.
  6. Navigate to the close drawer button
  7. Press enter
  8. Verify the focus retains to the original link

Related to #465853

Edited by Rajan Mistry

Merge request reports

Loading