-
Notifications
You must be signed in to change notification settings - Fork 169
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
Feat(MWPW-146367):Added accessibility player controls (NON MPC) #3053
base: stage
Are you sure you want to change the base?
Conversation
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## stage #3053 +/- ##
========================================
Coverage 96.37% 96.38%
========================================
Files 245 245
Lines 56607 56863 +256
========================================
+ Hits 54554 54805 +251
- Misses 2053 2058 +5 ☔ View full report in Codecov by Sentry. |
This pull request is not passing all required checks. Please see this discussion for information on how to get all checks passing. Inconsistent checks can be manually retried. If a test absolutely can not pass for a good reason, please add a comment with an explanation to the PR. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I only got through a few files, I'll continue tomorrow.
As discussed on Slack, we may want to update the way in which we disable the play/pause buttons by using the #_
pattern, thus accounting for the video auto block as well.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for looking into all the changes! I have a new round of comments and a potential bug: when focusing the play/pause button, it's being pushed from its original position:
Focus.changes.position.mov
I noticed that in the carousel block, maybe it's not the case everywhere, but it should be investigated.
libs/utils/decorate.js
Outdated
} | ||
} | ||
|
||
export function applyAccessibiltyEvents(videoEl) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't think the code should live here within the shared file if its only used once.
test/blocks/video/video.test.js
Outdated
const block = document.querySelector('.video.autoplay.single'); | ||
const block2 = document.querySelector('.video.autoplay.second'); | ||
const a = block.querySelector('a'); | ||
const a2 = block2.querySelector('a'); | ||
block.append(a); | ||
block2.append(a2); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
looks like document.querySelector('.video.autoplay.single')
is a single div with an a
tag inside, why are you appending the item to the same block it is found in?
Also, arguably, we should stick to semantic naming conventions even in our tests.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks @sharath-kannan for integrating all the changes!
And thanks @narcis-radu, @robert-bogos, @mokimo, @JasonHowellSlavin for your reviews! To clean up the PR page a bit, I've tried to go through all the comments and mark them as resolved if I deemed them as such, however I did leave a few open that were not immediately obvious to me, it would be great if you could have a look over those. And if you can spare the time, one more round of reviews would also be extremely helpful 😀
libs/utils/decorate.js
Outdated
const tabIndex = anchorTag.tabIndex || 0; | ||
const videoIndex = (tabIndex === -1) ? 'tabindex=-1' : ''; | ||
let video = `<video ${attrs} data-video-source=${src} ${videoIndex}></video>`; | ||
videoCounter += 1; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
During my testing it seemed that indexes are actually in order, it's just that they jump a few increments. If the additional check is straightforward, then I'd vote we add it. If it adds too much complexity, then we can think about it in the future.
test/blocks/video/video.test.js
Outdated
await new Promise((resolve) => { setTimeout(resolve, 500); }); | ||
await clock.runAllAsync(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
await clock.runAllAsync();
should run all async operations, I suspect you don't need the Promise before it. Have you tried removing it?
libs/utils/decorate.js
Outdated
@@ -331,20 +408,83 @@ export async function loadCDT(el, classList) { | |||
} | |||
} | |||
|
|||
export function isAccessible(anchorTag) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I still have a general naming issue with the methods in this file. The file itself tailors to multiple types of content, including videos. isAccessible
is relevant just for videos, but it could very well suggest it can apply to any other blocks. I'd say we need to better separate video logic as such through some better namings.
Issues have been resolved by the contributor
Resolves: MWPW-146367
Test URLs: