Elements with ARIA roles must use a valid, non-abstract ARIA role JS-0743
Bug risk
Minor
5 days ago
—
a year old
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
137 </Skeleton>
138 </Title>
139 <Skeleton visible={loading}>
140 <CrisisSupport role='international'>141 {data?.map((resource) => <CrisisSupport.International data={resource} key={resource.id} />)}
142 </CrisisSupport>
143 </Skeleton>Elements with ARIA roles must use a valid, non-abstract ARIA role
131 {!isTablet && (
132 <Grid.Col order={2}>
133 <Stack spacing={40}>
134 <ContactSection role='org' parentId={org.id} />135 </Stack>
136 </Grid.Col>
137 )}Elements with ARIA roles must use a valid, non-abstract ARIA role
113 {isTablet && (
114 <Stack spacing={40} w='100%'>
115 <Divider />
116 <ContactSection role='org' parentId={org.id} />117 </Stack>
118 )}
119 <Tabs w='100%' value={activeTab} onTabChange={handleTabChange}>Elements with ARIA roles must use a valid, non-abstract ARIA role
229 {!isTablet && (
230 <Grid.Col order={2}>
231 <Stack spacing={40}>
232 <ContactSection role='org' parentId={data.id} />233 {sidebar}
234 </Stack>
235 </Grid.Col>
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 -->