fix(watch-later): inject button outside aria-hidden anchor (#4305) - #4307
Open
shoaibyazdani wants to merge 1 commit into
Open
fix(watch-later): inject button outside aria-hidden anchor (#4305)#4307shoaibyazdani wants to merge 1 commit into
shoaibyazdani wants to merge 1 commit into
Conversation
…ity#4305) YouTube marks thumbnail anchors (e.g. <a class="ytLockupViewModelContentImage">) with aria-hidden="true". The Watch Later button was appended as a direct child of the anchor, so clicking the button triggered the browser's focus-block warning: Blocked aria-hidden on an element because its descendant retained focus. Append the button to the thumbnail's parent container (the renderer — ytd-rich-item-renderer, yt-lockup-view-model, etc.) instead. The button is positioned absolutely so visual placement is unchanged. - addWatchLaterButton: append to thumbnail.parentElement; track container for the click handler so it can be passed to findNativeWatchLaterButton (which uses closest() to locate the renderer internally anyway). - findNativeWatchLaterButton(container) still resolves the same renderer via closest(), so this is a no-op for the native-button lookup. - Existing hover selector *:hover>.it-watch-later-button still matches because the button's new direct parent (the renderer) is what gets hovered. - New test: 'injects button outside the aria-hidden thumbnail anchor (code-charity#4305)'.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fixes #4305.
YouTube marks thumbnail anchors (e.g.
<a class="ytLockupViewModelContentImage">) witharia-hidden="true". The Watch Later button was being appended as a direct child of the anchor viathumbnail.appendChild(button), so when a user clicked the button the browser blocked focus with:Appending the button to the thumbnail's parent container (the renderer —
ytd-rich-item-renderer/yt-lockup-view-model/ etc.) keeps the button focusable while preserving YouTube's a11y semantics.Why this works
position: absolute; top: 4px; right: 4px;and is already positioned relative to a higher ancestor (the renderer). Moving it from the anchor to the renderer's child list doesn't change visual placement.findNativeWatchLaterButton(container)works correctly because that helper usesclosest()to locate the renderer internally — passing the renderer directly just short-circuits the lookup.alwaysmode is unaffected. The existing*:hover>.it-watch-later-buttonselector still matches because the button's direct parent (the renderer) is now what gets hovered — so hover semantics still work, just with a slightly larger hover area. If reviewers prefer to preserve link-only hover, the selector can be tightened in a follow-up.Changes
js&css/extension/www.youtube.com/general/general.js—addWatchLaterButton: append tothumbnail.parentElementinstead ofthumbnail; trackcontainerso the click handler can pass it tofindNativeWatchLaterButton(which usesclosest()anyway, but passing the renderer explicitly is cleaner).tests/unit/watch-later-buttons.test.js— added a test asserting the button is not appended directly to the thumbnail anchor.Test
Notes
addWatchLaterButton) + one click handler reference.