@@ -7,8 +7,11 @@ import {
7
7
Input ,
8
8
LinkBox ,
9
9
LinkOverlay ,
10
+ List ,
11
+ ListItem ,
10
12
Text ,
11
13
useColorModeValue ,
14
+ VisuallyHidden ,
12
15
} from "@chakra-ui/react"
13
16
14
17
// Components
@@ -77,64 +80,72 @@ const MeetupList: React.FC<IProps> = () => {
77
80
w = "100%"
78
81
_focus = { { outline : "auto 1px" } }
79
82
_placeholder = { { color : "text200" } }
83
+ aria-describedby = "input-instruction"
80
84
/>
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"
98
130
>
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 && (
138
149
< InfoBanner emoji = ":information_source:" >
139
150
< Translation id = "page-community-meetuplist-no-meetups" /> { " " }
140
151
< Link to = "https://github.com/ethereum/ethereum-org-website/blob/dev/src/data/community-meetups.json" >
0 commit comments