Merge pull request #6054 from department-of-veterans-affairs/content-instructions-update

Adds latest metrics, fixes content for new component, fixes skill, and content prompt

Author: humancompanion-usds

.claude/skills/mermaid-charts/SKILL.md

@@ -1,3 +1,15 @@
+---
+name: mermaid-charts
+description: Creates and standardizes Mermaid decision flowcharts in VA Design System documentation, including templates, node types, accessibility alternatives, and the standard Jekyll include pattern.
+triggers:
+  - mermaid chart
+  - decision flowchart
+  - mermaid diagram
+  - flowchart TD
+  - create a chart
+  - add a chart
+---
+
 # SKILL: Mermaid Chart Implementation
 
 ## Overview

.github/prompts/Guidance-follow-content-style-guide.prompt.md

@@ -31,8 +31,6 @@ This includes specific guidance on:
 
 When the changed files include component documentation in `src/_components/`, also apply these standards:
 
-[component-guidance.instructions.md](../instructions/component-guidance.instructions.md)
-
 [component-guidance-structure.instructions.md](../instructions/component-guidance-structure.instructions.md)
 
 ## Review Process

src/_about/metrics/index.html

@@ -752,9 +752,13 @@ <h2 id="monthly-analytics-heading">Monthly Analytics</h2>
       <h3>Top 25 Pages</h3>
       <p>The most visited pages of design.va.gov</p>
       <div class="data-freshness" id="monthly-analytics-data-freshness">
-        <small>Data from January 2026 Google Analytics report</small>
+        <small>Data from March 2026 Google Analytics report</small>
       </div>
       <div class="monthly-reports-static">
+        <div class="report-item">
+          <h4>March 2026</h4>
+          <img src="{{ site.baseurl }}/assets/img/metrics/looker-report-2026-03.png" alt="Bar chart showing the top 25 most visited pages on design.va.gov for March 2026" />
+        </div>
         <div class="report-item">
           <h4>January 2026</h4>
           <img src="{{ site.baseurl }}/assets/img/metrics/looker-report-2026-01.png" alt="Bar chart showing the top 25 most visited pages on design.va.gov for January 2026" />

src/_components/details.md

@@ -37,7 +37,7 @@ Use a reduced width when you need Details to take up less space on the page.
 * **Revealing helpful background information.** Use this component when you have additional information about an application, process, or form step that isn't critical. Use this component in instances where a more prominent [Alert]({{ site.baseurl }}/components/alert) wouldn't be appropriate.
 * **Explaining the impact of a choice.** If a user's answer will significantly affect their results or next steps, use Details to put that explanation right next to the relevant field.
 * **Information closely tied to an input.** Use this component over an [Accordion]({{ site.baseurl }}/components/accordion) when the content is closely tied to a particular message or input on the screen. If the content is only loosely related, use an Accordion instead.
-* **Clarifying a form question.** If a form question needs clarification, and that clarification is brief, use Details. The lighter design doesn't interrupt the flow of the form. These can also serve as an alternative when accordions feel too heavy or when hint text isn't enough. Be sure to review the [hint text guidance]({{ site.baseurl }}/components/form/label#hint-text) for more information.
+* **Clarifying a form question.** If a form question needs clarification, and that clarification is brief, use Details. The lighter design doesn't interrupt the flow of the form. These can also serve as an alternative when Accordions feel too heavy or when hint text isn't enough. Be sure to review the [hint text guidance]({{ site.baseurl }}/components/form/label#hint-text) for more information.
 * **Content that can be organized under the current heading.** If you have additional content that provides context and makes sense under the same heading as the content nearby.
 * **Information not applicable to all.** The Details component can hide information that doesn't apply to all users.
 
@@ -59,14 +59,14 @@ The Details component uses native HTML `<details>` and `<summary>` elements, whi
 
 * **Searchable and discoverable content.** Browser search (Ctrl+F or Cmd+F) can find text inside collapsed Details, and search engines can index the content for better search engine optimization (SEO).
 * **Better performance and reliability.** This component requires no JavaScript for basic functionality, improving load times and ensuring content works even when JavaScript fails.
-* **Enhanced accessibility.** Native semantic meaning provides better assistive technology support without additional ARIA attributes, following web standards universally supported across browsers.
+* **Enhanced accessibility.** Native semantic meaning provides better assistive technology support without additional Accessible Rich Internet Applications (ARIA) attributes, following web standards universally supported across browsers.
 
 ### Placement
 
 You can use Details in these places:
 
 * After a header (h2, h3, or h4) or paragraph to provide supplementary information or answer a common question
-* Within a [Process list]({{ site.baseurl }}/components/process-list) to shorten the length of content within a step
+* Within a [Process List]({{ site.baseurl }}/components/process-list) to shorten the length of content within a step
 * Within, or at the end, of a [Form]({{ site.baseurl }}/components/form/label#with-details) to provide additional help text
 * When you need to help users understand a particular choice
 
@@ -82,7 +82,7 @@ You can use Details in these places:
 
 ## Accessibility considerations
 
-* **Wrap content in HTML elements.** Place all text content inside `va-details` within an appropriate HTML element such as `<p>`, `<span>`, or `<div>`. Some screen readers, particularly NVDA, may ignore unwrapped plain text. For example, use `<p>This is the content.</p>` instead of placing text directly inside the component without a wrapper element.
+* **Wrap content in HTML elements.** Place all text content inside `va-details` within an appropriate HTML element such as `<p>`, `<span>`, or `<div>`. Some screen readers, particularly NonVisual Desktop Access (NVDA), may ignore unwrapped plain text. For example, use `<p>This is the content.</p>` instead of placing text directly inside the component without a wrapper element.
 * **Don't add ARIA roles or state attributes.** The Details component uses the `<details>` HTML element that exposes expanded/collapsed state and interactive behavior natively. Adding any `role="button"` or `aria-expanded` is redundant and can create conflicting announcements in assistive technology.
 * **Native keyboard interaction.** Users can tab to the component and toggle it open or closed with Enter or Space. If the component contains interactive elements, the next Tab keypress moves focus to those elements.