New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

The progress bar has hidden text (for screen reader users) which does not get updated #5251

Closed
OwenEdwards opened this Issue Jun 12, 2018 · 0 comments

Comments

Projects
None yet
1 participant
@OwenEdwards
Copy link
Member

OwenEdwards commented Jun 12, 2018

Description

The progress bar has hidden vjs-control-text for "Loaded" and "Progress" which is initialized as "0%" and never updated. For example:

<div class="vjs-progress-control vjs-control">
    <div tabindex="0" class="vjs-progress-holder vjs-slider vjs-slider-horizontal" role="slider" aria-valuenow="35.02" aria-valuemin="0" aria-valuemax="100" aria-label="Progress Bar" aria-valuetext="03:48 of 10:53">
        <div class="vjs-load-progress" style="width: 44.3632%;">
            <span class="vjs-control-text">
                <span>Loaded</span>
                : 0%
            </span>
            <div style="left: 76.0904%; width: 23.9096%;"></div>
        </div>
        <div class="vjs-mouse-display" style="left: 17.0144px;">
            <div class="vjs-time-tooltip" style="right: -15.5px;">00:51</div>
        </div>
        <div class="vjs-play-progress vjs-slider-bar" style="width: 35.02%;">
            <div class="vjs-time-tooltip" style="right: -20.525px;">03:48</div>
            <span class="vjs-control-text">
                <span>Progress</span>
                : 0%
            </span>
        </div>
    </div>
</div>

Steps to reproduce

Using a screen reader such as NVDA with Firefox, switch into Virtual Cursor mode and use the arrow keys to move through the control bar after the video has played for a while and then been paused.

Results

Expected

The "Loading" and "Progress" values should match the visual representation of loading and progress (and the progress value should match the ARIA values being updated on the <div role="slider" ...> element).

Actual

The "Loading" and "Progress" values are always announced as "0%"

Additional Information

Please include any additional information necessary here. Including the following:

versions

videojs

Observed with v6.6 on www.videojs.com, but present it more recent version.

@OwenEdwards OwenEdwards added the a11y label Jun 12, 2018

gkatsev added a commit that referenced this issue Dec 11, 2018

fix(a11y): fix hidden Control Text in Progress bar (Fixes #5251) (#5655)
- Update the Control Text in the load-progress-bar during loading, remove unnecessary Control Text from the play-progress-bar, and hide the time-tooltip feature from Assistive Technology using ARIA.
- Add a span around the vjs-control-text-loaded-percentage in load-progress-bar, and use that for the text to update.
- Hide the time-tooltip feature from Assistive Technology using ARIA

Fixes #5251
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment