Accordion: Deep Link: Scroll to open title, offset for sticky headers

[JeremyCaney]

What is missing?

When using a Foundation Accordion with data-deep-link, the page should scroll to the top of the data-accordion-item, not the top of the data-tab-content. Further, there should be a means of allowing this to include an offset in order to account for e.g. a sticky header.

What is wrong now?

Currently, when data-deep-link is enabled, the URL fragment points to the id of the data-tab-content. When a user navigates to a URL with that fragment, the browser scrolls to that data-tab-content and opens it. In doing so, however, the title is hidden above the view port. Further, if there's a sticky header, then the content itself will also be hidden under this area.

To help provide context, this is the markup for the Accordion:

<ul class="accordion" data-accordion data-deep-link="true">
  <li class="accordion-item" data-accordion-item>
    <a class="accordion-title" href="#Item1">Item 1</a>
    <div class="accordion-content" data-tab-content id="Item1">
      …
    </div>
  </li>
</ul>

Possible Solution

There are currently two attributes—data-deep-link-smudge and data-deep-link-smudge-offset—which provide similar types of control. They scroll to the top of the data-accordion, however, not to the top of the data-tab-content. One could imagine a similar set of attributes for controlling the scroll position of deep links to the top of the data-accordion-item.

Note: It's not entirely clear to me what the utility of data-deep-link-smudge is, as it can result in the open tab not even being visible in cases where the height of the accordion panel is higher than the viewport. Personally, I'd have expected data-deep-link-smudge to operate as I've proposed here, but that doesn't appear to be the design intent.

Your Environment

• Foundation version(s) used: 6.6.3
• Browser(s) name and version(s): Google Chrome 86.0.4240.198
• Device, Operating System and version: Windows 10 Pro 20H2

Checklist

• I have read and follow the CONTRIBUTING.md document.
• There are no other issues similar to this one*.
• The issue title and template are correctly filled.

• There was a somewhat similar issue in 2013 related to clicking on the title/label. My request, however, relates to the opening a URL with a data-deep-link fragment.

[angelicochris]

I'm on 6.4.3 and having this issue as well.