Page MenuHomePhabricator

Sticky header: ensure scrolling behavior reveals section title
Closed, ResolvedPublic2 Estimated Story Points

Description

Background

Currently, the sticky header displays over the section title if you navigate directly to a section.

jump-link.gif (1×2 px, 1 MB)

https://di-community-round-2.web.app/Audre_Lorde

Acceptance criteria

  • ensure behavior is such that allows for section titles to be displayed when going directly to a section

QA

Please perform the below steps with Chrome, Edge, and Firefox. Safari is known to not work with this feature.

When the user clicks a jump link

  1. Visit https://en.wikipedia.beta.wmflabs.org/wiki/Dog?vectorstickyheader=1
  2. Click on the "References" link in the table of contents
  3. Verify that the sticky header does not overlap the "References" section title

When the user clicks a jump link with a non-default browser font-size

  1. Adjust your browser's font size to a size that is larger than the default.
  2. Visit https://en.wikipedia.beta.wmflabs.org/wiki/Dog?vectorstickyheader=1
  3. Click on the "References" link in the table of contents
  4. Verify that the sticky header does not overlap the "References" section title

When the user clicks a jump link with a small viewport width

  1. Adjust your browser's viewport width to 500px.
  2. Visit https://en.wikipedia.beta.wmflabs.org/wiki/Dog?vectorstickyheader=1
  3. Click on the "References" link in the table of contents
  4. Verify that the top of the "References" section title is at the top of the viewport with no unnecessary space

When the user visits a page with a hash fragment with JS enabled

  1. Open a new tab and visit https://en.wikipedia.beta.wmflabs.org/wiki/Dog?vectorstickyheader=1#References
  2. Verify that the sticky header does not overlap the "References" section title

When the user visits a page with a hash fragment with JS disabled

  1. Turn off javascript
  2. Open a new tab and visit https://en.wikipedia.beta.wmflabs.org/wiki/Dog?vectorstickyheader=1#References
  3. Verify that the top of the "References" section title is at the top of the viewport with no unnecessary space

When the user tabs through the article in reverse order

  1. Visit https://en.wikipedia.beta.wmflabs.org/wiki/Dog?vectorstickyheader=1
  2. Hold tab until the viewport scrolls approximately half way down the page. Verify that the sticky header appears
  3. Reverse tab repeatedly (by pressing shift+tab) so that the viewport scrolls up the page. Verify that the links (or other focused elements) are not overlapped by the sticky header

QA Results - Beta

QA Results - Beta

Event Timeline

ovasileva moved this task from Incoming to Sticky header on the Desktop Improvements board.

As a cross-browser solution (in which scroll-padding/scroll-margin might be lacking), https://css-tricks.com/hash-tag-links-padding/#fancier-clean-html-method has a clever idea. For us, it would probably look something like:

.mw-headline {
	overflow: visible !important; // This might be problematic as .mw-headline is usually overflow: hidden
}
.mw-headline:before {
	display: block;
	content: ' ';
	margin-top: -60px; // height of sticky header
	height: 60px; // height of sticky header
	visibility: hidden;
	pointer-events: none;
}

Another way of thinking about this:
We could hide the sticky header when a hash is present in the URL
e.g. http://localhost:8888/w/index.php?title=Qatar&mobileaction=toggle_view_desktop#Demographics

and reveal it again when that heading is scrolled out of view.

I'm not sure if that would be a better user experience.

This comment was removed by Jdrewniak.

Building on the negative margin + padding approach @nray outlined, I think we would have to calculate the height of the sticky header at the time of interaction, because the sticky header could change height when the browser is resized. We could convert this approach to javascript and add the necessary styles when the user clicks on a heading.

This approach assumes that the <span> that holds the section ID doesn't have any existing top-margin or padding (which is true and fully in our control in the Vector skin) but if that changes it would make the math a little more complicated.

const 
  tocLinks = document.querySelectorAll('#toc a'),
  stickyHeader = document.getElementById('firstHeading');


tocLinks.forEach( link => {
  link.addEventListener('click', modifyHeadingMargin);
});

function modifyHeadingMargin( event ) {
  const 
    href = event.currentTarget.getAttribute('href'),
    linkTarget = document.querySelector( href );
  
  if ( 'sticky header is visible' ) {
    linkTarget.style.marginTop = `-${stickyHeader.offsetHeight}px`;
    linkTarget.style.paddingTop = `${stickyHeader.offsetHeight}px`;
  } else {
    linkTarget.style.marginTop = 0;
    linkTarget.style.paddingTop = 0;
  }
}

In T291427, @bwang has a great point regarding keyboard navigation with seems closely related to this ticket. Seems like the solution for this should also take into account keyboard navigation as well

