Resolving conflict.

.github/ISSUE_TEMPLATE/DST-component_design.md

@@ -3,7 +3,7 @@ name: "DST - Component design"
 about: INTERNAL DST USE ONLY
 title: "[component name] - Design"
 labels: platform-design-system-team
-assignees: babsdenney, LillyBoot
+assignees: babsdenney, danbrady, lwwright7
 
 ---
 
@@ -27,8 +27,8 @@ If this is a pattern or component that is already in existence, conduct a small-
 - [ ] Conduct small audit if necessary (if component already exists and we are building a new version)
 - [ ] Review DST backlog for outstanding design issues with this component, if necessary (if this component already exists and we are building a new version)
 - [ ] Create designs for component
-- [ ] Review designs with PO and/or DSC
-- [ ] Review designs with an accessibility specialist
+- [ ] Review designs with PO and DST designers 
+- [ ] Review designs with developers and accessibility specialist
 - [ ] Review designs with DST members (Carol can help schedule this)
 - [ ] Address any comments from reviews, if necessary
 - [ ] Comment on this ticket with any accessibility considerations engineers may need to know
@@ -37,6 +37,6 @@ If this is a pattern or component that is already in existence, conduct a small-
 
 ## Acceptance Criteria
 - [ ] Component design is complete and has been reviewed
-- [ ] Accessibility considerations have been added to this ticket, if necessary
+- [ ] Accessibility and development considerations have been added to this ticket, if necessary
 - [ ] Content specifications have been added to this ticket, if necessary
 - [ ] Link to design has been added to this ticket and shared in Slack

.gitignore

@@ -9,7 +9,6 @@ tmp_remote_assets
 src/.jekyll-cache
 src/assets/stylesheets/component-library.css
 src/formation.min.css
-src/img
 src/vendor
 src/_data/component-docs.json
 src/_includes/react

package.json

