From 92c22bf53e99ee91b51f3fb4736f0e89489856cc Mon Sep 17 00:00:00 2001 From: Zach Arend Date: Mon, 31 Oct 2022 21:26:46 +0000 Subject: [PATCH] fix(material/list): add selected shape to list item Add a 4px border radius to selected-state of list item. Fix issue where selected state is visually communicated only with color (#25900, WCAG 1.4.1). Fix #25900 --- src/material/list/list-option.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/material/list/list-option.scss b/src/material/list/list-option.scss index ea5e002a90af..b20483b9d80e 100644 --- a/src/material/list/list-option.scss +++ b/src/material/list/list-option.scss @@ -56,4 +56,11 @@ // Improve accessibility for Window High Contrast Mode (HCM) by adding an idicator on the selected // option. @include list-item-hcm-indicator.private-high-contrast-list-item-indicator(); + + // Add a 4px border radius so that selected state is communicated with both color and shape. Fix + // accessibility issue where selected state is visually communicated only with color (issue + // #25900, WCAG 1.4.1). + &::before { + border-radius: 4px; // 4dp is a common Material Design value. + } }