Skip to content
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

Open
wants to merge 36 commits into
base: stage
Choose a base branch
from

Conversation

sharath-kannan
Copy link
Contributor

@sharath-kannan sharath-kannan commented Oct 16, 2024

Copy link
Contributor

aem-code-sync bot commented Oct 16, 2024

Copy link

codecov bot commented Oct 16, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 96.38%. Comparing base (f08f6ce) to head (0d964fa).
Report is 7 commits behind head on stage.

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.
📢 Have feedback on the report? Share it here.

Copy link
Contributor

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.

@spadmasa spadmasa self-assigned this Oct 17, 2024
Copy link
Contributor

@overmyheadandbody overmyheadandbody left a 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.

libs/blocks/aside/aside.css Show resolved Hide resolved
libs/blocks/aside/aside.js Outdated Show resolved Hide resolved
libs/blocks/figure/figure.css Outdated Show resolved Hide resolved
libs/blocks/figure/figure.js Outdated Show resolved Hide resolved
libs/blocks/hero-marquee/hero-marquee.js Outdated Show resolved Hide resolved
libs/blocks/video/video.css Outdated Show resolved Hide resolved
libs/blocks/video/video.css Outdated Show resolved Hide resolved
libs/blocks/video/video.css Show resolved Hide resolved
libs/blocks/video/video.css Outdated Show resolved Hide resolved
libs/blocks/video/video.css Outdated Show resolved Hide resolved
Copy link
Contributor

@overmyheadandbody overmyheadandbody left a 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/blocks/hero-marquee/hero-marquee.js Outdated Show resolved Hide resolved
libs/blocks/video/video.css Outdated Show resolved Hide resolved
libs/blocks/video/video.css Outdated Show resolved Hide resolved
libs/utils/decorate.js Outdated Show resolved Hide resolved
libs/utils/decorate.js Outdated Show resolved Hide resolved
libs/utils/decorate.js Outdated Show resolved Hide resolved
libs/utils/decorate.js Outdated Show resolved Hide resolved
libs/utils/decorate.js Outdated Show resolved Hide resolved
libs/blocks/aside/aside.css Outdated Show resolved Hide resolved
libs/blocks/brick/brick.css Outdated Show resolved Hide resolved
libs/blocks/figure/figure.js Outdated Show resolved Hide resolved
libs/blocks/carousel/carousel.js Outdated Show resolved Hide resolved
libs/utils/decorate.js Outdated Show resolved Hide resolved
libs/blocks/figure/figure.js Outdated Show resolved Hide resolved
libs/blocks/video/video.css Outdated Show resolved Hide resolved
libs/blocks/video/video.css Show resolved Hide resolved
libs/blocks/video/video.css Outdated Show resolved Hide resolved
libs/blocks/video/video.css Show resolved Hide resolved
libs/utils/decorate.js Outdated Show resolved Hide resolved
libs/utils/decorate.js Outdated Show resolved Hide resolved
libs/utils/decorate.js Outdated Show resolved Hide resolved
libs/utils/decorate.js Outdated Show resolved Hide resolved
}
}

export function applyAccessibiltyEvents(videoEl) {
Copy link
Contributor

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.

libs/utils/decorate.js Outdated Show resolved Hide resolved
libs/blocks/aside/aside.js Outdated Show resolved Hide resolved
libs/blocks/carousel/carousel.js Outdated Show resolved Hide resolved
libs/blocks/carousel/carousel.js Outdated Show resolved Hide resolved
libs/utils/decorate.js Show resolved Hide resolved
libs/utils/decorate.js Outdated Show resolved Hide resolved
Comment on lines 28 to 33
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);
Copy link
Contributor

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.

test/blocks/video/video.test.js Outdated Show resolved Hide resolved
@overmyheadandbody overmyheadandbody mentioned this pull request Nov 13, 2024
Copy link
Contributor

@overmyheadandbody overmyheadandbody left a 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 😀

const tabIndex = anchorTag.tabIndex || 0;
const videoIndex = (tabIndex === -1) ? 'tabindex=-1' : '';
let video = `<video ${attrs} data-video-source=${src} ${videoIndex}></video>`;
videoCounter += 1;
Copy link
Contributor

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.

Comment on lines 174 to 175
await new Promise((resolve) => { setTimeout(resolve, 500); });
await clock.runAllAsync();
Copy link
Contributor

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?

@@ -331,20 +408,83 @@ export async function loadCDT(el, classList) {
}
}

export function isAccessible(anchorTag) {
Copy link
Contributor

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.

@overmyheadandbody overmyheadandbody dismissed narcis-radu’s stale review November 14, 2024 16:01

Issues have been resolved by the contributor

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

10 participants