USWDS - Search: Use consistent search markup.

[mejiaj]

Description

Search styles depend on div[role="search"] being a child of .usa-search. Otherwise it breaks to next line on small screens.

Additional information

Before you hit Submit, make sure you’ve done whichever of these applies to you:

• Follow the 18F Front End Coding Style Guide and Accessibility Guide.
• Run npm test and make sure the tests for the files you have changed have passed.
• Run your code through HTML_CodeSniffer and make sure it’s error free.
• Title your pull request using this format: [Website] - [UI component]: Brief statement describing what this pull request solves.

[mejiaj]

@thisisdano, looks like axe is complaining about the search component page where the variations are listed on the same page.

I've tried adding them to their own iframe, but then axe doesn't test them. We could:

1. Separate into separate components and ignore the combined one.
2. Ignore the combined one and use the search-header component to test the accessibility of search

Happy to hear any other suggestions though.

[thisisdano]

I think it is a best practice to put the role=search in the form element, as we changed it in 2.5.0, so I'd prefer to change the stylesheet to style properly whether or not the role is in the < 2.5.0 markup or the 2.5.0+ markup, to support both better markup and backward compatibility.

I'll push this change.

[mejiaj]

LGTM

[thisisdano]

Went back and reverted all the markup changes so we've focussed only on the styling here. I've added a new issue (#3344) that we can use for normalizing the markup. That work should go in the next minor version and this work could go in a 2.5.2 bugfix release.

[mejiaj]

Looks like this in fractal for me:

We need to add the role to the div, remove the div, or update the styling.

[mejiaj]

LGTM