Skip to content

[Spike] Improve Work Items page accessibility

Natalia Tepluhina requested to merge ntepluhina-work-item-a11y-spike into master

What does this MR do and why?

This MR aims to implement a few accessibility fixes mentioned in

  • Focus seems to move to outer document on selection of "Status" or "Progress", maybe this is a form update/submission behaviour, adds effort to navigating back to field being edited

    Fixed for progress widget, status widget is passing the focus to the outer document because it's a last element of the page

  • Assignees "Assign myself" button displays on mouse :hover and is not keyboard focusable or exposed to screen readers

    This would require UX input - maybe we can show the button without hover for all cases?

  • No <h1> on the page, makes it easier for JAWS/NVDA to bypass template content

  • Editable <h2> title has aria-label="title" which overtakes the actual content so it's not read in VoiceOver (JAWS/NVDA read title contents after reading "Title") suggestion: remove aria-label from <h2>

  • Breadcrumbs navigation e.g. "Objective # 1 > Objective # 2" could use <nav> element with accessible label to provide a landmark context

Screenshots or screen recordings

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

Before After

How to set up and validate locally

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

MR acceptance checklist

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

Edited by Natalia Tepluhina

Merge request reports