Elements with ARIA roles must use a valid, non-abstract ARIA role JS-0743
Bug risk
Minor
a month ago
—
a year old
Elements with ARIA roles must use a valid, non-abstract ARIA role
228 {!isTablet && (
229 <Grid.Col order={2}>
230 <Stack spacing={40}>
231 <ContactSection role='org' parentId={data.id} />232 {sidebar}
233 </Stack>
234 </Grid.Col>Elements with ARIA roles must use a valid, non-abstract ARIA role
218 {isTablet && (
219 <Stack spacing={40} w='100%'>
220 <Divider />
221 <ContactSection role='org' parentId={data.id} />222 {sidebar}
223 </Stack>
224 )}Elements with ARIA roles must use a valid, non-abstract ARIA role
92 return (
93 <Stack className={classes.noResultsStack}>
94 <Text>{t('common:search.no-results-adjust')}</Text>
95 <CrisisSupport role='national'> 96 {crisisData.map((result) => (
97 <CrisisSupport.National data={result} key={result.id} />
98 ))}Elements with ARIA roles must use a valid, non-abstract ARIA role
163 {!isTablet && (
164 <Grid.Col order={2}>
165 <Stack spacing={40}>
166 <ContactSection role='org' parentId={data.id} />167 <VisitCard locationId={data.id} />
168 </Stack>
169 </Grid.Col>Elements with ARIA roles must use a valid, non-abstract ARIA role
135 {isTablet && (
136 <Stack spacing={40} w='100%'>
137 <Divider />
138 <ContactSection role='org' parentId={data.id} />139 <Divider />
140 <VisitCard locationId={data.id} />
141 </Stack>
Description
Bad Practice
<div role="datepicker"></div> <!-- Bad: "datepicker" is not an ARIA role -->
<div role="range"></div> <!-- Bad: "range" is an _abstract_ ARIA role -->
<div role=""></div> <!-- Bad: An empty ARIA role is not allowed -->
<Foo role={role}></Foo> <!-- Bad: ignoreNonDOM is set to false or not set -->
Recommended
<div role="button"></div> <!-- Good: "button" is a valid ARIA role -->
<div role={role}></div> <!-- Good: role is a variable & cannot be determined until runtime. -->
<div></div> <!-- Good: No ARIA role -->
<Foo role={role}></Foo> <!-- Good: ignoreNonDOM is set to true -->