uswds · szepeviktor · Dec 12, 2024 · Dec 12, 2024 · Dec 12, 2024 · szepeviktor
@@ -1,6 +1,6 @@
 # U.S. Web Design System documentation
 
-This repo includes code and documentation for the U.S. Web Design System website. For information on the USWDS components and codebase, please visit our [uswds](https://github.com/uswds/uswds) Github repo.
+This repo includes code and documentation for the U.S. Web Design System website. For information on the USWDS components and codebase, please visit our [uswds](https://github.com/uswds/uswds) GitHub repo.
 
 Note that this README includes steps to pull the latest version of USWDS into your local instance of the documentation.
 

@@ -17,7 +17,7 @@ tags:
   - footer
   - required
   - links
-  - indentifier
+  - identifier
   - logo
 changelog:
   key: component-identifier

@@ -2,7 +2,7 @@
 - **Omit labels with verbose content.** Aim for clear and crisp labels. Omit labels to save space or if the step names are too long to comfortably fit in the step indicator.
 - **Use the centered variant with centered content and headings.** The centered variant is designed to complement centered content and headings. If you have left-aligned content and headings, use the default alignment.
 - **Center the heading with utilities.** Use the `flex-justify-center` utility on `usa-step-indicator__header` to center the heading.
-- **Centered counters need narrower gaps and a thinner segment.** If you use a centered variant with counters, you should use a narrower gap (2px is a good starting point) to increase the continuity between segments. A narrower counter gap (again, 2px is a good starting point) can also improve legibility. Centered counters can also benefit from a thinner segment, as the centered variant focusses emphasis on the counter instead of the segment.
+- **Centered counters need narrower gaps and a thinner segment.** If you use a centered variant with counters, you should use a narrower gap (2px is a good starting point) to increase the continuity between segments. A narrower counter gap (again, 2px is a good starting point) can also improve legibility. Centered counters can also benefit from a thinner segment, as the centered variant focuses emphasis on the counter instead of the segment.
 - **Pending text should use gray.** Pending text should use the gray family that complements the background and the pending segment colors. Use warm grays with warm backgrounds and segments, and cool grays with cool backgrounds and segments.
 - **Pending segments can use gray or complete family.** Pending segments can use gray, just as with pending text, but they can also use a light grade of the complete color family.
 - **The current color can be a contrast color.** The current color can be in the same family as the complete color or it can be a contrast color that distinguishes itself from the complete color.

@@ -2,7 +2,7 @@
 - **Omit labels with verbose content.** Aim for clear and crisp labels. Omit labels to save space or if the step names are too long to comfortably fit in the step indicator.
 - **Use the centered variant with centered content and headings.** The centered variant is designed to complement centered content and headings. If you have left-aligned content and headings, use the default alignment.
 - **Center the heading with utilities.** Use the `flex-justify-center` utility on `usa-step-indicator__header` to center the heading.
-- **Centered counters need narrower gaps and a thinner segment.** If you use a centered variant with counters, you should use a narrower gap (2px is a good starting point) to increase the continuity between segments. A narrower counter gap (again, 2px is a good starting point) can also improve legibility. Centered counters can also benefit from a thinner segment, as the centered variant focusses emphasis on the counter instead of the segment.
+- **Centered counters need narrower gaps and a thinner segment.** If you use a centered variant with counters, you should use a narrower gap (2px is a good starting point) to increase the continuity between segments. A narrower counter gap (again, 2px is a good starting point) can also improve legibility. Centered counters can also benefit from a thinner segment, as the centered variant focuses emphasis on the counter instead of the segment.
 - **Pending text should use gray.** Pending text should use the gray family that complements the background and the pending segment colors. Use warm grays with warm backgrounds and segments, and cool grays with cool backgrounds and segments.
 - **Pending segments can use gray or complete family.** Pending segments can use gray, just as with pending text, but they can also use a light grade of the complete color family.
 - **The current color can be a contrast color.** The current color can be in the same family as the complete color or it can be a contrast color that distinguishes itself from the complete color.

@@ -80,7 +80,7 @@ The space around your content elements affects the relationship between these el
 - **Don't indent paragraphs, use whitespace before.** While most longform print design uses indented lines to distinguish paragraphs, it's more conventional on the web to use unindented paragraphs separated by whitespace.
 - **Use at least 1em of whitespace between paragraphs.** To properly separate paragraphs from one another, use the equivalent of one blank line of whitespace between them. Using more than 1.5em disturbs the flow of the text, and using less than 0.5em doesn't provide enough separation.
 - **Use at least 0.5em of whitespace between list items.** List items should also be separated by whitespace, but they need less space than paragraphs because the list item indicator also helps distinguish adjacent items.
-- **Headings should be closer to the text they introduce than the text that preceeds them.** It's important that headings are more visually connected to the text for which they're the heading than the text of the previous section to reduce ambiguity and cognitive dissonance. Use at least 1.5 times the amount of whitespace above the heading as below it.
+- **Headings should be closer to the text they introduce than the text that precedes them.** It's important that headings are more visually connected to the text for which they're the heading than the text of the previous section to reduce ambiguity and cognitive dissonance. Use at least 1.5 times the amount of whitespace above the heading as below it.
 - **Text should have sufficient margin on the left and right**. Running text requires right and left margin proportional to the width of the viewport. Use at least [1 unit]({{ site.baseurl }}/design-tokens/spacing-units/){:.token} of margin between the text and the edge of the viewport at mobile widths and at least [2 units]({{ site.baseurl }}/design-tokens/spacing-units/){:.token} on a tablet. Desktop widths can require as much as [4-5 units]({{ site.baseurl }}/design-tokens/spacing-units/){:.token} of minimum horizontal margin between the body of the text and any adjacent elements.
 
 ### Font style

@@ -59,7 +59,7 @@ test_items:
     version_tested: 3.8.1
     wcag_criterion: 1.3.2
   - summary: Keyboard navigates through all elements in identifier.
-    summary_additional: When you navigate through the identifer with a keyboard, you can interact with every element inside the identifier.
+    summary_additional: When you navigate through the identifier with a keyboard, you can interact with every element inside the identifier.
     test_status: pass
     test_type: keyboard
     version_tested: 3.8.1
@@ -96,7 +96,7 @@ test_items:
     version_tested: 3.8.1
     wcag_criterion: 1.1.1
   - summary: Screen reader announces identifier region.
-    summary_additional: When using a screen reader, you will hear "Region identifier" or "Agency identifer" when you reach the identifier region on the page.
+    summary_additional: When using a screen reader, you will hear "Region identifier" or "Agency identifier" when you reach the identifier region on the page.
     test_status: pass
     test_type: screen_reader
     version_tested: 3.8.1

@@ -31,7 +31,7 @@ test_items:
     version_tested: 3.8.0
     wcag_criterion: 1.4.4
 # Keyboard navigation tests
-  - summary: Text field is accesible via keyboard navigation.
+  - summary: Text field is accessible via keyboard navigation.
     summary_additional: Using only a keyboard, you can navigate to the text field, type in it, and navigate away from it.
     test_status: pass
     test_type: keyboard

@@ -15,6 +15,6 @@
   usage: 'a long, slower reading line'
 - token: 6
   value: 88ex
-  usage: 'an extra-long line sometimes useful for short text (less than 1 paragaph) or captions'
+  usage: 'an extra-long line sometimes useful for short text (less than 1 paragraph) or captions'
 - token: none
   value: none
@@ -16,7 +16,7 @@
   <a
     class="usa-button site-button-github margin-x-0 font-lang-sm"
     href="{{ site.repos[0].url }}"
-    onclick="ga('send', 'event', 'Viewed on Github', 'Clicked View on Github from inside site');"
+    onclick="ga('send', 'event', 'Viewed on GitHub', 'Clicked View on GitHub from inside site');"
   >
     {% include github-logo.svg %}
     <span class="text">View on GitHub</span>

@@ -1,5 +1,5 @@
 ---
-title: Select their perferred language
+title: Select their preferred language
 permalink: /patterns/select-language/
 redirect_from:
   - /select-language/

@@ -13,8 +13,8 @@ The design assets for the U.S. Web Design Standards have always been a great too
 Based on this experience, the team took a look at how frequently these design assets are downloaded and which formats are more likely to be used by digital service teams across the federal government. Here are a few of the highlights:
 
 * Adobe Illustrator Format - This has been downloaded over 2,000 times over the last year. Illustrator is also the most likely format to be used by digital service teams as the presence of Mac laptops in the federal government is estimated to only be 4%-5%.
-* Sketch Format - The Sketch sticker sheets have been downloaded over a 1,000 times, and while Sketch is a Mac only application, this is a signifiant level of use to justify continued support.
-* Omnigraffle - In the last year, the Omnigraffle format has only been dowloaded 335 times. Given the low number of downloads and the fact that Omnigraffle is another Mac only application, the team has decided to retire this sticker sheet.
+* Sketch Format - The Sketch sticker sheets have been downloaded over a 1,000 times, and while Sketch is a Mac only application, this is a significant level of use to justify continued support.
+* Omnigraffle - In the last year, the Omnigraffle format has only been downloaded 335 times. Given the low number of downloads and the fact that Omnigraffle is another Mac only application, the team has decided to retire this sticker sheet.
 
 ![Sticker Sheet Downloads]({{ site.baseurl }}/img/updates/Sticker_Sheet_Downloads.png)
 

@@ -15,7 +15,7 @@ For our 11th post in the series, we talked with Scott Weber, front-end developer
 
 **USWDS:** How did you hear about the U.S. Web Design System (USWDS)?
 
-**Scott Weber:** I’d been following the USWDS before starting work on the NSF project. So, when I was getting ready to build the site, which we knew was going to be on [Federalist](https://federalist.18f.gov/), using Github, the USWDS gave us a starting point for things we would have otherwise needed to develop from scratch, such as the grid, footer, navigation, etc. The USWDS gave us a place to start and saved us from having to reinvent the wheel.
+**Scott Weber:** I’d been following the USWDS before starting work on the NSF project. So, when I was getting ready to build the site, which we knew was going to be on [Federalist](https://federalist.18f.gov/), using GitHub, the USWDS gave us a starting point for things we would have otherwise needed to develop from scratch, such as the grid, footer, navigation, etc. The USWDS gave us a place to start and saved us from having to reinvent the wheel.
 
 **USWDS:** What does it mean for a developer to not have to start from scratch?
 

@@ -2,7 +2,9 @@
 title: Sanitized Combo Box content
 excerpt: "As of USWDS 2.12.1, the design system automatically sanitizes content passed into the Combo Box."
 category: About
-permalink: /security_updates/santized-combo-box-content/
+permalink: /security_updates/sanitized-combo-box-content/
+redirect_from:
+- /security_updates/santized-combo-box-content/
 tags:
 - security
 ---

@@ -460,7 +460,7 @@ utilities:
           </div>
           <div>
             <div class="position-sticky top-0 bg-gold padding-x-2 padding-y-1 text-bold text-ink display-flex flex-justify">Sticky Heading 2 <span class="utility-class text-normal">.position-sticky</span></div>
-            <p class="line-height-sans-6 padding-x-2">And he had a little small bull pup, that to look at him you'd think he wan's worth a cent, but to set around and look ornery, and lay for a chance to steal something. But as soon as money was up on him, he was a different dog; his underjaw'd begin to stick out like the fo'castle of a steamboat, and his teeth would uncover, and shine savage like the furnaces. And a dog might tackle him, and bully- rag him, and bite him, and throw him over his shoulder two or three times, and Andrew Jackson which was the name of the pup Andrew Jackson would never let on but what he was satisfied, and hadn't expected nothing else and the bets being doubled and doubled on the other side all the time, till the money was all up; and then all of a sudden he would grab that other dog jest by the j'int of his hind leg and freeze on it not chew, you understand, but only jest grip and hang on till they thronged up the sponge, if it was a year. Smiley always come out winner on that pup, till he harnessed a dog once that didn't have no hind legs, because they'd been sawed off by a circular saw, and when the thing had gone along far enough, and the money was all up, and he come to make a snatch for his pet bolt, he saw in a minute how he'd been imposed on, and how the other dog had him in the door, so to speak, and he 'peered sur- prised, and then he looked sorter discouraged-like, and didn't try no more to win the fight, and so he got shucked out bad. He give Smiley a look, as much as to say his heart was broke, and it was his fault, for putting up a dog that hadn't no hind legs for him to take bolt of, which was his main dependence in a fight, and then he limped off a piece and laid down and died. It was a good pup, was that Andrew Jackson, and would have made a name for hisself if he'd lived, for the stuff was in him, and he had genius I know it, because he hadn't had no opportunities to speak of, and it don't stand to reason that a dog could make such a fight as he could under them circumstances, if he hadn't no talent. It always makes me feel sorry when I think of that last fight of his'n, and the way it turned out.</p>
+            <p class="line-height-sans-6 padding-x-2">And he had a little small bull pup, that to look at him you'd think he wan's worth a cent, but to set around and look ornery, and lay for a chance to steal something. But as soon as money was up on him, he was a different dog; his underjaw'd begin to stick out like the fo'castle of a steamboat, and his teeth would uncover, and shine savage like the furnaces. And a dog might tackle him, and bully- rag him, and bite him, and throw him over his shoulder two or three times, and Andrew Jackson which was the name of the pup Andrew Jackson would never let on but what he was satisfied, and hadn't expected nothing else and the bets being doubled and doubled on the other side all the time, till the money was all up; and then all of a sudden he would grab that other dog jest by the j'int of his hind leg and freeze on it not chew, you understand, but only jest grip and hang on till they thronged up the sponge, if it was a year. Smiley always come out winner on that pup, till he harnessed a dog once that didn't have no hind legs, because they'd been sawed off by a circular saw, and when the thing had gone along far enough, and the money was all up, and he come to make a snatch for his pet bolt, he saw in a minute how he'd been imposed on, and how the other dog had him in the door, so to speak, and he 'peered surprised, and then he looked sorter discouraged-like, and didn't try no more to win the fight, and so he got shucked out bad. He give Smiley a look, as much as to say his heart was broke, and it was his fault, for putting up a dog that hadn't no hind legs for him to take bolt of, which was his main dependence in a fight, and then he limped off a piece and laid down and died. It was a good pup, was that Andrew Jackson, and would have made a name for hisself if he'd lived, for the stuff was in him, and he had genius I know it, because he hadn't had no opportunities to speak of, and it don't stand to reason that a dog could make such a fight as he could under them circumstances, if he hadn't no talent. It always makes me feel sorry when I think of that last fight of his'n, and the way it turned out.</p>
           </div>
           <div>
             <div class="position-sticky top-0 bg-yellow padding-x-2 padding-y-1 text-bold text-ink display-flex flex-justify">Sticky Heading 3 <span class="utility-class text-normal">.position-sticky</span></div>

@@ -691,7 +691,7 @@ utilities:
       {% for value in page.values.order reversed %}
         <div class="grid-col-auto order-{{ value.token }}">
           <div class="padding-x-1 padding-y-1 border border-secondary-light margin-y-1px display-flex flex-column flex-align-start">
-            <span class="font-lang-3xs text-red-warm-50v margin-bottom-2">intital: {{ forloop.index }}</span>
+            <span class="font-lang-3xs text-red-warm-50v margin-bottom-2">initial: {{ forloop.index }}</span>
             <span class="utility-class">.order-{{ value.token }}</span>
           </div>
         </div>

@@ -2527,7 +2527,7 @@ $theme-table-column-gap: 4;
 }
 
 // because any accordion__content inside of a bordered accordion get's
-// borders, we need to overide for this nested component preview.
+// borders, we need to override for this nested component preview.
 .site-component-preview
   .usa-accordion:not(.usa-accordion--bordered)
   .usa-accordion__content {

@@ -267,7 +267,7 @@ $site-secondary-nav-input-height: 38px;
   }
 }
 
-// Read website standards, Download, Github buttons
+// Read website standards, Download, GitHub buttons
 .site-cta-buttons {
   display: flex;
   flex-direction: column;

@@ -17,7 +17,7 @@ var calculateAnchorPosition = function (hash) {
   //start with the height of the sticky nav
   topOffset = $(".site-nav.sticky").first().outerHeight();
 
-  //subtract the diffence in padding between nav top and anchor
+  //subtract the difference in padding between nav top and anchor
   topOffset = topOffset - (anchorPadding - navPadding);
 
   //anchor should now align with first item inside nav

@@ -75,7 +75,7 @@ const copyOnClick = (event) => {
   labelVisual.textContent = "Copied!";
 
   // In order for consistent SR readouts, the text string must change
-  // Without changing, the SR will not consitently read the text on click
+  // Without changing, the SR will not consistently read the text on click
   if (labelSR.textContent == SR_SUCCESS_MESSAGE) {
     labelSR.textContent = SR_SUCCESS_MESSAGE_ALT;
   } else {