Merge branch 'main' into al-audit-settings-fix

_components/date-picker/guidance/accessibility.md

@@ -1,2 +1,8 @@
 - **Customize form controls accessibly.** If you customize this component, ensure that it continues to meet the [accessibility requirements that apply to all form controls]({{ site.baseurl }}/components/form).
-- **Avoid auto-submission.** Don’t use JavaScript to automatically submit the form (or do anything else) when an option is selected. Auto-submission disrupts screen readers because they select each option as they read them.
+- **Avoid auto-submission.** Don’t use JavaScript to automatically submit the form (or do anything else) when an option is selected. Auto-submission disrupts screen readers because they select each option as they read them.
+- **Instructions for keyboard navigation** You can navigate this component using the following commands (Mac-equivalent commands are in parentheses):
+  - Days use left and right arrows
+  - Weeks use up and down arrows
+  - Months by using <kbd>page up</kbd> (<kbd>fn + up arrow</kbd>) and <kbd>page down</kbd> (<kbd>fn + down arrow</kbd>)
+  - Years by using <kbd>shift + page up</kbd> (<kbd>shift + fn + up arrow</kbd>) and <kbd>shift + page down</kbd> (<kbd>shift + fn + down arrow</kbd>)
+  - <kbd>Home</kbd> (<kbd>fn + left arrow</kbd>) and <kbd>End</kbd> (<kbd>fn + right arrow</kbd>) keys navigate to the beginning and end of a week

_components/icon/guidance/accessibility.md

@@ -1,4 +1,4 @@
-- **Hide decorative icons from screen readers.** Use the `aria-hidden="true"` and `role="img"` if the icon is redundant and used solely as visual progressive enhancement.
+- **Hide decorative icons from screen readers.** Use the `aria-hidden="true"` and `role="img"` attributes if the icon is redundant and used solely as visual progressive enhancement as in the following code:
 ```html
 <a href="https://twitter.com/uswds">
   <svg class="usa-icon" aria-hidden="true" role="img">
@@ -7,7 +7,7 @@
   USWDS' Twitter account
 </a>
 ```
-- **Provide descriptive text if a standalone icon has semantic meaning.** If you need to expose an icon to screen readers, remove the `aria-hidden="true"` attribute and add a `aria-labelledby` attribute with a value that matches the `id` of a `<title>` element added inside the svg.
+- **Provide descriptive text if a standalone icon has semantic meaning.** If you need to expose an icon to screen readers, remove the `aria-hidden="true"` attribute and add an `aria-labelledby` attribute with a value that matches the `id` of a `<title>` element added inside the SVG as in the following code:
 ```html
 <a href="https://twitter.com/uswds">
   <svg aria-labelledby="twitter-title" role="img">
@@ -16,4 +16,4 @@
   </svg>
 </a>
 ```
-- **Place icons inside links.** If icons accompany a text link, place the icon inside the link to prevent the screen reader from announcing the link twice.
+- **Place icons inside links.** If icons accompany a text link, place the icon inside the link to prevent the screen reader from announcing the link twice.

_components/icon/guidance/implementation.md

