rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: popover a11y aria attributes

Browse Source
This commit is contained in:
Aman Harwara
2023-08-14 14:42:33 +05:30
parent e1c5d52dbe
commit 4865e3ba28
31 changed files with 110 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
packages/web/src/javascripts/Components/ContentListView/Header/AddItemMenuButton.tsx
View File

@@ -67,47 +67,49 @@ const AddItemMenuButton = ({
<Icon type="add" size="custom" className="h-5 w-5" />
</button>
</StyledTooltip>
<Popover
title="Add item"
open={canShowMenu && isMenuOpen}
anchorElement={addItemButtonRef.current}
togglePopover={() => {
setIsMenuOpen((isOpen) => !isOpen)
}}
side="bottom"
align="center"
className="py-2"
>
<Menu a11yLabel={'test'} isOpen={isMenuOpen}>
<MenuItem
onClick={() => {
addNewItem()
setIsMenuOpen(false)
}}
>
<Icon type="add" className="mr-2" />
{addButtonLabel}
</MenuItem>
<MenuItem
onClick={async () => {
setCaptureType('photo')
setIsMenuOpen(false)
}}
>
<Icon type="camera" className="mr-2" />
Take photo
</MenuItem>
<MenuItem
onClick={async () => {
setCaptureType('video')
setIsMenuOpen(false)
}}
>
<Icon type="camera" className="mr-2" />
Record video
</MenuItem>
</Menu>
</Popover>
{canShowMenu && (
<Popover
title="Add item"
open={isMenuOpen}
anchorElement={addItemButtonRef}
togglePopover={() => {
setIsMenuOpen((isOpen) => !isOpen)
}}
side="bottom"
align="center"
className="py-2"
>
<Menu a11yLabel={'test'} isOpen={isMenuOpen}>
<MenuItem
onClick={() => {
addNewItem()
setIsMenuOpen(false)
}}
>
<Icon type="add" className="mr-2" />
{addButtonLabel}
</MenuItem>
<MenuItem
onClick={async () => {
setCaptureType('photo')
setIsMenuOpen(false)
}}
>
<Icon type="camera" className="mr-2" />
Take photo
</MenuItem>
<MenuItem
onClick={async () => {
setCaptureType('video')
setIsMenuOpen(false)
}}
>
<Icon type="camera" className="mr-2" />
Record video
</MenuItem>
</Menu>
</Popover>
)}
<ModalOverlay isOpen={captureType === 'photo'} close={closeCaptureModal}>
<PhotoCaptureModal filesController={filesController} close={closeCaptureModal} />
</ModalOverlay>

2
packages/web/src/javascripts/Components/ContentListView/Header/ContentListHeader.tsx
View File

@@ -116,7 +116,7 @@ const ContentListHeader = ({
/>
<Popover
open={showDisplayOptionsMenu}
anchorElement={displayOptionsButtonRef.current}
anchorElement={displayOptionsButtonRef}
togglePopover={toggleDisplayOptionsMenu}
align="start"
className="py-2"