Skip to content

Item Resource dropdown: accessibility and layout fixes #867

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
thostetler merged 3 commits into from
May 19, 2026
Merged

Item Resource dropdown: accessibility and layout fixes #867

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
dba8ec0
Fix dropdown accessibility and focus issue
shinyichen May 14, 2026
7c9752b
Adjust layout and size of resouce dropdowns
shinyichen May 14, 2026
43c672d
Move tooltip to around menu button instead of the icon
shinyichen May 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 24 additions & 22 deletions src/components/Libraries/DocumentList/DocumentItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,28 +118,30 @@ export const DocumentItem = (props: IItemProps): ReactElement => {
<SimpleLink href={`/abs/${encodedCanonicalID}/abstract`} fontWeight="semibold">
<Text as={MathJax} dangerouslySetInnerHTML={{ __html: unwrapStringValue(title) }} />
</SimpleLink>
<Flex alignItems="start" ml={1}>
<Tooltip label={isOpen ? 'Hide annotation' : 'Show annotation'}>
<IconButton
aria-label={isOpen ? 'Hide annotation' : 'Show annotation'}
aria-expanded={isOpen}
icon={
<HStack spacing="1px" align="center">
<PencilSquareIcon width="18px" height="18px" />
<ChevronDownIcon
boxSize="14px"
transform={isOpen ? 'rotate(180deg)' : 'rotate(0deg)'}
transition="transform 0.2s ease"
/>
</HStack>
}
variant="link"
size="xs"
onClick={onToggle}
/>
</Tooltip>
{!isClient || hideResources ? null : <ItemResourceDropdowns doc={doc} defaultCitation={defaultCitation} />}
</Flex>
{!isClient || hideResources ? null : (
<Flex alignItems="start" ml={1}>
<ItemResourceDropdowns doc={doc} defaultCitation={defaultCitation} />
<Tooltip label={isOpen ? 'Hide annotation' : 'Show annotation'}>
<IconButton
aria-label={isOpen ? 'Hide annotation' : 'Show annotation'}
aria-expanded={isOpen}
icon={
<HStack spacing="1px" align="center" mx="6px" my="2px">
<PencilSquareIcon width="20px" height="20px" />
<ChevronDownIcon
boxSize="14px"
transform={isOpen ? 'rotate(180deg)' : 'rotate(0deg)'}
transition="transform 0.2s ease"
/>
</HStack>
}
variant="link"
size="sm"
onClick={onToggle}
/>
</Tooltip>
</Flex>
)}
</Flex>
<Flex direction="column">
<AuthorList author={author} authorCount={author_count} bibcode={doc.bibcode} maxAuthors={maxAuthors} />
Expand Down
110 changes: 57 additions & 53 deletions src/components/ResultList/Item/ItemResourceDropdowns.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,8 +167,9 @@ export const ItemResourceDropdowns = ({ doc }: IItemResourceDropdownsProps): Rea
{/* orcid menu */}
<SimpleAction doc={doc} />
{/* full resources menu */}
<Tooltip label="Full text sources" shouldWrapChildren isDisabled={isFullTextOpen}>
<Menu variant="compact" onOpen={() => setIsFullTextOpen(true)} onClose={() => setIsFullTextOpen(false)}>

<Menu variant="compact" onOpen={() => setIsFullTextOpen(true)} onClose={() => setIsFullTextOpen(false)}>
<Tooltip label="Full text sources" isDisabled={isFullTextOpen}>
<MenuButton
as={IconButton}
aria-label={fullSourceItems.length > 0 ? 'Full text sources' : 'No full text sources'}
Expand All @@ -177,21 +178,21 @@ export const ItemResourceDropdowns = ({ doc }: IItemResourceDropdownsProps): Rea
variant="link"
size="sm"
/>
{fullSourceItems.length > 0 && (
<MenuList>
{fullSourceItems.map((item) => (
<MenuItem key={item.id} data-id={item.id} onClick={handleResourceClick}>
{item.label}
</MenuItem>
))}
</MenuList>
)}
</Menu>
</Tooltip>
</Tooltip>
{fullSourceItems.length > 0 && (
<MenuList>
{fullSourceItems.map((item) => (
<MenuItem key={item.id} data-id={item.id} onClick={handleResourceClick}>
{item.label}
</MenuItem>
))}
</MenuList>
)}
</Menu>

{/* reference and citation items menu */}
<Tooltip label="References and citations" shouldWrapChildren isDisabled={isRefsOpen}>
<Menu variant="compact" onOpen={() => setIsRefsOpen(true)} onClose={() => setIsRefsOpen(false)}>
<Menu variant="compact" onOpen={() => setIsRefsOpen(true)} onClose={() => setIsRefsOpen(false)}>
<Tooltip label="References and citations" isDisabled={isRefsOpen}>
<MenuButton
as={IconButton}
aria-label={referenceItems.length > 0 ? 'References and citations' : 'No references and citations'}
Expand All @@ -200,21 +201,21 @@ export const ItemResourceDropdowns = ({ doc }: IItemResourceDropdownsProps): Rea
variant="link"
size="sm"
/>
{referenceItems.length > 0 && (
<MenuList>
{referenceItems.map((item) => (
<MenuItem key={item.id} data-id={item.id} onClick={handleReferenceClick}>
{item.label}
</MenuItem>
))}
</MenuList>
)}
</Menu>
</Tooltip>
</Tooltip>
{referenceItems.length > 0 && (
<MenuList>
{referenceItems.map((item) => (
<MenuItem key={item.id} data-id={item.id} onClick={handleReferenceClick}>
{item.label}
</MenuItem>
))}
</MenuList>
)}
</Menu>

{/* data product items menu */}
<Tooltip label="Data products" shouldWrapChildren isDisabled={isDataOpen}>
<Menu variant="compact" onOpen={() => setIsDataOpen(true)} onClose={() => setIsDataOpen(false)}>
<Menu variant="compact" onOpen={() => setIsDataOpen(true)} onClose={() => setIsDataOpen(false)}>
<Tooltip label="Data products" isDisabled={isDataOpen}>
<MenuButton
as={IconButton}
aria-label={dataProductItems.length > 0 ? 'Data products' : 'No data products'}
Expand All @@ -223,33 +224,36 @@ export const ItemResourceDropdowns = ({ doc }: IItemResourceDropdownsProps): Rea
variant="link"
size="sm"
/>
{dataProductItems.length > 0 && (
<MenuList>
{dataProductItems.map((item) => (
<MenuItem key={item.id} data-id={item.id} onClick={handleDataProductClick}>
{item.label}
</MenuItem>
))}
</MenuList>
)}
</Menu>
</Tooltip>
{/* share menu */}
<Tooltip label="Share options" shouldWrapChildren isDisabled={isShareOpen}>
<Menu variant="compact" isOpen={isShareOpen} onOpen={onShareOpen} onClose={onShareClose}>
<MenuButton
as={IconButton}
aria-label="share options"
icon={<ShareIcon width="20px" height="20px" />}
variant="link"
size="sm"
/>
</Tooltip>
{dataProductItems.length > 0 && (
<MenuList>
<MenuItem onClick={handleCopyAbstractUrl}>Copy URL</MenuItem>
<CopyMenuItem text={citation} onCopyComplete={handleCitationCopied} label="Copy Citation" asHtml />
{dataProductItems.map((item) => (
<MenuItem key={item.id} data-id={item.id} onClick={handleDataProductClick}>
{item.label}
</MenuItem>
))}
</MenuList>
</Menu>
</Tooltip>
)}
</Menu>

{/* share menu */}
<Menu variant="compact" isOpen={isShareOpen} onOpen={onShareOpen} onClose={onShareClose}>
<MenuButton
as={IconButton}
aria-label="share options"
icon={
<Tooltip label="Share options" isDisabled={isShareOpen}>
<ShareIcon width="20px" height="20px" />
</Tooltip>
}
variant="link"
size="sm"
/>
<MenuList>
<MenuItem onClick={handleCopyAbstractUrl}>Copy URL</MenuItem>
<CopyMenuItem text={citation} onCopyComplete={handleCitationCopied} label="Copy Citation" asHtml />
</MenuList>
</Menu>
</Flex>
);
};
Loading