improve menu buttons

src/components/Container.ts

@@ -78,4 +78,7 @@ export const InvertedIconButton = styled(IconButton)`
     &:hover {
         background-color: ${({ theme }) => theme.palette.grey.A100};
     }
+    &:focus {
+        background-color: ${({ theme }) => theme.palette.primary.main};
+    }
 `;

src/components/pages/gallery/CollectionOptions.tsx

@@ -161,18 +161,18 @@ const CollectionOptions = (props: CollectionOptionsProps) => {
                     transform: 'rotate(90deg)',
                 }}
                 onClick={(event) => setOptionEl(event.currentTarget)}
-                aria-controls={optionEl ? 'basic-menu' : undefined}
+                aria-controls={optionEl ? 'collection-options' : undefined}
                 aria-haspopup="true"
                 aria-expanded={optionEl ? 'true' : undefined}>
                 <OptionIcon />
             </InvertedIconButton>
             <Menu
-                id="basic-menu"
+                id="collection-options"
                 anchorEl={optionEl}
                 open={Boolean(optionEl)}
                 onClose={handleClose}
                 MenuListProps={{
-                    'aria-labelledby': 'basic-button',
+                    'aria-labelledby': 'collection-options',
                 }}>
                 <Paper sx={{ borderRadius: '10px' }}>
                     <MenuList

src/components/pages/gallery/CollectionSort.tsx

@@ -64,15 +64,19 @@ export default function CollectionSort(props: Props) {
         <>
             <IconButton
                 onClick={(event) => setSortByEl(event.currentTarget)}
-                aria-controls={sortByEl ? 'basic-menu' : undefined}
+                aria-controls={sortByEl ? 'collection-sort' : undefined}
                 aria-haspopup="true"
                 aria-expanded={sortByEl ? 'true' : undefined}>
                 <SortIcon />
             </IconButton>
             <Menu
+                id="collection-sort"
                 anchorEl={sortByEl}
                 open={Boolean(sortByEl)}
-                onClose={handleClose}>
+                onClose={handleClose}
+                MenuListProps={{
+                    'aria-labelledby': 'collection-sort',
+                }}>
                 <CollectionSortOptions {...props} close={handleClose} />
             </Menu>
         </>