Having discussed this with the team yesterday, the negative margin + padding approach was considered a little to brittle because the it makes assumptions about the CSS of the section heading and the height of the sticky header, and using JS to apply that CSS in a click event seemed overly complicated, especially when considering certain edge cases (like what happens when you open a URL that already has a section hash, or open a section link from outside the table of contents).

@Jdlrobson's suggestion of hiding the sticky header when there is a hash in the URL is more cross-browser compatible, however, it seems like using the css scroll-padding property would solve both this issue and the keyboard focus scenario outlined in T291427, with the limitation that it won't work on Safari (iOS and Mac).

Taking into account that we'll be building a table of contents feature in the near future, where the section title will be highlighted and visible, I think that might slightly reduce the severity of this bug and therefore I'd be inclined to use the scroll-padding solution despite the Safari limitation.

Change 724523 had a related patch set uploaded (by Nray; author: Nray):

[mediawiki/skins/Vector@master] Add scroll padding to the root element whenever the sticky header is visible

https://gerrit.wikimedia.org/r/724523

nray removed nray as the assignee of this task.Sep 28 2021, 10:51 PM
nray removed nray as the assignee of this task.Sep 28 2021, 11:07 PM
nray removed nray as the assignee of this task.Sep 29 2021, 12:07 AM
nray updated the task description. (Show Details)

Change 724523 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Add scroll padding to the root element when the sticky header is enabled

https://gerrit.wikimedia.org/r/724523

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

Please perform the below steps with Chrome, Edge, and Firefox. Safari is known to not work with this feature.

✅ AC1: When the user clicks a jump link

  1. Visit https://en.wikipedia.beta.wmflabs.org/wiki/Dog?vectorstickyheader=1
  2. Click on the "References" link in the table of contents
  3. Verify that the sticky header does not overlap the "References" section title
ChromeEdgeFirefox
Screen Shot 2021-10-07 at 8.27.31 AM.png (1×972 px, 536 KB)
Screen Shot 2021-10-07 at 8.27.44 AM.png (1×928 px, 484 KB)
Screen Shot 2021-10-07 at 8.27.48 AM.png (1×972 px, 526 KB)

✅ AC2: When the user clicks a jump link with a non-default browser font-size

  1. Adjust your browser's font size to a size that is larger than the default.
  2. Visit https://en.wikipedia.beta.wmflabs.org/wiki/Dog?vectorstickyheader=1
  3. Click on the "References" link in the table of contents
  4. Verify that the sticky header does not overlap the "References" section title
ChromeEdgeFirefox
Screen Shot 2021-10-07 at 8.32.31 AM.png (1×928 px, 428 KB)
Screen Shot 2021-10-07 at 8.32.31 AM.png (1×928 px, 428 KB)
Screen Shot 2021-10-07 at 8.32.34 AM.png (1×972 px, 475 KB)

✅ AC3: When the user clicks a jump link with a small viewport width

  1. Adjust your browser's viewport width to 500px.
  2. Visit https://en.wikipedia.beta.wmflabs.org/wiki/Dog?vectorstickyheader=1
  3. Click on the "References" link in the table of contents
  4. Verify that the top of the "References" section title is at the top of the viewport with no unnecessary space
ChromeEdgeFirefox
Screen Shot 2021-10-07 at 6.02.52 PM.png (1×627 px, 375 KB)
Screen Shot 2021-10-07 at 6.02.55 PM.png (1×583 px, 328 KB)
Screen Shot 2021-10-07 at 6.02.58 PM.png (1×583 px, 322 KB)

✅ AC4: When the user visits a page with a hash fragment with JS enabled

  1. Open a new tab and visit https://en.wikipedia.beta.wmflabs.org/wiki/Dog?vectorstickyheader=1#References
  2. Verify that the sticky header does not overlap the "References" section title
ChromeEdgeFirefox
Screen Shot 2021-10-07 at 6.07.46 PM.png (1×928 px, 488 KB)
Screen Shot 2021-10-07 at 6.07.50 PM.png (1×972 px, 533 KB)
Screen Shot 2021-10-07 at 6.07.52 PM.png (1×928 px, 479 KB)

✅ AC5: When the user visits a page with a hash fragment with JS disabled

  1. Turn off javascript
  2. Open a new tab and visit https://en.wikipedia.beta.wmflabs.org/wiki/Dog?vectorstickyheader=1#References
  3. Verify that the top of the "References" section title is at the top of the viewport with no unnecessary space
ChromeEdgeFirefox
Screen Shot 2021-10-07 at 6.19.25 PM.png (1×928 px, 513 KB)
Screen Shot 2021-10-07 at 6.19.28 PM.png (1×928 px, 506 KB)
Screen Shot 2021-10-07 at 6.19.31 PM.png (1×972 px, 548 KB)

