Add hover bg color effect to pfe-autocomplete droplist list item

[kelsS]

Component name:

Name/Description of the component being updated pfe-autocomplete - dropdown ul list items

Design specification updates

Currently when you hover over a dropdown list item the background color does not change to more clearly indicate which item the user is hovering over with their mouse. The bg color only changes when selecting a dropdown item with the keyboard.

Need to add following style updates to ul li styles in pfe-search-droplist.scss around line 55

      &:hover,
      &.active {
          background-color: #{pfe-color( surface--lighter )};
      }

Location of file to be updated on GitHub

Accessibility updates

Interaction updates

Analytics updates

[castastrophe]

@eyevana This might be a good reason why we should swap to using the ui color sets for this component rather than the surface set. The ui sets have state variants that would map to this interaction. Is there a set of UI colors that would work for the dropdown background colors? If not, we can talk about adding a new set.