[Accessibility] In media viewer, make caption controls accessible on the same level of interaction as primary media controls

Open
  • Is something wrong?
#6,463 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
56/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Active
Tech stack
angular, typescript
Domain
accessibility, frontend

Research direction

Start by tracing the media viewer’s player controls and the three-dot menu where the caption toggle currently lives; the issue does not name specific files or tests. Compare how play, pause, and volume are exposed, then identify a way for captions to be reachable at the same interaction level. Done when the caption toggle is directly available alongside the primary controls and the change is checked with a video that has a .vtt transcript.

Written by the indexing model from the issue text.

Description

accessibility bug component: viewer help wanted

Describe the bug

The caption on/off control is located within a secondary menu accessed through the player's three-dot menu, whereas primary media controls (play, pause, and volume) are directly accessible on the player. Activating captions therefore requires an additional interaction step compared with using the primary controls. Consider making the caption control directly accessible at the same interaction level as the primary media controls.

To Reproduce

Steps to reproduce the behavior:

  1. Upload a video along with a transcript (.vtt) to enable captions
  2. Click on three-dot menu to access caption toggle (on/off)

Expected behavior

The caption toggle should be at the same level of interaction as the primary controls, such as play, pause, and volume control.

Related work

This may be related to https://github.com/DSpace/dspace-angular/issues/6460 and https://github.com/DSpace/dspace-angular/issues/6461, if moving to a more accessibility-friendly embedded player is an option.

Dominant language
TypeScript
Stars
180
Forks
577
Avg merge
2d 1h
Merged PRs (30d)
100

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from DSpace/dspace-angular

All issues in DSpace/dspace-angular

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.