✅ AC6: When the user tabs through the article in reverse order

  1. Visit https://en.wikipedia.beta.wmflabs.org/wiki/Dog?vectorstickyheader=1
  2. Hold tab until the viewport scrolls approximately half way down the page. Verify that the sticky header appears
  3. Reverse tab repeatedly (by pressing shift+tab) so that the viewport scrolls up the page. Verify that the links (or other focused elements) are not overlapped by the sticky header
ChromeEdgeFirefox
Screen Recording 2021-10-07 at 6.21.28 PM.mov.gif (970×860 px, 1 MB)
Screen Recording 2021-10-07 at 6.22.01 PM.mov.gif (970×860 px, 2 MB)
Edtadros added a subscriber: Edtadros.

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

Please perform the below steps with Chrome, Edge, and Firefox. Safari is known to not work with this feature.

✅ AC1: When the user clicks a jump link

  1. Visit https://en.wikipedia.org/wiki/Dog?useskinversion=2&vectorstickyheader=1
  2. Click on the "References" link in the table of contents
  3. Verify that the sticky header does not overlap the "References" section title
ChromeEdgeFirefox
Screen Shot 2021-10-08 at 3.58.19 PM.png (1×972 px, 559 KB)
Screen Shot 2021-10-08 at 3.58.22 PM.png (1×928 px, 507 KB)
Screen Shot 2021-10-08 at 3.58.24 PM.png (1×928 px, 503 KB)

✅ AC2: When the user clicks a jump link with a non-default browser font-size

  1. Adjust your browser's font size to a size that is larger than the default.
  2. Visit https://en.wikipedia.org/wiki/Dog?useskinversion=2&vectorstickyheader=1
  3. Click on the "References" link in the table of contents
  4. Verify that the sticky header does not overlap the "References" section title
ChromeEdgeFirefox
Screen Shot 2021-10-08 at 4.01.05 PM.png (1×928 px, 444 KB)
Screen Shot 2021-10-08 at 4.01.07 PM.png (1×928 px, 441 KB)
Screen Shot 2021-10-08 at 4.01.09 PM.png (1×972 px, 402 KB)

✅ AC3: When the user clicks a jump link with a small viewport width

  1. Adjust your browser's viewport width to 500px.
  2. Visit https://en.wikipedia.org/wiki/Dog?useskinversion=2&vectorstickyheader=1
  3. Click on the "References" link in the table of contents
  4. Verify that the top of the "References" section title is at the top of the viewport with no unnecessary space
ChromeEdgeFirefox
Screen Shot 2021-10-08 at 4.05.25 PM.png (1×582 px, 341 KB)
Screen Shot 2021-10-08 at 4.05.27 PM.png (1×582 px, 341 KB)
Screen Shot 2021-10-08 at 4.05.31 PM.png (1×582 px, 340 KB)

✅ AC4: When the user visits a page with a hash fragment with JS enabled

  1. Open a new tab and visit https://en.wikipedia.org/wiki/Dog?useskinversion=2&vectorstickyheader=1#References
  2. Verify that the sticky header does not overlap the "References" section title
ChromeEdgeFirefox
Screen Shot 2021-10-08 at 4.08.04 PM.png (1×972 px, 556 KB)
Screen Shot 2021-10-08 at 4.08.07 PM.png (1×928 px, 507 KB)
Screen Shot 2021-10-08 at 4.08.11 PM.png (1×928 px, 504 KB)

✅ AC5: When the user visits a page with a hash fragment with JS disabled

  1. Turn off javascript
  2. Open a new tab and visit https://en.wikipedia.org/wiki/Dog?useskinversion=2&vectorstickyheader=1#References
  3. Verify that the top of the "References" section title is at the top of the viewport with no unnecessary space
ChromeEdgeFirefox
Screen Shot 2021-10-08 at 4.15.20 PM.png (1×928 px, 530 KB)
Screen Shot 2021-10-08 at 4.15.22 PM.png (1×928 px, 528 KB)
Screen Shot 2021-10-08 at 4.15.25 PM.png (1×972 px, 573 KB)

✅ AC6: When the user tabs through the article in reverse order

  1. Visit https://en.wikipedia.org/wiki/Dog?useskinversion=2&vectorstickyheader=1
  2. Hold tab until the viewport scrolls approximately half way down the page. Verify that the sticky header appears
  3. Reverse tab repeatedly (by pressing shift+tab) so that the viewport scrolls up the page. Verify that the links (or other focused elements) are not overlapped by the sticky header
ChromeEdgeFirefox
Screen Recording 2021-10-08 at 4.18.35 PM.mov.gif (970×860 px, 1 MB)
Screen Recording 2021-10-08 at 4.20.03 PM.mov.gif (970×860 px, 1 MB)
Screen Recording 2021-10-08 at 4.21.06 PM.mov.gif (970×860 px, 1 MB)

Special Thanks to @nray's very excellent test steps.