Skip to content

Commit 7ae40db

Browse files
a11y(meetup-list): restructure for a11y
1 parent 1f95967 commit 7ae40db

File tree

1 file changed

+67
-56
lines changed

1 file changed

+67
-56
lines changed

src/components/MeetupList.tsx

Lines changed: 67 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,11 @@ import {
77
Input,
88
LinkBox,
99
LinkOverlay,
10+
List,
11+
ListItem,
1012
Text,
1113
useColorModeValue,
14+
VisuallyHidden,
1215
} from "@chakra-ui/react"
1316

1417
// Components
@@ -77,64 +80,72 @@ const MeetupList: React.FC<IProps> = () => {
7780
w="100%"
7881
_focus={{ outline: "auto 1px" }}
7982
_placeholder={{ color: "text200" }}
83+
aria-describedby="input-instruction"
8084
/>
81-
<Box boxShadow={listBoxShadow}>
82-
{filteredMeetups.length ? (
83-
filteredMeetups.map((meetup, idx) => (
84-
<LinkBox
85-
key={idx}
86-
display="flex"
87-
justifyContent="space-between"
88-
boxShadow={listItemBoxShadow}
89-
mb={0.25}
90-
p={4}
91-
w="100%"
92-
_hover={{
93-
textDecoration: "none",
94-
borderRadius: "base",
95-
boxShadow: "0 0 1px primary",
96-
bg: "tableBackgroundHover",
97-
}}
85+
{/* hidden for attachment to input only */}
86+
<VisuallyHidden hidden id="input-instruction">
87+
results update as you type
88+
</VisuallyHidden>
89+
90+
<List m={0} boxShadow={listBoxShadow} aria-label="Event meetup results">
91+
{filteredMeetups.map((meetup, idx) => (
92+
<LinkBox
93+
as={ListItem}
94+
key={idx}
95+
display="flex"
96+
justifyContent="space-between"
97+
boxShadow={listItemBoxShadow}
98+
mb={0.25}
99+
p={4}
100+
w="100%"
101+
_hover={{
102+
textDecoration: "none",
103+
borderRadius: "base",
104+
boxShadow: "0 0 1px primary",
105+
bg: "tableBackgroundHover",
106+
}}
107+
>
108+
<Flex flex="1 1 75%" mr={4}>
109+
<Box mr={4} opacity="0.4">
110+
{idx + 1}
111+
</Box>
112+
<Box>
113+
<LinkOverlay
114+
as={Link}
115+
href={meetup.link}
116+
textDecor="none"
117+
color="text"
118+
hideArrow
119+
>
120+
{meetup.title}
121+
</LinkOverlay>
122+
</Box>
123+
</Flex>
124+
<Flex
125+
textAlign="right"
126+
alignContent="flex-start"
127+
flex="1 1 25%"
128+
mr={4}
129+
flexWrap="wrap"
98130
>
99-
<Flex flex="1 1 75%" mr={4}>
100-
<Box mr={4} opacity="0.4">
101-
{idx + 1}
102-
</Box>
103-
<Box>
104-
<LinkOverlay
105-
as={Link}
106-
href={meetup.link}
107-
textDecor="none"
108-
color="text"
109-
hideArrow
110-
>
111-
{meetup.title}
112-
</LinkOverlay>
113-
</Box>
114-
</Flex>
115-
<Flex
116-
textAlign="right"
117-
alignContent="flex-start"
118-
flex="1 1 25%"
119-
mr={4}
120-
flexWrap="wrap"
121-
>
122-
<Emoji text={meetup.emoji} boxSize={4} mr={2} />
123-
<Text mb={0} opacity={"0.6"}>
124-
{meetup.location}
125-
</Text>
126-
</Flex>
127-
<Box
128-
as="span"
129-
_after={{
130-
content: '"↗"',
131-
ml: 0.5,
132-
mr: 1.5,
133-
}}
134-
></Box>
135-
</LinkBox>
136-
))
137-
) : (
131+
<Emoji text={meetup.emoji} boxSize={4} mr={2} />
132+
<Text mb={0} opacity={"0.6"}>
133+
{meetup.location}
134+
</Text>
135+
</Flex>
136+
<Box
137+
as="span"
138+
_after={{
139+
content: '"↗"',
140+
ml: 0.5,
141+
mr: 1.5,
142+
}}
143+
></Box>
144+
</LinkBox>
145+
))}
146+
</List>
147+
<Box aria-live="assertive" aria-atomic>
148+
{!filteredMeetups.length && (
138149
<InfoBanner emoji=":information_source:">
139150
<Translation id="page-community-meetuplist-no-meetups" />{" "}
140151
<Link to="https://github.com/ethereum/ethereum-org-website/blob/dev/src/data/community-meetups.json">

0 commit comments

Comments
 (0)