fix(List): fix a regression in accessibility roles

alirezamirian · Mar 16, 2024 · b7fe805 · b7fe805
1 parent 5fddba4
commit b7fe805
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 7 deletions.
diff --git 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
@@ -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")