From 449e4459250129211bbfd954ecc69b2ce99ce4b8 Mon Sep 17 00:00:00 2001
From: Zach Arend <zarend@users.noreply.github.com>
Date: Fri, 21 Jan 2022 08:58:02 -0800
Subject: [PATCH] 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 8182b35a13c54fac425c9210b45cde0c73aee500)
---
 src/material/list/list-item.html | 10 +++++-----
 src/material/list/list.scss      |  1 +
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/material/list/list-item.html b/src/material/list/list-item.html
index 1d49a0c95949..03e57de4ac13 100644
--- a/src/material/list/list-item.html
+++ b/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>
diff --git a/src/material/list/list.scss b/src/material/list/list.scss
index 7321cd89ad35..649e7726f824 100644
--- a/src/material/list/list.scss
+++ b/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