fix(autocomplete): improve implementation of aria-activedescen… (#11743)

- allow screen readers to do more and us to do less
  - remove extra calls to announce the item that is visually focused
  - remove tests for these extra live announcements
  - give every option an id for use with `aria-activedescendant`
  - use the `selected` class for styling and finding the active option
- implement recommendations from a11y guides
  - add the clear button to the tab order
  - change input type to `text`
  - always define a `name` attribute
- when the popup isn't expanded
  - `aria-owns` and `aria-activedescendant` shouldn't be defined
- when the autocomplete is disabled
  - `aria-autocomplete` and `aria-role` shouldn't be defined
  - `aria-haspopup` should be false
- add md-autocomplete-suggestion class for styling instead of using `li`
- add `md-autoselect` to the dialog demo for help w/ manual testing
- remove overly verbose `aria-describedby` from basic demo
- mark `md-icons` in `md-item-templates` of autocomplete demos as hidden
- update demos to use `md-escape-options="clear"` for better a11y

Fixes #11742

Author: Splaktar

src/components/autocomplete/autocomplete-theme.scss

@@ -49,10 +49,10 @@ md-autocomplete.md-THEME_NAME-theme {
 .md-autocomplete-suggestions-container.md-THEME_NAME-theme,
 .md-autocomplete-standard-list-container.md-THEME_NAME-theme {
   background: '{{background-hue-1}}';
-  li {
+  .md-autocomplete-suggestion {
     color: '{{foreground-1}}';
     &:hover,
-    &#selected_option {
+    &.selected {
       background: '{{background-500-0.18}}';
     }
   }

src/components/autocomplete/autocomplete.scss

@@ -174,7 +174,7 @@ md-autocomplete {
     input {
       border: 1px solid $border-color;
     }
-    li:focus {
+    .md-autocomplete-suggestion:focus {
       color: #fff;
     }
   }
@@ -214,7 +214,7 @@ md-autocomplete {
   list-style: none;
   padding: 0;
 
-  li {
+  .md-autocomplete-suggestion {
     font-size: 14px;
     overflow: hidden;
     padding: 0 15px;