From b7fe805f6145a8e59a0811519b8bf716e88b01fe Mon Sep 17 00:00:00 2001
From: Alireza <alireza.mirian@gmail.com>
Date: Sat, 16 Mar 2024 19:40:48 +0100
Subject: [PATCH] fix(List): fix a regression in accessibility roles

---
 packages/jui/src/List/StyledList.tsx     | 12 +++++++-----
 packages/jui/src/List/StyledListItem.tsx |  6 ++++--
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/jui/src/List/StyledList.tsx b/packages/jui/src/List/StyledList.tsx
index 579bc66d..a27d068e 100644
--- a/packages/jui/src/List/StyledList.tsx
+++ b/packages/jui/src/List/StyledList.tsx
@@ -1,11 +1,13 @@
 import { css } from "styled-components";
 import { styled } from "../styled";
 
-export const StyledList = styled.div.withConfig<{
-  fillAvailableSpace?: boolean;
-}>({
-  shouldForwardProp: (prop) => prop !== "fillAvailableSpace",
-})`
+export const StyledList = styled.div
+  .withConfig<{
+    fillAvailableSpace?: boolean;
+  }>({
+    shouldForwardProp: (prop) => prop !== "fillAvailableSpace",
+  })
+  .attrs({ role: "list" })`
   padding: 0;
   margin: 0;
   list-style: none;
diff --git a/packages/jui/src/List/StyledListItem.tsx b/packages/jui/src/List/StyledListItem.tsx
index e1c398a1..2258778b 100644
--- a/packages/jui/src/List/StyledListItem.tsx
+++ b/packages/jui/src/List/StyledListItem.tsx
@@ -7,8 +7,10 @@ export type StyledListItemProps = {
   disabled: boolean;
 };
 
-export const StyledListItem = styled.div<StyledListItemProps>(
-  ({ containerFocused, selected, disabled, theme }) => {
+export const StyledListItem = styled.div.attrs({
+  role: "listitem",
+})<StyledListItemProps>`
+  ${({ containerFocused, selected, disabled, theme }) => {
     let backgroundColor;
     let color = disabled
       ? theme.color("*.disabledForeground")