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.

Sign up for GitHub

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

Jump to bottom

USWDS - In-page navigation: Exclude hidden headers #5393

Merged
merged 9 commits into from Aug 11, 2023
Merged

USWDS - In-page navigation: Exclude hidden headers #5393

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
14f8e66
Exclude hidden headers from section headings list
amyleadem Jul 19, 2023
0ea2bbf
Add test hidden headers story
amyleadem Jul 19, 2023
67dbc9e
Improve Storybook tests
amyleadem Jul 19, 2023
a4872c0
Simplify text in test intro
amyleadem Jul 19, 2023
a420068
Wrap hidden headers in visible containers
amyleadem Aug 4, 2023
6916eb1
Remove test code
amyleadem Aug 4, 2023
39d6835
Remove hidden headers test
amyleadem Aug 4, 2023
5dc413c
Format code
amyleadem Aug 4, 2023
bd109ff
Fix formatting
amyleadem Aug 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
20 changes: 17 additions & 3 deletions packages/usa-in-page-navigation/src/index.js
View file
Open in desktop
mejiaj marked this conversation as resolved.
Show resolved Hide resolved
Expand Up @@ -42,15 +42,29 @@ const setActive = (el) => {
};

/**
* Return a node list of section headings
* Return an array of visible section headings in the main content region
*
* @return {HTMLElement[]} - An array of DOM nodes
* @return {Array} - An array of visible section headings
*/
const getSectionHeadings = () => {
const sectionHeadings = document.querySelectorAll(
`${MAIN_ELEMENT} h2, ${MAIN_ELEMENT} h3`
);
return sectionHeadings;

// Convert nodeList to an array to allow for filtering
const headingArray = Array.from(sectionHeadings);

// Find all headings with hidden styling and remove them from the array
const visibleHeadingArray = headingArray.filter((heading) => {
const headingStyle = window.getComputedStyle(heading);
const visibleHeading =
headingStyle.getPropertyValue("display") !== "none" &&
headingStyle.getPropertyValue("visibility") !== "hidden";
Comment on lines +61 to +62
Copy link
Contributor

Choose a reason for hiding this comment

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

Note
As mentioned in comments. This doesn't take into account opacity: 0. This isn't a blocker to the main root of the issue.


return visibleHeading;
});

return visibleHeadingArray;
};

/**
Expand Down
52 changes: 52 additions & 0 deletions packages/usa-in-page-navigation/src/test/test-patterns/test-hidden-headers.twig
View file
Open in desktop
amyleadem marked this conversation as resolved.
Show resolved Hide resolved
mejiaj marked this conversation as resolved.
Show resolved Hide resolved
@@ -0,0 +1,52 @@
<div class="usa-in-page-nav-container">
<aside
class="usa-in-page-nav"
data-title-text="On this page"
data-title-heading-level="h4"
data-scroll-offset="0"
data-root-margin="0px 0px 0px 0px"
data-threshold="1">
</aside>

<main class="usa-prose">
<div class="usa-summary-box" role="region" aria-labelledby="summary-box-key-information">
<div class="usa-summary-box__body">
<h1 class="usa-summary-box__heading" id="summary-box-key-information">
Test if in-page nav excludes hidden headers
</h1>
<div class="usa-summary-box__text">
<p>
The in-page nav link list should show only two "This heading is
visible" headers.
</p>
</div>
</div>
</div>
<h2>This heading is visible</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
lorem non turpis.
</p>
<h3>This heading is visible</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
lorem non turpis.
</p>
<div class="outline-2px outline-magenta padding-1" style="outline-style: dashed">
<pre>Display: none;</pre>
<h2 style="display: none">This heading is hidden with display:none</h2>
</div>
<div class="outline-2px outline-magenta padding-1" style="outline-style: dashed">
<pre>Visibility: hidden;</pre>
<h2 style="visibility: hidden">
This heading is hidden with visibility:hidden
</h2>
</div>
<div class="outline-2px outline-magenta padding-1" style="outline-style: dashed">
<pre>Opacity: 0;</pre>
<h2 style="opacity: 0">This heading is hidden with opacity:0</h2>
</div>
</main>
</div>
2 changes: 0 additions & 2 deletions packages/usa-in-page-navigation/src/usa-in-page-navigation.json
View file
Open in desktop
Expand Up @@ -48,7 +48,5 @@
"is_subheading": true,
"content": "<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.</p>"
}
amyleadem marked this conversation as resolved.
Show resolved Hide resolved


]
}
4 changes: 4 additions & 0 deletions packages/usa-in-page-navigation/src/usa-in-page-navigation.stories.js
View file
Open in desktop
@@ -1,11 +1,15 @@
import Component from "./usa-in-page-navigation.twig";
import TestHiddenHeaderComponent from "./test/test-patterns/test-hidden-headers.twig";
import Content from "./usa-in-page-navigation.json";

export default {
title: "Components/In-Page Navigation",
};

const Template = (args) => Component(args);
const TestHiddenHeaderTemplate = (args) => TestHiddenHeaderComponent(args);

export const Default = Template.bind({});
Default.args = Content;

export const TestHiddenHeader = TestHiddenHeaderTemplate.bind();
8 changes: 4 additions & 4 deletions packages/usa-in-page-navigation/src/usa-in-page-navigation.twig
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

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

Are the new checks necessary? I couldn't get them to trigger. It also seems like we're adding test behaviors to default component.

If we re-used this template for testing ― that'd be okay. But we already have a separate test template.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Oof - I feel like you caught me in my mess! Looks like I accidentally left some old code in this PR. Thanks for watching my back and catching it. Removed in 39d6835.

Expand Up @@ -3,10 +3,10 @@
{% set list_item_class = 'usa-in-page-nav__item' %}
{% set current_class = 'usa-current' %}

<aside class="usa-in-page-nav"
data-title-text="On this page"
data-title-heading-level="h4"
data-scroll-offset="0"
<aside class="usa-in-page-nav"
data-title-text="On this page"
data-title-heading-level="h4"
data-scroll-offset="0"
data-root-margin="0px 0px 0px 0px"
data-threshold="1"
></aside>
Expand Down