@@ -2,4 +2,4 @@
 - **Active icons are found in `dist/img/usa-icons`.** The icons in this directory will be packaged into an SVG sprite. The complete set of available icons are located in two directories: `dist/img/material-icons` and `dist/img/uswds-icons`. Copy icons into a `usa-icons` directory within your project images directory, and rebuild the SVG sprite using [uswds-compile](https://github.com/uswds/uswds-compile/).
 - **Using color in icons.** Icons use `currentColor`, so the color of the icon will be the text color of its parent element. Change colors with the [color utility](https://designsystem.digital.gov/utilities/color/).
 - **Relative to font size.** By default, icons will scale with font size. If you want to specify an icon size, use one of the component’s size variants.
-- **Icon names are identifiers.** To use an individual, simply change the identifier after the pound sign in the sprite path to the icon name. For example, to use the `accessibility_new` icon, the path will be `<use xlink:href="/path/to/sprite.svg#accessibility_new">` or to use the `info` icon, the path will be `<use xlink:href="/path/to/sprite.svg#info">`.
+- **Icon names are identifiers.** To use an individual, simply change the identifier after the pound sign in the sprite path to the icon name. For example, to use the `accessibility_new` icon, the path will be `<use xlink:href="/path/to/sprite.svg#accessibility_new">`, or to use the `info` icon, the path will be `<use xlink:href="/path/to/sprite.svg#info">`.

_components/icon/guidance/when-to-use.md

@@ -1,3 +1,3 @@
-- **To draw attention to actions.** Icons are helpful when combined with text to inform users about performing an action. The icon should directly relate to the text it accompanies.
-- **To help readers find key information.** Use icons as scannable, easy-to-understand visual indicators for key information like a phone number or email address.
-- **To enhance an actionable target.** Icons make great touch or click targets. Use an icon for common actions like opening a menu or sharing an article.
+- **To draw attention to actions.** Icons are helpful, when combined with text, to inform users about performing an action. The icon should directly relate to the text it accompanies.
+- **To help readers find key information.** Use icons as scannable, easy-to-understand visual indicators for key information, like a phone number or email address.
+- **To enhance an actionable target.** Icons make great touch or click targets. Use an icon for common actions, like opening a menu or sharing an article.

_components/prose/guidance/implementation.md

@@ -4,6 +4,6 @@
   - `p`
   - `ul` and `ol`, _plus_ child `li`
   - `table`, _plus_ child `thead`, `th`, `td`, and `caption`
-- You can change the measure of elements styled with `usa-prose` in `_uswds-theme-typography.scss` with the following variables. Each accepts a measure token:
+- Customize line-length by changing the value of `$theme-text-measure` and `$theme-lead-measure` in your [USWDS settings configuration]({{ site.baseurl }}/documentation/settings). Each setting accepts a [measure token]({{ site.baseurl }}/design-tokens/typesetting/measure/). 
   - `$theme-text-measure`
-  - `$theme-lead-measure`
+  - `$theme-lead-measure`

_config.yml

@@ -2,7 +2,7 @@
 title: U.S. Web Design System (USWDS)
 description: USWDS makes it easier to build accessible, mobile-friendly government websites.
 google_analytics_ua: UA-48605964-43
-uswds_version: 3.3.0
+uswds_version: 3.4.1
 uswds_email: uswds@gsa.gov
 federalist_base: "https://federalist-3b6ba08e-0df4-44c9-ac73-6fc193b0e19c.sites.pages.cloud.gov/preview/uswds/uswds"
 federalist_component_preview: "iframe.html?id="
@@ -41,7 +41,7 @@ jekyll_get:
     json: "https://api.github.com/repos/uswds/uswds/contents/SECURITY.md"
     decode_content: true
   - data: hash
-    json: "https://api.github.com/repos/uswds/uswds/contents/security/uswds-3.3.0-zip-hash.txt?ref=main"
+    json: "https://api.github.com/repos/uswds/uswds/contents/security/uswds-3.4.1-zip-hash.txt?ref=main"
     decode_content: true
 
 repos:

_data/changelogs/_CHANGELOG-README.md

@@ -17,6 +17,7 @@
 | affectsContent | Change affects content in the component itself | yes | boolean | true, false | yes |
 | affectsGuidance | Change affects component guidance| yes | boolean | true, false | yes |
 | affectsAssets | Change affects assets related to a component, like images | yes | boolean | true, false | yes |
+| affectsSettings | Change affects settings | yes | boolean | true, false | yes |
 | githubPr | Pull request number | no | number| N/A | yes |
 | githubRepo | Pull request repo name | no | string| uswds, uswds-site | yes |
 | versionUswds | USWDS Version Number | no | number| N/A | yes |

_data/changelogs/component-alert.yml

@@ -2,6 +2,13 @@ title: Alert
 type: component
 changelogURL:
 items:
+  - date: 2023-03-09
+    summary: Updated padding settings to accept any valid spacing token.
+    summaryAdditional:
+    affectsStyles: true
+    githubPr: 5076
+    githubRepo: uswds
+    versionUswds: 3.4.0
   - date: 2022-10-19
     summary: Updated the alignment of alert content to visually match banner content.
     summaryAdditional: The site alert component was also updated.
@@ -47,4 +54,4 @@ items:
     affectsStyles: true
     githubPr: 4079
     githubRepo: uswds
-    versionUswds: 2.11.0
+    versionUswds: 2.11.0

_data/changelogs/component-banner.yml

@@ -2,6 +2,27 @@ title: Banner
 type: component
 changelogURL:
 items:
+  - date: 2023-03-09
+    summary: Improved display of focus outline on mobile.
+    summaryAdditional: Now the focus outline is visible all around the banner on mobile devices.
+    affectsStyles: true
+    githubPr: 5013
+    githubRepo: uswds
+    versionUswds: 3.4.0
+  - date: 2023-03-09
+    summary: Updated padding settings to accept any valid spacing token.
+    summaryAdditional:
+    affectsStyles: true
+    githubPr: 5076
+    githubRepo: uswds
+    versionUswds: 3.4.0
+  - date: 2023-03-09
+    summary: Removed grid dependency from Banner.
+    summaryAdditional: Banner no longer needs the `usa-layout-grid` package resulting in a much smaller package size.
+    affectsStyles: true
+    githubPr: 5000
+    githubRepo: uswds
+    versionUswds: 3.4.0
   - date: 2022-10-09
     summary: Updated the aria-label in English versions of banner.
     summaryAdditional: When read out on a screen reader, the statement "An official website of the United States government" can sound like "Unofficial website of the United States government". To minimize confusion, we updated the component's `aria-label` to instead read "Official website of the United States government".

_data/changelogs/component-date-picker.yml

@@ -2,6 +2,13 @@ title: Date picker
 type: component
 changelogURL:
 items:
+  - date: 2023-03-09
+    summary: Updated documentation for accessibility guidance.
+    summaryAdditional: Added instructions for keyboard navigation.
+    affectsAccessibility:
+    affectsStyles:
+    githubPr: 1695
+    githubRepo: uswds-site
   - date: 2022-08-05
     summary: Styled aria-disabled to match disabled.
     summaryAdditional: Now disabled styling is applied whether you use `disabled` (disabled and hidden from screen readers) or `aria-disabled` (disabled and visible to screen readers).
@@ -51,7 +58,6 @@ items:
     githubPr: 4610
     githubRepo: uswds
     versionUswds: 2.13.3
-    affectsAccessibility: true
   - date: 2022-01-20
     summary: Fixed date picker input bug in Safari.
     summaryAdditional: We fixed a bug where date picker selections would not propagate into the input field in Safari.

_data/changelogs/component-footer.yml

@@ -2,6 +2,15 @@ title: Footer
 type: component
 changelogURL:
 items:
+  - date: 2023-03-09
+    summary: Footer now accepts any heading level for primary link headers.
+    summaryAdditional: Use any heading level for `.usa-footer__primary-link` without it reverting to an `h4` when the JavaScript rebuilds the element for mobile.
+    affectsAccessibility: true
+    affectsJavascript: true
+    affectsMarkup: true
+    githubPr: 5044
+    githubRepo: uswds
+    versionUswds: 3.4.0
   - date: 2022-08-29
     summary: Added documentation for `$theme-footer-max-width`.
     affectsGuidance: true

_data/changelogs/component-form.yml

@@ -2,6 +2,14 @@ title: Form
 type: component
 changelogURL:
 items:
+  - date: 2023-03-13
+    summary: Fixed invisible link text for links styled as buttons within forms.
+    summaryAdditional: Now link text does not match the primary button color when nested inside of a form and the `usa-button` class is present.
+    isBreaking: false
+    affectsStyles: true
+    githubPr: 5112
+    githubRepo: uswds
+    versionUswds: 3.4.1
   - date: 2022-04-28
     summary: Updated to Sass module syntax and new package structure.
     isBreaking: true
@@ -10,4 +18,4 @@ items:
     affectsStyles: true
     githubPr: 4656
     githubRepo: uswds
-    versionUswds: 3.0.0
+    versionUswds: 3.0.0

_data/changelogs/component-header.yml

@@ -2,6 +2,31 @@ title: Header
 type: component
 changelogURL:
 items:
+  - date: 2023-03-13
+    summary: Logo text width setting now works as expected.
+    summaryAdditional: Now the design system respects the value passed to `$theme-header-logo-text-width`.
+    isBreaking: false
+    affectsStyles: true
+    githubPr: 5008
+    githubRepo: uswds
+    versionUswds: 3.4.1
+  - date: 2023-03-09
+    summary: Secondary nav is now read properly on screen readers.
+    summaryAdditional: The separator between nav elements is no longer read on screen readers.
+    isBreaking: false
+    affectsAccessibility: true
+    affectsStyles: true
+    githubPr: 4963
+    githubRepo: uswds
+    versionUswds: 3.4.0
+  - date: 2023-03-09
+    summary: Allow full-page width for header.
+    summaryAdditional: You can now set a value of `"none"` for any `max-width` setting, including `$theme-header-max-width`.
+    isBreaking: false
+    affectsStyles: true
+    githubPr: 5072
+    githubRepo: uswds
+    versionUswds: 3.4.0
   - date: 2022-08-05
     summary: Added `type="button"` to all non-form buttons to prevent default submit behaviors.
     summaryAdditional: This allowed us to remove `preventDefault()` from the relevant component JavaScript.

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

@@ -2,6 +2,16 @@ title: In-page navigation
 type: component
 changelogURL:
 items:
+  - date: 2023-03-13
+    summary: URL in address bar is updated when navigating component.
+    summaryAdditional: Users can now see the proper anchor link in the address bar when navigating from the in-page navigation.
+    affectsGuidance:
+    affectsJavascript: true
+    affectsMarkup:
+    affectsStyles: true
+    githubRepo: uswds
+    githubPr: 5170
+    versionUswds: 3.4.1
   - date: 2022-11-14
     summary: Component released.
     affectsGuidance: true

_data/changelogs/component-link.yml

@@ -2,6 +2,12 @@ title: Link
 type: component
 changelogURL:
 items:
+- date: 2023-03-09
+  summary:	External link icons and link text now wrap as expected.
+  affectsStyles: true
+  githubPr: 5046
+  githubRepo: uswds
+  versionUswds: 3.4.0
 - date: 2022-04-28
   summary: Updated to Sass module syntax and new package structure.
   isBreaking: true

_data/changelogs/component-modal.yml

@@ -2,6 +2,14 @@ title: Modal
 type: component
 changelogURL:
 items:
+- date: 2023-03-09
+  summary: Fixed the display of interactive form elements (like Date Picker) in modal windows.
+  summaryAdditional: Now any element in a modal should work as expected.
+  isBreaking: false
+  affectsJavascript: true
+  githubPr: 5049
+  githubRepo: uswds
+  versionUswds: 3.4.0
 - date: 2022-08-05
   summary: Styled aria-disabled to match disabled.
   summaryAdditional: Now disabled styling is applied whether you use `disabled` (disabled and hidden from screen readers) or `aria-disabled` (disabled and visible to screen readers).

_data/changelogs/component-site-alert.yml

@@ -2,6 +2,13 @@ title: Site alert
 type: component
 changelogURL:
 items:
+  - date: 2023-03-09
+    summary: Updated padding settings to accept any valid spacing token.
+    summaryAdditional:
+    affectsStyles: true
+    githubPr: 5076
+    githubRepo: uswds
+    versionUswds: 3.4.0
   - date: 2022-09-26
     summary: Added guidance for using ARIA roles and ARIA labels.
     affectsGuidance: true

_data/changelogs/component-step-indicator.yml

@@ -4,6 +4,16 @@ type: component
 changelogURL:
 
 items:
+  # 3.4.0 release
+  - date: 2023-03-09
+    summary: Improved contrast on pending items.
+    summaryAdditional: Graphical elements related to pending items now meet accessibility standards for contrast ratio.
+    isBreaking: false
+    affectsAccessibility: true
+    affectsStyles: true
+    githubPr: 5048
+    githubRepo: uswds
+    versionUswds: 3.4.0
   # 3.0 release
   - date: 2022-04-28
     summary: Updated to Sass module syntax and new package structure.

_data/changelogs/component-typography.yml

@@ -4,6 +4,20 @@ type: component
 changelogURL:
 
 items:
+  # 3.4.0 release
+  - date: 2023-03-09
+    summary: Use only `woff2` in our `@font-face` declarations.
+    summaryAdditional: Since modern browsers only need the `woff2` font format, we now only output `woff2` fonts in our `@font-face` rules. If you need `woff` and `ttf` for IE11 compatibility, set `$theme-font-browser-compatibility` to `true` in settings.
+    affectsAccessibility:
+    affectsAssets:
+    affectsSettings: true
+    affectsGuidance: true
+    affectsJavascript:
+    affectsMarkup:
+    affectsStyles:
+    githubPr: 5108
+    githubRepo: uswds
+    versionUswds: 3.4.0
   # 3.0 release
   - date: 2022-04-28
     summary: Updated to Sass module syntax and new package structure.

_data/changelogs/docs-implementations.yml

@@ -2,6 +2,18 @@ title: Implementations
 type: documentation
 changelogURL:
 items:
+  - date: 2023-03-09
+    summary: Added entry for "sam.gov" implementations.
+    summaryAdditional:
+    isBreaking:
+    affectsAccessibility:
+    affectsAssets:
+    affectsGuidance: true
+    affectsJavascript:
+    affectsMarkup:
+    affectsStyles:
+    githubPr: 1714
+    githubRepo: uswds-site
   - date: 2022-10-11
     summary: Added entry for "ngx-uswds".
     summaryAdditional:

_data/changelogs/docs-settings.yml

@@ -2,17 +2,38 @@ title: Settings
 type: utility
 changelogURL:
 items:
-  - date: 2023-03-08
+  - date: 2023-03-20
     summary: Updated settings information to match what is found in USWDS 3.3.0.
     summaryAdditional:
     affectsAccessibility:
     affectsAssets:
+    githubPr: 2016
+    githubRepo: uswds-site
+  - date: 2023-03-09
+    summary: Added `$theme-font-browser-compatibility` setting.
+    summaryAdditional: We now only output `woff2` fonts in our `@font-face` rules. If you need `woff` and `ttf` for IE11 compatibility, set this new setting to `true`.
+    affectsAccessibility:
+    affectsAssets:
+    affectsSettings: true
     affectsGuidance: true
     affectsJavascript:
     affectsMarkup:
     affectsStyles:
-    githubPr: 2016
-    githubRepo: uswds-site
+    githubPr: 5108
+    githubRepo: uswds
+    versionUswds: 3.4.0
+  - date: 2023-03-09
+    summary: Removed `woff` and `ttf` file format requirements from custom font source settings.
+    summaryAdditional:
+    affectsAccessibility:
+    affectsAssets: true
+    affectsGuidance: true
+    affectsJavascript:
+    affectsMarkup:
+    affectsStyles:
+    githubPr: 5108
+    githubRepo: uswds
+    versionUswds: 3.4.0
   - date: 2022-09-16
     summary: Fixed typos in `primary-vivid` and `secondary-vivid` variable names.
     summaryAdditional: