833534 - [video slideshow] "X" in close button is inaccessible

Status: VERIFIED FIXED

(www.mozilla.org :: Bedrock, defect, P4)

Description

[Isac Lagerblad (:icaaq)]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.8; rv:21.0) Gecko/20130122 Firefox/21.0
Build ID: 20130122030956

Steps to reproduce:

1. When using a screen reader (in my case Voice Over/safari) Press Cmd+N to open a new browser window, then type https://www-demo1.allizom.org/en-US/ in the address bar and press Enter
2. Open up the video player.
3. Find the "X" button (close)


Actual results:

Screen readers say times button
http://icaaq.com/sandbox/mozilla/times-button.mov


Expected results:

There is a sprite used for overlay-icons already add a "X" in that and add a proper message "Close video" in the close button with text-indent:-999em; (or similar)

Comment 1

[alexander :surkov (:asurkov)]

(In reply to Isac Lagerblad (:icaaq) from comment #0)

> 1. When using a screen reader (in my case Voice Over/safari) Press Cmd+N to
> open a new browser window, then type https://www-demo1.allizom.org/en-US/ in
> the address bar and press Enter
> 2. Open up the video player.

I'm not sure how to proceed the step 2

Comment 2

[alexander :surkov (:asurkov)]

(In reply to alexander :surkov from comment #1)

> I'm not sure how to proceed the step 2

got it. btw, I see the pusbutton accessible for that 'x' button (span@role="button").

Marco, can you reproduce?

Comment 3

[Marco Zehe (:MarcoZ)]

Sorry, but I have no idea where to look for a video player on that page. I don't see anything that could be it. Only a bunch of links to various other sites.

Comment 4

[Marco Zehe (:MarcoZ)]

Oh yes, and three unlabeled links in a list of 5 items before the "in the news" heading.

Comment 5

[Mike Alexis [:malexis]]

Steven, is this a known issue? Assigning over to you to confirm.

Comment 6

[klamping]

I went ahead and took a crack at addressing this issue. I'd like to get everyone's feedback 
since I'm brand new to this process. 

Here's the request with details on the changes I made. I'd love any feedback on it you have.
https://github.com/mozilla/bedrock/pull/700

Comment 7

[Steven Garrity [:sgarrity]]

Attachment: Pointer to Github pull request: https://github.com/mozilla/bedrock/pull/700/files#r3987900

Pointer to Github pull-request

Comment 8

[[github robot]]

Commit pushed to master at https://github.com/mozilla/bedrock

https://github.com/mozilla/bedrock/commit/5936ad0abcdd456bed9b03340f27844613417dc3
bug 833534; Updates to homepage to improve accessibility of promo navigation and video close button

Comment 9

[raymond [:retornam] (inactive)]

This has been merged I'd like someone with a screen reader to verify this

Comment 10

[Steven Garrity [:sgarrity]]

Attachment: Screenshot of un-hidden close text

Looks like the CSS to hide this text visually isn't working.

Comment 11

[klamping]

Yeah, you're right... It looks like the styles aren't even being applied.

Comment 12

[klamping]

After some quick review, it looks like there was a commit after the original one which removed the visuallyhidden class. Adding it back in to the home.less file should resolve the issue.

Comment 13

[Steven Garrity [:sgarrity]]

(In reply to klamping from comment #12)
> After some quick review, it looks like there was a commit after the original
> one which removed the visuallyhidden class. Adding it back in to the
> home.less file should resolve the issue.

klamping, please see https://github.com/mozilla/bedrock/pull/860

Comment 14

[[github robot]]

Commits pushed to master at https://github.com/mozilla/bedrock

https://github.com/mozilla/bedrock/commit/8ab273996bfb1490f08e18a782177083fb005ea2
Bug 833534 Replace missing .visuallyhidden class

https://github.com/mozilla/bedrock/commit/904a5bf42dfd7a8f51772fb73c9e1e43905f239d
Merge pull request #860 from sgarrity/bug-833534-fix-video-close

Bug 833534 Add missing .visuallyhidden class

Comment 15

[raymond [:retornam] (inactive)]

This bug has been fixed and pushed to prod https://www.mozilla.org/en-US/