Skip to content

Commit f15a0e6

Browse files
rlamacraftrlamacraft
committed
Fix accessibility warning in new Gallery's sidebar
We were setting the role of the List to "navigation" so that this semantic information would be exposed to accessibility technologies like screen readers, but by applying this role to the list wrapper we violated the rule that all <li> tags must have a parent that is either an <ol> or a <ul>. This change removes the custom role from the List to fix this violation and introduces a new wrapper div with the "navigation" role to satisfy the accessibility technologies. This has the added advantage of meaning that there is only one navigation element that wraps both lists, which better describes the fact that both lists perform the same type of navigation.
1 parent 6e37352 commit f15a0e6

File tree

1 file changed

+140
-138
lines changed
  • src/main/webapp/ui/src/eln/gallery/components

1 file changed

+140
-138
lines changed

‎src/main/webapp/ui/src/eln/gallery/components/Sidebar.js

+140-138
Original file line numberDiff line numberDiff line change
@@ -428,7 +428,7 @@ const Sidebar = ({
428428

429429
React.useEffect(() => {
430430
autorun(() => {
431-
if(viewport.isViewportSmall) setDrawerOpen(false);
431+
if (viewport.isViewportSmall) setDrawerOpen(false);
432432
});
433433
}, [viewport]);
434434

@@ -444,7 +444,7 @@ const Sidebar = ({
444444
anchor="left"
445445
variant={viewport.isViewportSmall ? "temporary" : "permanent"}
446446
onClose={() => {
447-
if(viewport.isViewportSmall) setDrawerOpen(false);
447+
if (viewport.isViewportSmall) setDrawerOpen(false);
448448
}}
449449
aria-label="gallery sections drawer"
450450
>
@@ -457,7 +457,7 @@ const Sidebar = ({
457457
open={Boolean(newMenuAnchorEl)}
458458
anchorEl={newMenuAnchorEl}
459459
onClose={() => {
460-
if(viewport.isViewportSmall) setDrawerOpen(false);
460+
if (viewport.isViewportSmall) setDrawerOpen(false);
461461
setNewMenuAnchorEl(null);
462462
}}
463463
MenuListProps={{
@@ -474,11 +474,11 @@ const Sidebar = ({
474474
onUploadComplete={() => {
475475
refreshListing();
476476
setNewMenuAnchorEl(null);
477-
if(viewport.isViewportSmall) setDrawerOpen(false);
477+
if (viewport.isViewportSmall) setDrawerOpen(false);
478478
}}
479479
onCancel={() => {
480480
setNewMenuAnchorEl(null);
481-
if(viewport.isViewportSmall) setDrawerOpen(false);
481+
if (viewport.isViewportSmall) setDrawerOpen(false);
482482
}}
483483
/>
484484
))
@@ -492,15 +492,15 @@ const Sidebar = ({
492492
onDialogClose={(success) => {
493493
if (success) refreshListing();
494494
setNewMenuAnchorEl(null);
495-
if(viewport.isViewportSmall) setDrawerOpen(false);
495+
if (viewport.isViewportSmall) setDrawerOpen(false);
496496
}}
497497
/>
498498
))
499499
.orElse(null)}
500500
<DmpMenuSection
501501
onDialogClose={() => {
502502
setNewMenuAnchorEl(null);
503-
if(viewport.isViewportSmall) setDrawerOpen(false);
503+
if (viewport.isViewportSmall) setDrawerOpen(false);
504504
}}
505505
/>
506506
</StyledMenu>
@@ -517,137 +517,139 @@ const Sidebar = ({
517517
<SelectedDrawerTabIndicator
518518
verticalPosition={selectedIndicatorOffset}
519519
/>
520-
<List sx={{ position: "static" }} role="navigation">
521-
<DrawerTab
522-
label={gallerySectionLabel.Images}
523-
icon={<FaIcon icon="image" />}
524-
index={0}
525-
tabIndex={getTabIndex(0)}
526-
ref={getRef(0)}
527-
drawerOpen={drawerOpen}
528-
selected={selectedSection === "Images"}
529-
onClick={(event) => {
530-
setSelectedSection("Images");
531-
if(viewport.isViewportSmall) setDrawerOpen(false);
532-
setSelectedIndicatorOffset(event.currentTarget.offsetTop);
533-
}}
534-
/>
535-
<DrawerTab
536-
label={gallerySectionLabel.Audios}
537-
icon={<FaIcon icon="volume-low" />}
538-
index={1}
539-
tabIndex={getTabIndex(1)}
540-
ref={getRef(1)}
541-
drawerOpen={drawerOpen}
542-
selected={selectedSection === "Audios"}
543-
onClick={(event) => {
544-
setSelectedSection("Audios");
545-
if(viewport.isViewportSmall) setDrawerOpen(false);
546-
setSelectedIndicatorOffset(event.currentTarget.offsetTop);
547-
}}
548-
/>
549-
<DrawerTab
550-
label={gallerySectionLabel.Videos}
551-
icon={<FaIcon icon="film" />}
552-
index={2}
553-
tabIndex={getTabIndex(2)}
554-
ref={getRef(2)}
555-
drawerOpen={drawerOpen}
556-
selected={selectedSection === "Videos"}
557-
onClick={(event) => {
558-
setSelectedSection("Videos");
559-
if(viewport.isViewportSmall) setDrawerOpen(false);
560-
setSelectedIndicatorOffset(event.currentTarget.offsetTop);
561-
}}
562-
/>
563-
<DrawerTab
564-
label={gallerySectionLabel.Documents}
565-
icon={<FaIcon icon="file" />}
566-
index={3}
567-
tabIndex={getTabIndex(3)}
568-
ref={getRef(3)}
569-
drawerOpen={drawerOpen}
570-
selected={selectedSection === "Documents"}
571-
onClick={(event) => {
572-
setSelectedSection("Documents");
573-
if(viewport.isViewportSmall) setDrawerOpen(false);
574-
setSelectedIndicatorOffset(event.currentTarget.offsetTop);
575-
}}
576-
/>
577-
<DrawerTab
578-
label={gallerySectionLabel.Chemistry}
579-
icon={<ChemistryIcon />}
580-
index={4}
581-
tabIndex={getTabIndex(4)}
582-
ref={getRef(4)}
583-
drawerOpen={drawerOpen}
584-
selected={selectedSection === "Chemistry"}
585-
onClick={(event) => {
586-
setSelectedSection("Chemistry");
587-
if(viewport.isViewportSmall) setDrawerOpen(false);
588-
setSelectedIndicatorOffset(event.currentTarget.offsetTop);
589-
}}
590-
/>
591-
<DrawerTab
592-
label={gallerySectionLabel.DMPs}
593-
icon={<FaIcon icon="file-invoice" />}
594-
index={5}
595-
tabIndex={getTabIndex(5)}
596-
ref={getRef(5)}
597-
drawerOpen={drawerOpen}
598-
selected={selectedSection === "DMPs"}
599-
onClick={(event) => {
600-
setSelectedSection("DMPs");
601-
if(viewport.isViewportSmall) setDrawerOpen(false);
602-
setSelectedIndicatorOffset(event.currentTarget.offsetTop);
603-
}}
604-
/>
605-
<DrawerTab
606-
label={gallerySectionLabel.Snippets}
607-
icon={<FaIcon icon="fa-regular fa-note-sticky" />}
608-
index={6}
609-
tabIndex={getTabIndex(6)}
610-
ref={getRef(6)}
611-
drawerOpen={drawerOpen}
612-
selected={selectedSection === "Snippets"}
613-
onClick={(event) => {
614-
setSelectedSection("Snippets");
615-
if(viewport.isViewportSmall) setDrawerOpen(false);
616-
setSelectedIndicatorOffset(event.currentTarget.offsetTop);
617-
}}
618-
/>
619-
<DrawerTab
620-
label={gallerySectionLabel.Miscellaneous}
621-
icon={<FaIcon icon="shapes" />}
622-
index={7}
623-
tabIndex={getTabIndex(7)}
624-
ref={getRef(7)}
625-
drawerOpen={drawerOpen}
626-
selected={selectedSection === "Miscellaneous"}
627-
onClick={(event) => {
628-
setSelectedSection("Miscellaneous");
629-
if(viewport.isViewportSmall) setDrawerOpen(false);
630-
setSelectedIndicatorOffset(event.currentTarget.offsetTop);
631-
}}
632-
/>
633-
</List>
634-
<Divider />
635-
<List sx={{ position: "static" }} role="navigation">
636-
<DrawerTab
637-
label={gallerySectionLabel.PdfDocuments}
638-
icon={<FaIcon icon="fa-circle-down" />}
639-
index={8}
640-
tabIndex={getTabIndex(8)}
641-
ref={getRef(8)}
642-
drawerOpen={drawerOpen}
643-
selected={selectedSection === "PdfDocuments"}
644-
onClick={(event) => {
645-
setSelectedSection("PdfDocuments");
646-
if(viewport.isViewportSmall) setDrawerOpen(false);
647-
setSelectedIndicatorOffset(event.currentTarget.offsetTop);
648-
}}
649-
/>
650-
</List>
520+
<div role="navigation">
521+
<List sx={{ position: "static" }}>
522+
<DrawerTab
523+
label={gallerySectionLabel.Images}
524+
icon={<FaIcon icon="image" />}
525+
index={0}
526+
tabIndex={getTabIndex(0)}
527+
ref={getRef(0)}
528+
drawerOpen={drawerOpen}
529+
selected={selectedSection === "Images"}
530+
onClick={(event) => {
531+
setSelectedSection("Images");
532+
if (viewport.isViewportSmall) setDrawerOpen(false);
533+
setSelectedIndicatorOffset(event.currentTarget.offsetTop);
534+
}}
535+
/>
536+
<DrawerTab
537+
label={gallerySectionLabel.Audios}
538+
icon={<FaIcon icon="volume-low" />}
539+
index={1}
540+
tabIndex={getTabIndex(1)}
541+
ref={getRef(1)}
542+
drawerOpen={drawerOpen}
543+
selected={selectedSection === "Audios"}
544+
onClick={(event) => {
545+
setSelectedSection("Audios");
546+
if (viewport.isViewportSmall) setDrawerOpen(false);
547+
setSelectedIndicatorOffset(event.currentTarget.offsetTop);
548+
}}
549+
/>
550+
<DrawerTab
551+
label={gallerySectionLabel.Videos}
552+
icon={<FaIcon icon="film" />}
553+
index={2}
554+
tabIndex={getTabIndex(2)}
555+
ref={getRef(2)}
556+
drawerOpen={drawerOpen}
557+
selected={selectedSection === "Videos"}
558+
onClick={(event) => {
559+
setSelectedSection("Videos");
560+
if (viewport.isViewportSmall) setDrawerOpen(false);
561+
setSelectedIndicatorOffset(event.currentTarget.offsetTop);
562+
}}
563+
/>
564+
<DrawerTab
565+
label={gallerySectionLabel.Documents}
566+
icon={<FaIcon icon="file" />}
567+
index={3}
568+
tabIndex={getTabIndex(3)}
569+
ref={getRef(3)}
570+
drawerOpen={drawerOpen}
571+
selected={selectedSection === "Documents"}
572+
onClick={(event) => {
573+
setSelectedSection("Documents");
574+
if (viewport.isViewportSmall) setDrawerOpen(false);
575+
setSelectedIndicatorOffset(event.currentTarget.offsetTop);
576+
}}
577+
/>
578+
<DrawerTab
579+
label={gallerySectionLabel.Chemistry}
580+
icon={<ChemistryIcon />}
581+
index={4}
582+
tabIndex={getTabIndex(4)}
583+
ref={getRef(4)}
584+
drawerOpen={drawerOpen}
585+
selected={selectedSection === "Chemistry"}
586+
onClick={(event) => {
587+
setSelectedSection("Chemistry");
588+
if (viewport.isViewportSmall) setDrawerOpen(false);
589+
setSelectedIndicatorOffset(event.currentTarget.offsetTop);
590+
}}
591+
/>
592+
<DrawerTab
593+
label={gallerySectionLabel.DMPs}
594+
icon={<FaIcon icon="file-invoice" />}
595+
index={5}
596+
tabIndex={getTabIndex(5)}
597+
ref={getRef(5)}
598+
drawerOpen={drawerOpen}
599+
selected={selectedSection === "DMPs"}
600+
onClick={(event) => {
601+
setSelectedSection("DMPs");
602+
if (viewport.isViewportSmall) setDrawerOpen(false);
603+
setSelectedIndicatorOffset(event.currentTarget.offsetTop);
604+
}}
605+
/>
606+
<DrawerTab
607+
label={gallerySectionLabel.Snippets}
608+
icon={<FaIcon icon="fa-regular fa-note-sticky" />}
609+
index={6}
610+
tabIndex={getTabIndex(6)}
611+
ref={getRef(6)}
612+
drawerOpen={drawerOpen}
613+
selected={selectedSection === "Snippets"}
614+
onClick={(event) => {
615+
setSelectedSection("Snippets");
616+
if (viewport.isViewportSmall) setDrawerOpen(false);
617+
setSelectedIndicatorOffset(event.currentTarget.offsetTop);
618+
}}
619+
/>
620+
<DrawerTab
621+
label={gallerySectionLabel.Miscellaneous}
622+
icon={<FaIcon icon="shapes" />}
623+
index={7}
624+
tabIndex={getTabIndex(7)}
625+
ref={getRef(7)}
626+
drawerOpen={drawerOpen}
627+
selected={selectedSection === "Miscellaneous"}
628+
onClick={(event) => {
629+
setSelectedSection("Miscellaneous");
630+
if (viewport.isViewportSmall) setDrawerOpen(false);
631+
setSelectedIndicatorOffset(event.currentTarget.offsetTop);
632+
}}
633+
/>
634+
</List>
635+
<Divider />
636+
<List sx={{ position: "static" }}>
637+
<DrawerTab
638+
label={gallerySectionLabel.PdfDocuments}
639+
icon={<FaIcon icon="fa-circle-down" />}
640+
index={8}
641+
tabIndex={getTabIndex(8)}
642+
ref={getRef(8)}
643+
drawerOpen={drawerOpen}
644+
selected={selectedSection === "PdfDocuments"}
645+
onClick={(event) => {
646+
setSelectedSection("PdfDocuments");
647+
if (viewport.isViewportSmall) setDrawerOpen(false);
648+
setSelectedIndicatorOffset(event.currentTarget.offsetTop);
649+
}}
650+
/>
651+
</List>
652+
</div>
651653
</Box>
652654
</CustomDrawer>
653655
);

0 commit comments

Comments
 (0)