VACMS-16986 Resources & Support landing and taxonomy pages - add web components

[randimays]

Summary

Add web components for Resources & Support landing page where possible. Required a decently-sized refactor of the existing search component since we switched over to v3.

Related issue(s)

• [V1 & 3 Components] Implement available components for Resources & Support landing page va.gov-cms#16986

Testing done

Tested locally.

Screenshots

Alert

Link

1.

2.

Search input

Radio buttons

Button: the only remaining <button> is the mobile expand/collapse behavior for the search bar. This shouldn't be a <va-button> because stylistically, this is not similar to the design system button component.

Acceptance criteria

Quality Assurance & Testing

• I fixed|updated|added unit tests and integration tests for each feature (if applicable).
• Linting warnings have been addressed
• Screenshot of the developed feature is added
• Accessibility testing has been performed

Error Handling

• Browser console contains no warnings or errors.

[randimays]

Removed because now the search input is in the shadow DOM and we can't test much in unit tests.

[chriskim2311]

LGTM, Great work!

[randimays]

@laflannery This is ready for your review, please

[laflannery]

@randimays Can we make these updates:

• Can you add label-header-level="2" to the radio group? This will make the legend an H2 which will keep the heading structure the same as it currently is
• On the individual radio options, the name prop is different for each, which means these are not considered part of the same group and are read as "1 of 1" instead of "1 of 2" and the expected keyboard support doesn't work (I should be able to use the arrow keys to to prev/next options but instead I have to use tab). Can you change this so the name is the same for both? (The DS example uses "group")
• For the search field:
  • "Enter a keyword, phrase, or question" can just be <p> tags, it doesn't need to be associated with the input because of the way the component is built we add this same text differently
    
  • In the component itself:
    • Remove the aria-labelledby prop (again we are going to do this differently
    • I think you can remove the name prop? But also I don't think it's doing any harm?
    • Change the label prop to label="Enter a keyword, phrase, or question"

I also have some questions on if some elements should be components, I want to make sure we aren't missing these:

• Show all topics button - this is at the very bottom of the landing page
  
• The links in the Browse topics section, also in the bottom half of the landing page, should these use the <va-link>?
  
• The pagination at the bottom of the taxonomy pages - is this handled in another PR?
  
• The listing item titles are not using the updated '` component like you did on the main search results. Can/should we do this here are well?
  

[randimays]

Can you add label-header-level="2" to the radio group? This will make the legend an H2 which will keep the heading structure the same as it currently is

Done

On the individual radio options, the name prop is different for each, which means these are not considered part of the same group and are read as "1 of 1" instead of "1 of 2" and the expected keyboard support doesn't work (I should be able to use the arrow keys to to prev/next options but instead I have to use tab). Can you change this so the name is the same for both? (The DS example uses "group")

Done

For the search field: "Enter a keyword, phrase, or question" can just be

tags, it doesn't need to be associated with the input because of the way the component is built we add this same text differently

Done

In the component itself:
Remove the aria-labelledby prop (again we are going to do this differently
I think you can remove the name prop? But also I don't think it's doing any harm?
Change the label prop to label="Enter a keyword, phrase, or question"

Done

I also have some questions on if some elements should be components, I want to make sure we aren't missing these:

• Show all topics button - this is at the very bottom of the landing page
• The links in the Browse topics section, also in the bottom half of the landing page, should these use the ?
• The pagination at the bottom of the taxonomy pages - is this handled in another PR?
• The listing item titles are not using the updated '` component like you did on the main search results. Can/should we do this here are well?

These are all content-build changes (this is a vets-website specific PR). I'll address these in the content-build PR I mentioned in Slack.

[randimays]

@chriskim2311 Do you mind re-reviewing please?

[chriskim2311]

LGTM!