@@ -26,7 +26,7 @@
   },
   "homepage": "https://github.com/department-of-veterans-affairs/vets-design-system-documentation#readme",
   "devDependencies": {
-    "@department-of-veterans-affairs/component-library": "^38.0.4",
+    "@department-of-veterans-affairs/component-library": "^40.0.0",
     "gulp": "^4.0.2",
     "gulp-clean": "^0.4.0",
     "gulp-rename": "^2.0.0",

src/_about/developers/using-web-components.md

@@ -226,11 +226,11 @@ Here is a list of each Web Component and the migration available:
 Font Awesome icons will be deprecated in late-May 2024 in favor of the `va-icon` web component which uses USWDS icons. USWDS icons are a combination of Material Icons and [custom icons](https://github.com/department-of-veterans-affairs/dst-uswds-compile/tree/main/assets/icons). A searchable set can be viewed on the [USWDS Icon page](https://designsystem.digital.gov/components/icon/).
 
 ### Quick References
+- [Icon Name Mapping](https://design.va.gov/foundation/icons)
 - [va-icon on Storybook](https://design.va.gov/storybook/?path=/docs/uswds-va-icon--default)
-- [USWDS Icon list](https://designsystem.digital.gov/components/icon/)
 - Slack channel: `#platform-design-system`
 
-### ESLint Auto-Migration
+<!-- ### ESLint Auto-Migration
 
 Places that Font Awesome classes are used in vets-website will be flagged by an ESLint rule that also includes an auto-fix option:
 
@@ -242,12 +242,11 @@ This will convert the Font Awesome icon to the `va-icon` web component. Entering
 
 Once selected, the fixer will convert the Font Awesome icon to the `va-icon` web component:
 
-
 {% include component-example.html alt="The completed fixer results that show va-icon web component with mapping properties" file="/images/icon-eslint-step-3.png" caption="The converted Font Awesome element to the va-icon web component" %}
 
 After this auto-fix completes, you will need to update the <strong>icon</strong> value as well as visually confirm the <strong>size</strong> and if any custom CSS styles are still applicable.
 
-To migrate from Font Awesome to the web component without using the ESLint migration rule, reference the [Storybook examples](https://design.va.gov/storybook/?path=/docs/uswds-va-icon--default).
+To migrate from Font Awesome to the web component without using the ESLint migration rule, reference the [icon name mapping](https://design.va.gov/foundation/icons) tables as well as the web component's [Storybook](https://design.va.gov/storybook/?path=/docs/uswds-va-icon--default) page. -->
 
 ### The va-icon Web Component API
 
@@ -263,8 +262,7 @@ Examples and details for the va-icon web component can be found on [Storybook](h
   - 8: 64px
   - 9: 72px
 - <strong>srtext</strong>: Screen-reader text if the icon has semantic meaning and is not purely decorative
-- <strong>color</strong>: The fill color of the icon (coming soon)
 
 ### Mapping Icon Names
 
-Icon names can be referenced on [Storybook](https://design.va.gov/storybook/?path=/docs/uswds-va-icon--default), the [USWDS Icon page](https://designsystem.digital.gov/components/icon/), or reach out in the <br/>`#platform-design-system` Slack channel for help deciding on a mapping name.
+Icon name mapping from Font Awesome to USWDS can be found on the [Icons Foundation page](https://design.va.gov/foundation/icons). Icon names can also be referenced on [Storybook](https://design.va.gov/storybook/?path=/docs/uswds-va-icon--default) or the [USWDS Icon page](https://designsystem.digital.gov/components/icon/).

src/_about/whats-new.md

@@ -25,6 +25,48 @@ title: What’s new?
   </div>
 </va-alert>
 
+## April 2024
+The team continued to synch to USWDS v3 and updated and fixed v3 components while the Figma Library continued to be built out. 
+
+### New features and compopnents
+* Icon Button Component (#2641)
+* Formation Deprecation - Add 768px Breakpoint to CSS Library (#2533)
+* Conversion to USWDS v3 Borderless table component (#1860)
+
+### Updated components and bug fixes
+* [Alert] - Remove background-only prop from Alert In Figma (#2394)
+* Review & submit - fix accordion error styling (#77064)
+* Injected Header - Add eslint warning & inline comments for React Modals that should not be touched (#2541)
+* Remove V1 Memorable Date from Component Library and Storybook (#2660)
+* Search Typeahead component does not close as expected when the component loads with a value prefilled (#2676)
+* Formation Deprecation - Typography base size migration QA vets-website, content-build and vagov-content (#2525)
+* Formation Deprecation - Typography base size migration QA component-library (#2566) 
+* Rename medium-mobile breakpoint to tablet (#2679)
+* va-summary-box should require that a header be present (#2557)
+* Update components section in Storybook(#2589)
+* Update remaining Formation color variables to their css-library counterparts (#79489)
+* Review & submit - fix accordion error styling(#77064)
+* Update remaining Formation color variables to their css-library counterparts (#79489)
+* Formation Deprecation - Migrate font settings from Formation to CSS Library (#2537) 
+* Remove Font Awesome icon overrides in USWDS components (#2577) 
+
+### Figma Library updates
+* Figma rebuild: Templates - How to apply (Forms (#2464)
+* Figma rebuild: Templates - Multiple Responses (Patterns) (#2457)
+* Add missing icons for texting/mobile device and external link (#2381)
+* Figma rebuild: Templates - Confirmation (Forms) (2466)
+* Icons - Update Figma Components to use USWDS icons (#2624) 
+
+### Documentation updates
+* Icon web component - Documentation (#2197)
+* Create documentation about web component analytics (#2625) 
+
+### Accessibility  updates
+* Discovery: Research and propose aria-describedby alternatives
(#2619)
+* Icon web component - Accessibility review (#1365)
+* va-select needs describedby property (#2587)
+
+
 ## March 2024
 The team continued to synch to USWDS v3 and made updates and fixes to v3 components while the Figma Library continues to be built out. 
 

src/_components/form/checkbox.md

@@ -128,8 +128,8 @@ anchors:
 
 #### When to consider something else
 
-- If there are too many options to display on a mobile screen.
-- If a user can only select one option from a list (use radio buttons instead).
+* If there are too many options to display on a mobile screen.
+* If a user can only select one option from a list (use radio buttons instead).
 
 {% include content/conditionally-revealed-fields.md %}
 
@@ -153,12 +153,13 @@ anchors:
 
 {% include snippet.html content='html/error-checkbox-group.html' %}
 
-
 {% include component-docs.html component_name=page.web-component %}
 
+{% include content/using-message-aria-describedby.md %}
+
 ### Native Events
 
-- The native onBlur event is available on this component. It can be used by adding the event handler to your component and it will then listen to the event and respond accordingly when the event fires.
+The native onBlur event is available on this component. It can be used by adding the event handler to your component and it will then listen to the event and respond accordingly when the event fires.
 
 ## Accessibility considerations
 

src/_components/form/number-input.md

@@ -80,21 +80,21 @@ anchors:
 
 ### When to use number input
 
-- When a number should be the only accepted value within an input element.
-- If you can’t reasonably predict a user’s answer to a prompt and there might be wide variability in users’ answers.
-- When users want to be able to paste in a response.
+* When a number should be the only accepted value within an input element.
+* If you can’t reasonably predict a user’s answer to a prompt and there might be wide variability in users’ answers.
+* When users want to be able to paste in a response.
 
 ### When to consider something else
 
-- When users are choosing from a specific set of options.
-- A number is not the only accepted value for the input. 
-- The number should be a type other than number, ie: telephone numbers
+* When users are choosing from a specific set of options.
+* A number is not the only accepted value for the input.
+* The number should be a type other than number, ie: telephone numbers
 
-### How to use 
+### How to use
 
-- Number input always has the type of `number` and provides a `min` and `max` attribute to set a range on the component. 
-- Only show error validation messages or stylings after a user has interacted with a particular field.
-- Avoid using placeholder text that appears within a input field before a user starts typing. If placeholder text is no longer visible after a user clicks into the field, users will no longer have that text available when they need to review their entries. (People who have cognitive or visual disabilities have additional problems with placeholder text.)
+* Number input always has the type of `number` and provides a `min` and `max` attribute to set a range on the component.
+* Only show error validation messages or stylings after a user has interacted with a particular field.
+* Avoid using placeholder text that appears within a input field before a user starts typing. If placeholder text is no longer visible after a user clicks into the field, users will no longer have that text available when they need to review their entries. (People who have cognitive or visual disabilities have additional problems with placeholder text.)
 
 ### Choosing between variations
 
@@ -106,13 +106,15 @@ anchors:
 * **With Currency.** Indicates to the user the expected input is US currency.
 * **Widths.** Indicates to the user the expected length of text input by sizing the field relative to what is expected.
 
-### Native Events
+{% include component-docs.html component_name=page.web-component %}
 
-- Native onInput and onBlur events are available on this component. They can be used by adding the event handler to your component and it will then listen to the event and respond accordingly when the event fires.
+{% include content/using-message-aria-describedby.md %}
 
-{% include component-docs.html component_name=page.web-component %}
+### Native Events
+
+Native onInput and onBlur events are available on this component. They can be used by adding the event handler to your component and it will then listen to the event and respond accordingly when the event fires.
 
 ## Accessibility considerations
 
-- Avoid `placeholder` text for accessibility reasons. Most browsers’ default rendering of placeholder text does not provide a high enough contrast ratio.
-- Avoid breaking numbers with distinct sections (such as phone numbers, Social Security Numbers, or credit card numbers) into separate input fields. For example, use one input for phone number, not three (one for area code, one for local code, and one for number). Each field needs to be labeled for a screen reader and the labels for fields broken into segments are often not meaningful.
+* Avoid `placeholder` text for accessibility reasons. Most browsers’ default rendering of placeholder text does not provide a high enough contrast ratio.
+* Avoid breaking numbers with distinct sections (such as phone numbers, Social Security Numbers, or credit card numbers) into separate input fields. For example, use one input for phone number, not three (one for area code, one for local code, and one for number). Each field needs to be labeled for a screen reader and the labels for fields broken into segments are often not meaningful.

src/_components/form/text-input.md

@@ -113,6 +113,8 @@ See [form error handling]({{ site.baseurl }}/components/form/#error-handling) fo
 
 {% include component-docs.html component_name=page.web-component %}
 
+{% include content/using-message-aria-describedby.md %}
+
 ### Native Events
 
 * Native onInput and onBlur events are available on this component. They can be used by adding the event handler to your component and it will then listen to the event and respond accordingly when the event fires.

src/_components/form/textarea.md

@@ -75,6 +75,8 @@ See [form error handling]({{ site.baseurl }}/components/form/#error-handling) fo
 
 {% include component-docs.html component_name=page.web-component %}
 
+{% include content/using-message-aria-describedby.md %}
+
 ### Native Events
 
 * Native onInput and onBlur events are available on this component. They can be used by adding the event handler to your component and it will then listen to the event and respond accordingly when the event fires.

src/_components/template.md

@@ -25,12 +25,10 @@ anchors:
 
 {% include storybook-preview.html story="components-va-component-name--default" link_text=page.web-component %}
 
-
 ### Variation 1
 
 Add Storybook examples as necessary.
 
-
 ### Variation 2
 
 Add Storybook examples as necessary.
@@ -42,7 +40,6 @@ Add Storybook examples as necessary.
 * **In this context**: Explain the scenario or user context where this component is, or could be, used.
 * **In this task**: Explain the user task or tasks where this component is, or could be, used.
 
-
 ### When to consider something else
 
 * **Not in this context**: Explain which scenarios or user context where this component is not, or should not, be used.
@@ -80,7 +77,6 @@ Images with captions that describe different instances of this component being u
 
 <!-- include component-example.html alt="Explain what is in the image." file="/images/components/component-name/filename.png" caption="Describe what this example image is depicting." --> 
 
-
 This is the Code Usage section. Note that the header is inside this include.
 <!-- include component-docs.html component_name=page.web-component  -->
 
@@ -97,6 +93,5 @@ This is the Code Usage section. Note that the header is inside this include.
 
 * Links to related components.
 
-
 This is the Component checklist section. Note that the header is inside this include.
 <!-- include _component-checklist.html component_name=page.web-component -->

src/_content-style-guide/links.md

@@ -127,21 +127,5 @@ You can apply online or mail your [Application for Burial Benefits (VA Form 21P-
 ## Linking to external sites
 
 * **Use text that tells the reader where the link takes them.** Example: [Check COVID-19 symptoms on the CDC website](https://www.cdc.gov/coronavirus/2019-ncov/symptoms-testing/symptoms.html)
-* **Open external links in a new tab or window.** Links to external sites should have an attribute in the source code to open in a new tab. (This is what that looks like: `target="_blank"` .) External links should also have `rel="noreferrer"` as an attribute.
 * **Consider using an aria-label to create a screen reader-only label.** Aria-labels can be helpful in specialized instances where there's a clear reason to use separate text for people who use screen readers. The aria-label may append or replace text within a link to provide context about where the link goes.
-* **Don’t use the “new window” icon for external links since it can cause confusion.** In content we avoid use of the "new window" icon. Within components, for brevity, use of the icon is acceptable.
-* **Open internal links in the same tab or window.** Links within the VA.gov domain should open in the current tab or window. Exception: Some VA sub-domains provide a distinct experience from VA.gov, so they open in a new tab. For these exceptions, add “(opens in new tab)” to the link text.
-
-### VA sub-domain exceptions that open in a new tab or window
-
-These sub-domains currently open in a new tab, and we should clarify that in the link text. Example: “Learn more on our ebenefits website (opens in new tab)” This list is periodically re-evaluated and updated. 
-
-  * [myhealth.va.gov](http://myhealth.va.gov/)
-  * [ebenefits.va.gov](http://ebenefits.va.gov/)
-  * [www.accesstocare.va.gov](http://www.accesstocare.va.gov/)
-  * [www.gibill.va.gov/wave](http://www.gibill.va.gov/wave)
-  * [www.blogs.va.gov](http://www.blogs.va.gov/)
-  * [www.data.va.gov](http://www.data.va.gov/)
-  * [mobile.va.gov](http://mobile.va.gov/)
-  * [www.accesstocare.va.gov](http://www.accesstocare.va.gov/)
-  * [www.oit.va.gov](http://www.oit.va.gov/)
+* **Explain when a link is opening in a new tab with text, not an icon.** Add "(opens in new tab)" to notify users when a link is opening in a new tab. In standard link text, we avoid using the new window icon, since it can cause confusion. Within components that have space constraints, the icon is acceptable.