Non-unique ids for DOM elements

[artlowel]

Describe the bug
Since we merged #1057, a number of warnings about non-unique ids have shown up in the dev console:

The problematic elements are the username and password inputs for the login form and the search input in the header. They're likely duplicated to be rendered differently for small and large screens. Possible solutions could be to just remove the IDs, angular likely doesn't need them. Or if that's an accessibility problem: only render each version if that grid breakpoint is active according to hostWindowService

To Reproduce
Steps to reproduce the behavior:

1. Open the homepage
2. Look at the browser dev tools

Expected behavior
We shouldn't duplicate HTML IDs

Related work
#1057

[tdonohue]

I agree, and this sounds like an accessibility issue that we should fix prior to 7.0. That said, I'm bumping this up to medium priority, as I know duplicate IDs cause issues in screen readers and similar... plus, I know accessibility is a priority for Steering.

Some fields do require an ID, if they are referenced in an ARIA attribute (by their ID) or by a label tag (again by their ID). So, if these fields require an ID they must be unique IDs. If they do not require an ID, then we could just remove the IDs altogether. I've not checked which scenario applies here.

As a sidenote, Deque (the firm we are doing accessibility testing with during Testathon) has a Chrome plugin which may be helpful here to analyze the final HTML. https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US

@atarix83 : I'm assigning this to you (or your team) to analyze further & report back on.

[tdonohue]

This appears to be duplicated by #1167 (see first bullet listed there) and it was fixed by #1252