jonny
/
Vector-Local
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[TOC] Remove pointer-events:none on .sidebar-toc-link 

Previously, we relied on setting pointer-events:none on all child
elements of ToC links.

This propagated the click event up to the link itself in Javascript
and allowed us check if an element with the class `.sidebar-toc-link`
was clicked.

Unfortunately as of Chromium 101 this approach causes the entire link
in the sidebar to be unclickable.

Instead, this patch checks if the ToC link or any of it's children
have been clicked (using the less efficient `Element.closest()` ).

Bug: T307271
Change-Id: I2264b7862f6e1ef50c5c722daee81acc39eea54e
This commit is contained in:
Jan Drewniak 2022-05-02 14:33:59 -04:00 committed by Jon Robson
parent 019a812176
commit a473e694e1
2 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
resources/skins.vector.es6/tableOfContents.js
View File

@ -286,9 +286,13 @@ module.exports = function tableOfContents( props ) {
/** @type {HTMLElement | null} */ ( e.target.closest( `.${SECTION_CLASS}` ) );
if ( tocSection && tocSection.id ) {
if ( e.target.classList.contains( LINK_CLASS ) ) {
// In case section link contains HTML,
// test if click occurs on any child elements.
if ( e.target.closest( `.${LINK_CLASS}` ) ) {
props.onHeadingClick( tocSection.id );
}
// Toggle button does not contain child elements,
// so classList check will suffice.
if ( e.target.classList.contains( TOGGLE_CLASS ) ) {
props.onToggleClick( tocSection.id );
}

11
resources/skins.vector.styles/components/TableOfContents.less
View File

@ -26,16 +26,15 @@
border: 0;
}
.sidebar-toc-link > * {
// Prevent click events on the link's contents so that we can use event
// delegation and have the target be the anchor element instead.
pointer-events: none;
}
.sidebar-toc-numb {
display: none;
}
.sidebar-toc-link {
word-break: break-word;
color: @color-link;
}
.sidebar-toc-text {
padding: ~'calc( @{subcategory-padding} / 2 )' 0;
}