USWDS-Site - Changelog: In-page nav header selector [#5444]

_components/in-page-navigation/guidance/implementation.md

@@ -17,7 +17,8 @@ Implementing the in-page navigation component requires a few additions and adjus
   ```
 
 - **Initialization properties.** You can customize how the component builds during initialization by adding any of the following properties to the `usa-in-page-nav` element. These properties must be set _before_ the component is initialized.
-- **Custom main content region.** The main content selector property (`data-main-content-selector`) allows you to define which element the component will look in to pull its list of headers. Set the property's value to the `class` or `id` of your page's main content region (for example, `data-main-content-selector=".main-content"` or `data-main-content-selector="#main-content"`). By default, the component will pull headers from the `<main>` element.
+- **Custom main content region selector.** The main content selector property (`data-main-content-selector`) allows you to define which element the component will look in to pull its list of headings. Set the property's value to the `class` or `id` of your page's main content region (for example, `data-main-content-selector=".main-content"` or `data-main-content-selector="#main-content"`). By default, the component will pull headings from the `<main>` element.
+- **Custom heading selector.** The heading selector property (`data-heading-selector`) allows you to list which heading levels you would like the component to pull into the component link list. By default, the component will include `h2` and `h3` headings.
 - **Root margin.** The root margin  property (`data-root-margin`) is a string that allows you to define the observable area. This set of values grows or shrinks the observable area from each side of the root element's bounding box before computing intersections. It can accept values similar to the CSS margin property, and can be percentages. By default, the in-page navigation component is set to `0px 0px 0px 0px`.
 - **Threshold.** The threshold property (`data-threshold`) determines how much of the observable section must be present in the observed area before the nav's item is set to current. The default is `1`, which means 100% of the observables must be in the observed section. You can set `data-threshold` to any integer between 0 and 1.
 

_components/in-page-navigation/guidance/usability.md

@@ -2,7 +2,7 @@
 
 - **Make it stand out.** Site visitors should be able to quickly and easily distinguish in-page navigation from other landmarks on the page. Include borders and well-defined link active states to clearly convey the utility and purpose of the section. Define a consistent width for the in-page navigation component that is sufficiently wide and does not change based on text length.
 
-- **Use language that matches section headings.** The text of the links displayed within the in-page navigation `aside` should match the heading text of the target sections. Our component scans the page for `h2` and `h3` elements within the `main` element, automatically creates the in-page navigation block, and dynamically inserts the text to match the section headings.
+- **Use language that matches section headings.** The text of the links displayed within the in-page navigation `aside` should match the heading text of the target sections. By default, the component scans the page for `h2` and `h3` elements within the `main` element, automatically creates the in-page navigation block, and dynamically inserts the text to match the section headings.
 
 - **Don't include the page `h1` in the navigation.** Each page should have a single `h1` to describe its contents. It would be redundant to include this heading level in the in-page navigation.
 

_components/in-page-navigation/guidance/when-to-consider-something-else.md

@@ -1,3 +1,3 @@
 - **Short pages.** For pages that require little or no scrolling, in-page navigation is not necessary.
-- **Unstructured content.** Pages that lack hierarchical structures (`h2` and `h3` elements in the `main`) cannot use the in-page navigation component.
+- **Unstructured content.** Pages that lack heading-based hierarchical structures cannot use the in-page navigation component.
 - **Infinite scrolling.** For pages that feature infinite scrolling, in-page navigation is neither a practical nor feasible feature.

_components/in-page-navigation/in-page-navigation.md

@@ -40,6 +40,9 @@ tags:
   - nav
 implementation:
   initProps:
+    - property: "`data-heading-selector`"
+      description: The list of header levels that should be included in the link list.
+      default: '`h2 h3`'
     - property: "`data-main-content-selector`"
       description: The element the component pulls headers from.
       default: '`<main>`'

_data/changelogs/component-in-page-navigation.yml

@@ -2,9 +2,17 @@ title: In-page navigation
 type: component
 changelogURL:
 items:
+  - date: NNNN-NN-NN
+    summary: Added the optional `data-heading-selector` attribute.
+    summaryAdditional: This attribute allows users to list the heading levels that should be included in the component link list.
+    affectsJavascript: true
+    affectsStyles: true
+    githubRepo: uswds
+    githubPr: 5444
+    versionUswds: N.N.N
   - date: 2023-08-23
     summary: Updated JavaScript to exclude headers that have a style of `display:none` or `visibility:hidden` from the component link list.
-    summaryAdditional: 
+    summaryAdditional:
     affectsJavascript: true
     githubRepo: uswds
     githubPr: 5393