diff --git a/CHANGELOG.md b/CHANGELOG.md index 93ce7c1c..c49f0622 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,18 @@ -## 2.2.4 +## 3.0.0 + +### Breaking Changes + +- Updates USWDS from 2.0.3 to 2.9.0. Review [release notes](https://designsystem.digital.gov/about/releases/) for specific changes which may apply. Specific impactful changes include... + - The Tooltip component is now inherited from USWDS, newly introduced as of USWDS 2.8.0. [See component documentation](https://designsystem.digital.gov/components/tooltip/) for more information. The markup of this component is significantly different than that of the component previously implemented in the login.gov Design System. + - Due to a rounding precision fix, line-heights for text may appear larger than it had previously. + - Guidance for many components has been updated to improve accessibility and usability of markup. Neglecting to update this markup should not result in user-facing regressions, but you are recommended to update to improve end-user experience. Refer to the release notes and related component documentation for specifics: + - SVG images should include `role="img"`. + - Numeric fields should use `type="text" inputmode="numeric"` instead of `type="number"`. + - Search forms should assign `role="search"` to the form element. + - Banner should be rendered as a `section` element instead of a `div`, and include a descriptive `aria-label`. + - Footer and hero content should include a descriptive `aria-label`. + - Graphic list should use `h2` as a heading element instead of `h3`. +- "Official government website" banner text has been updated. Refer to [USWDS guidance](https://designsystem.digital.gov/components/banner/) for updated markup. ### Bug Fixes diff --git a/docs/_components/badges.md b/docs/_components/badges.md index 627ac8ef..d56ad8ee 100644 --- a/docs/_components/badges.md +++ b/docs/_components/badges.md @@ -14,7 +14,7 @@ The unphishable badge is used to indicate that an account is only using security {% capture example %}
- unphishable icon + unphishable icon Unphishable
{% endcapture %} @@ -26,7 +26,7 @@ A verfied account badge is used to indicate that an account has completed the id {% capture example %}
- verification icon + verification icon Verified Account
{% endcapture %} diff --git a/docs/_components/form-fields.md b/docs/_components/form-fields.md index 7653f48a..7d097154 100644 --- a/docs/_components/form-fields.md +++ b/docs/_components/form-fields.md @@ -41,18 +41,18 @@ Three text fields are the easiest way for users to enter most dates.
- +
- +
- +
- Example: 04 28 1986 + Example: 4 28 1986 {% endcapture %} {% include helpers/code-example.html code=example %} @@ -300,18 +300,18 @@ Follow the same pattern of applying `.usa-input--error` to the effected input an
- +
- +
- +
- Example: 04 28 1986 + Example: 4 28 1986 Error message text. {% endcapture %} diff --git a/docs/_components/tooltips.md b/docs/_components/tooltips.md deleted file mode 100644 index 7eb5bf6d..00000000 --- a/docs/_components/tooltips.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Tooltips -lead: > - Tooltips are used to display help text to the user in an unobtrusive way. ---- - -Tooltips can be useful means to display information to a user, most typically in forms, without adding clutter to the visual presentation of your user experience. - -**Before using a tooltip,** it is important to consider if the information the tooltip is intended to convey makes more sense as a label for a given form field or section. - -**All tooltips must include a `tabindex` and `aria-label` property.** This ensures that the tooltips display correctly to the user and can be triggered by a mouse, keyboard, or assistive device. Tooltips can be triggered by hovering when using a mouse, tapping in the case of a mobile device, or focusing by tab key. - -## Using the tooltip with an icon - -{% capture example %} - - Help icon - -{% endcapture %} -{% include helpers/code-example.html code=example %} - -## Large tooltips - -Add the class `.usa-tooltip--large` to enhance! - -{% capture example %} -
- This element has a lot of tooltip text. -
-{% endcapture %} -{% include helpers/code-example.html code=example %} - -## Positioning tooltips - -As long as the proper classes are applied, any HTML element can be decorated with a tooltip. - -{% capture example %} -
- This element has a tooltip above it. -
-{% endcapture %} -{% include helpers/code-example.html code=example %} - -{% capture example %} -
- This element has a tooltip to the left, to the left. -
-{% endcapture %} -{% include helpers/code-example.html code=example %} - -{% capture example %} -
- This element has a tooltip below it. -
-{% endcapture %} -{% include helpers/code-example.html code=example %} - -{% capture example %} -
- This element has a tooltip to the right of it. -
-{% endcapture %} -{% include helpers/code-example.html code=example %} diff --git a/docs/_includes/banner.html b/docs/_includes/banner.html index e6f29c80..24230f85 100644 --- a/docs/_includes/banner.html +++ b/docs/_includes/banner.html @@ -1,6 +1,6 @@ Skip to main content -
+
@@ -20,26 +20,28 @@
- Dot gov + Dot gov

- The .gov means it’s official. + Official websites use .gov
- Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site. + A .gov website belongs to an official government organization in the United States.

- Https + Https

- The site is secure. + Secure .gov websites use HTTPS
- The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely. + A lock ( + +) or https:// means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.

-
+
diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html index 130da8c7..5aaff9ea 100644 --- a/docs/_includes/footer.html +++ b/docs/_includes/footer.html @@ -13,7 +13,7 @@