fix(material/list): fix duplicate focus with chromevox on action-list…

… items (#23361)

For the mat-action-list component, fix chromevox screenreader bug where it
duplicated focus on each item in the action list. After focusing on a
`button` in the action list, linearly navigating forward moved focus to
the `.mat-list-item-content` of the same item.

Fixes this by change the list item content from a `div` to `span`, since
we're generally not supposed to use div's inside buttons.

(cherry picked from commit 8182b35)

src/material/list/list-item.html

@@ -1,13 +1,13 @@
-<div class="mat-list-item-content">
-  <div class="mat-list-item-ripple" mat-ripple
+<span class="mat-list-item-content">
+  <span class="mat-list-item-ripple" mat-ripple
        [matRippleTrigger]="_getHostElement()"
        [matRippleDisabled]="_isRippleDisabled()">
-  </div>
+  </span>
 
   <ng-content select="[mat-list-avatar], [mat-list-icon], [matListAvatar], [matListIcon]">
   </ng-content>
 
-  <div class="mat-list-text"><ng-content select="[mat-line], [matLine]"></ng-content></div>
+  <span class="mat-list-text"><ng-content select="[mat-line], [matLine]"></ng-content></span>
 
   <ng-content></ng-content>
-</div>
+</span>

src/material/list/list.scss

@@ -66,6 +66,7 @@ $item-inset-divider-offset: 72px;
   }
 
   .mat-list-item-ripple {
+    display: block;
     @include layout-common.fill;
 
     // Disable pointer events for the ripple container because the container will overlay the