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

Focus: Always jump to URL hashes #8844

Draft
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

EricDunsworth
Copy link
Member

When visiting a hash link (#id), WET's focus plugin checks whether the destination is situated within a closed details element or tab panel. If so, the plugin automatically expands the destination's details element or tab panel. The plugin subsequently focuses onto the destination.

However, that sometimes causes inconsistent scrolling behaviour. Scrolling will work differently depending on if the link's destination is in the same page or on a separate page.

If a user visits a same-page hash link whose destination is in a closed details element/tab panel, everything works as expected. The plugin will expand the parent and the browser will jump to the destination. The destination will appear at the top of the browser viewport.

If a user visits a hash link whose destination is on a separate page, the plugin will run... but won't jump to the destination. Instead of jumping, the browser will scroll to show the destination at the bottom (Gecko/Trident) or the middle (Blink/Webkit) of the viewport. This is due to the focus plugin causing browsers to incorrectly use their natural focus scrolling behaviour in this context.

This commit corrects that behaviour by adding a flag to always navigate to hashes that are being focused on. As a result, browsers can use their natural link jumping behaviour. It also doesn't add anything to the browser's navigation history (since the hash was already in the page's URL beforehand).

@EricDunsworth
Copy link
Member Author

Marked as a draft since I ran into some strange behaviour in Edge Trident. It's showing a dotted border or outline when jumping to in-page URL hashes, but not when coming from a separate page. Some other browsers I tested in show outlines, but do it consistently for both in-page and separate page hash links.

When visiting a hash link (#id), WET's focus plugin checks whether the destination is situated within a closed details element or tab panel. If so, the plugin automatically expands the destination's details element or tab panel. The plugin subsequently focuses onto the destination.

However, that sometimes causes inconsistent scrolling behaviour. Scrolling will work differently depending on if the link's destination is in the same page or on a separate page.

If a user visits a same-page hash link whose destination is in a closed details element/tab panel, everything works as expected. The plugin will expand the parent and the browser will jump to the destination. The destination will appear at the top of the browser viewport.

If a user visits a hash link whose destination is on a separate page, the plugin will run... but won't jump to the destination. Instead of jumping, the browser will scroll to show the destination at the bottom (Gecko/Trident) or the middle (Blink/Webkit) of the viewport. This is due to the focus plugin causing browsers to incorrectly use their natural focus scrolling behaviour in this context.

This commit corrects that behaviour by adding a flag to always navigate to hashes that are being focused on. As a result, browsers can use their natural link jumping behaviour. It also doesn't add anything to the browser's navigation history (since the hash was already in the page's URL beforehand).
@duboisp
Copy link
Member

duboisp commented Apr 2, 2020

Can you add a working example page of the auto-expand summary element when linked through an anchor?

@@ -10,6 +10,8 @@
var $document = wb.doc,
$window = wb.win,
clickEvents = "click vclick",
hash,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am suggesting to use "fragment" instead

ref. Section 3 in this doc: https://tools.ietf.org/html/rfc3986

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.

None yet

2 participants