Skip to content

Fix: System focus isn't updated upon clicking a job card when new context is provided #129

@thienautran

Description

@thienautran

Description of the issue

When clicking on a job preview card, users using screenreading software are not notified of any context changes, and thus may not be aware that an additional context information panel has opened on the right side.

Users should be made aware that there is:

  1. Additional areas of context on the screen such as job description
  2. A way to navigate to the additional context via keyboard
  3. A way to navigate back to the previous contextual element

Current behaviour

Clicking a job card opens a side panel without alerting or providing a method for users to move to the side panel outside of exploration.

Proposed behaviour

Below are some suggestions on how this could be approached, however please note WCAG 3.2.1
Moving focus may not be the best option here, as users may not be able to navigate back to previous list context. One or more of these might be needed

User is alerted that there is a contextual change to the UI:

  • Shift user focus to the top of the new job listing that was selected. Can be done with ref.current.focus()
  • Aria announcement to tell the user that there has been an update. Something like "Company x has more info". We can use aria-live-regions for this or alerts
  • Aria label on each card title noting that there is more info when clicked
  • Seporate the UI into two key regions, a job list region, and a job details region when job details are presented. This enables users to navigate by region / landmark navigation see Aria egion roles for more info

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions