chore: Add missing labels to buttons without text and search inputs

app/components/IconPicker.js

@@ -145,8 +145,8 @@ function IconPicker({ onOpen, icon, color, onChange }: Props) {
       </Label>
       <MenuButton {...menu}>
         {(props) => (
-          <Button {...props}>
-            <Component role="button" color={color} size={30} />
+          <Button aria-label={t("Show menu")} {...props}>
+            <Component color={color} size={30} />
           </Button>
         )}
       </MenuButton>

app/components/Sidebar/Sidebar.js

@@ -1,6 +1,7 @@
 // @flow
 import { observer } from "mobx-react";
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 import { Portal } from "react-portal";
 import { withRouter } from "react-router-dom";
 import type { Location } from "react-router-dom";
@@ -85,6 +86,7 @@ const useResize = ({ width, minWidth, maxWidth, setWidth }) => {
 
 function Sidebar({ location, children }: Props) {
   const theme = useTheme();
+  const { t } = useTranslation();
   const { ui } = useStores();
   const previousLocation = usePrevious(location);
 
@@ -157,7 +159,7 @@ function Sidebar({ location, children }: Props) {
           onDoubleClick={handleReset}
           $isResizing={isResizing}
         >
-          <ResizeHandle />
+          <ResizeHandle name={t("Resize sidebar")} />
         </ResizeBorder>
       )}
     </Container>

app/components/Sidebar/components/CollapseToggle.js

@@ -21,7 +21,7 @@ function CollapseToggle({ collapsed, ...rest }: Props) {
       delay={500}
       placement="bottom"
     >
-      <Button {...rest} aria-hidden>
+      <Button {...rest} tabIndex="-1" aria-hidden>
         {collapsed ? (
           <NextIcon color="currentColor" />
         ) : (

app/menus/BreadcrumbMenu.js

@@ -19,7 +19,7 @@ export default function BreadcrumbMenu({ path }: Props) {
 
   return (
     <>
-      <OverflowMenuButton {...menu} />
+      <OverflowMenuButton aria-label={t("Show path to document")} {...menu} />
       <ContextMenu {...menu} aria-label={t("Path to document")}>
         <Template
           {...menu}

app/menus/CollectionGroupMemberMenu.js

@@ -18,7 +18,7 @@ function CollectionGroupMemberMenu({ onMembers, onRemove }: Props) {
 
   return (
     <>
-      <OverflowMenuButton {...menu} />
+      <OverflowMenuButton aria-label={t("Show menu")} {...menu} />
       <ContextMenu {...menu} aria-label={t("Group member options")}>
         <Template
           {...menu}

app/menus/CollectionMenu.js

@@ -116,7 +116,7 @@ function CollectionMenu({
       {label ? (
         <MenuButton {...menu}>{label}</MenuButton>
       ) : (
-        <OverflowMenuButton {...menu} />
+        <OverflowMenuButton aria-label={t("Show menu")} {...menu} />
       )}
       <ContextMenu
         {...menu}

app/menus/CollectionSortMenu.js

@@ -38,7 +38,7 @@ function CollectionSortMenu({ collection, onOpen, onClose, ...rest }: Props) {
     <>
       <MenuButton {...menu}>
         {(props) => (
-          <NudeButton {...props}>
+          <NudeButton aria-label={t("Show sort menu")} {...props}>
             {alphabeticalSort ? <AlphabeticalSortIcon /> : <ManualSortIcon />}
           </NudeButton>
         )}

app/menus/DocumentMenu.js

@@ -140,7 +140,11 @@ function DocumentMenu({
       {label ? (
         <MenuButton {...menu}>{label}</MenuButton>
       ) : (
-        <OverflowMenuButton className={className} {...menu} />
+        <OverflowMenuButton
+          className={className}
+          aria-label={t("Show menu")}
+          {...menu}
+        />
       )}
       <ContextMenu
         {...menu}

app/menus/GroupMemberMenu.js

@@ -17,7 +17,7 @@ function GroupMemberMenu({ onRemove }: Props) {
 
   return (
     <>
-      <OverflowMenuButton {...menu} />
+      <OverflowMenuButton aria-label={t("Show menu")} {...menu} />
       <ContextMenu {...menu} aria-label={t("Group member options")}>
         <Template
           {...menu}

app/menus/GroupMenu.js

@@ -41,7 +41,7 @@ function GroupMenu({ group, onMembers }: Props) {
       >
         <GroupDelete group={group} onSubmit={() => setDeleteModalOpen(false)} />
       </Modal>
-      <OverflowMenuButton {...menu} />
+      <OverflowMenuButton aria-label={t("Show menu")} {...menu} />
       <ContextMenu {...menu} aria-label={t("Group options")}>
         <Template
           {...menu}

app/menus/MemberMenu.js

@@ -17,7 +17,7 @@ function MemberMenu({ onRemove }: Props) {
 
   return (
     <>
-      <OverflowMenuButton {...menu} />
+      <OverflowMenuButton aria-label={t("Show menu")} {...menu} />
       <ContextMenu {...menu} aria-label={t("Member options")}>
         <Template
           {...menu}

app/menus/RevisionMenu.js

@@ -51,6 +51,7 @@ function RevisionMenu({ document, revision, className, iconColor }: Props) {
       <OverflowMenuButton
         className={className}
         iconColor={iconColor}
+        aria-label={t("Show menu")}
         {...menu}
       />
       <ContextMenu {...menu} aria-label={t("Revision options")}>

app/menus/ShareMenu.js

@@ -49,7 +49,7 @@ function ShareMenu({ share }: Props) {
 
   return (
     <>
-      <OverflowMenuButton {...menu} />
+      <OverflowMenuButton aria-label={t("Show menu")} {...menu} />
       <ContextMenu {...menu} aria-label={t("Share options")}>
         <CopyToClipboard text={share.url} onCopy={handleCopy}>
           <MenuItem {...menu}>{t("Copy link")}</MenuItem>

app/menus/UserMenu.js

@@ -88,7 +88,7 @@ function UserMenu({ user }: Props) {
 
   return (
     <>
-      <OverflowMenuButton {...menu} />
+      <OverflowMenuButton aria-label={t("Show menu")} {...menu} />
       <ContextMenu {...menu} aria-label={t("User options")}>
         <Template
           {...menu}

app/scenes/Collection.js

@@ -145,6 +145,8 @@ class CollectionScene extends React.Component<Props> {
               <InputSearch
                 source="collection"
                 placeholder={`${t("Search in collection")}…`}
+                label={`${t("Search in collection")}…`}
+                labelHidden
                 collectionId={match.params.id}
               />
             </Action>

app/scenes/Dashboard.js

@@ -64,7 +64,11 @@ function Dashboard() {
       </Switch>
       <Actions align="center" justify="flex-end">
         <Action>
-          <InputSearch source="dashboard" />
+          <InputSearch
+            source="dashboard"
+            label={t("Search documents")}
+            labelHidden
+          />
         </Action>
         <Action>
           <NewDocumentMenu />

app/scenes/Drafts.js

@@ -113,7 +113,11 @@ class Drafts extends React.Component<Props> {
 
         <Actions align="center" justify="flex-end">
           <Action>
-            <InputSearch source="drafts" />
+            <InputSearch
+              source="drafts"
+              label={t("Search documents")}
+              labelHidden
+            />
           </Action>
           <Action>
             <NewDocumentMenu />

app/scenes/Starred.js

@@ -48,7 +48,11 @@ function Starred(props: Props) {
 
       <Actions align="center" justify="flex-end">
         <Action>
-          <InputSearch source="starred" />
+          <InputSearch
+            source="starred"
+            label={t("Search documents")}
+            labelHidden
+          />
         </Action>
         <Action>
           <NewDocumentMenu />