fix: ARIA fixes, missing button labels

app/components/DocumentCard.tsx

@@ -108,7 +108,7 @@ function DocumentCard(props: Props) {
           <Actions dir={document.dir} gap={4}>
             {!isDragging && pin && (
               <Tooltip tooltip={t("Unpin")}>
-                <PinButton onClick={handleUnpin}>
+                <PinButton onClick={handleUnpin} aria-label={t("Unpin")}>
                   <CloseIcon color="currentColor" />
                 </PinButton>
               </Tooltip>

app/components/DocumentListItem.tsx

@@ -78,6 +78,7 @@ function DocumentListItem(
       as={DocumentLink}
       ref={ref}
       dir={document.dir}
+      role="menuitem"
       $isStarred={document.isStarred}
       $menuOpen={menuOpen}
       to={{

app/components/Sidebar/App.tsx

@@ -60,7 +60,12 @@ function AppSidebar() {
                 {...props}
                 title={team.name}
                 image={
-                  <StyledTeamLogo src={team.avatarUrl} width={32} height={32} />
+                  <StyledTeamLogo
+                    src={team.avatarUrl}
+                    width={32}
+                    height={32}
+                    alt={t("Logo")}
+                  />
                 }
                 showDisclosure
               />

app/components/Sidebar/Sidebar.tsx

@@ -177,6 +177,7 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(
                   title={user.name}
                   image={
                     <StyledAvatar
+                      alt={user.name}
                       src={user.avatarUrl}
                       size={24}
                       showBorder={false}

app/components/Sidebar/components/Disclosure.tsx

@@ -1,5 +1,6 @@
 import { CollapsedIcon } from "outline-icons";
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 import styled, { css } from "styled-components";
 import NudeButton from "~/components/NudeButton";
 
@@ -10,8 +11,16 @@ type Props = {
 };
 
 function Disclosure({ onClick, root, expanded, ...rest }: Props) {
+  const { t } = useTranslation();
+
   return (
-    <Button size={20} onClick={onClick} $root={root} {...rest}>
+    <Button
+      size={20}
+      onClick={onClick}
+      $root={root}
+      aria-label={expanded ? t("Collapse") : t("Expand")}
+      {...rest}
+    >
       <StyledCollapsedIcon expanded={expanded} size={20} color="currentColor" />
     </Button>
   );

app/editor/components/CommandMenu.tsx

@@ -2,6 +2,7 @@ import { capitalize } from "lodash";
 import { findDomRefAtPos, findParentNode } from "prosemirror-utils";
 import { EditorView } from "prosemirror-view";
 import * as React from "react";
+import { Trans } from "react-i18next";
 import { Portal } from "react-portal";
 import { VisuallyHidden } from "reakit/VisuallyHidden";
 import styled from "styled-components";
@@ -545,11 +546,14 @@ class CommandMenu<T = MenuItem> extends React.Component<Props<T>, State> {
           )}
           {uploadFile && (
             <VisuallyHidden>
-              <input
-                type="file"
-                ref={this.inputRef}
-                onChange={this.handleFilePicked}
-              />
+              <label>
+                <Trans>Import document</Trans>
+                <input
+                  type="file"
+                  ref={this.inputRef}
+                  onChange={this.handleFilePicked}
+                />
+              </label>
             </VisuallyHidden>
           )}
         </Wrapper>

app/menus/CollectionMenu.tsx

@@ -238,14 +238,17 @@ function CollectionMenu({
   return (
     <>
       <VisuallyHidden>
-        <input
-          type="file"
-          ref={file}
-          onChange={handleFilePicked}
-          onClick={stopPropagation}
-          accept={documents.importFileTypes.join(", ")}
-          tabIndex={-1}
-        />
+        <label>
+          {t("Import document")}
+          <input
+            type="file"
+            ref={file}
+            onChange={handleFilePicked}
+            onClick={stopPropagation}
+            accept={documents.importFileTypes.join(", ")}
+            tabIndex={-1}
+          />
+        </label>
       </VisuallyHidden>
       {label ? (
         <MenuButton {...menu}>{label}</MenuButton>

app/menus/DocumentMenu.tsx

@@ -258,14 +258,17 @@ function DocumentMenu({
   return (
     <>
       <VisuallyHidden>
-        <input
-          type="file"
-          ref={file}
-          onChange={handleFilePicked}
-          onClick={stopPropagation}
-          accept={documents.importFileTypes.join(", ")}
-          tabIndex={-1}
-        />
+        <label>
+          {t("Import document")}
+          <input
+            type="file"
+            ref={file}
+            onChange={handleFilePicked}
+            onClick={stopPropagation}
+            accept={documents.importFileTypes.join(", ")}
+            tabIndex={-1}
+          />
+        </label>
       </VisuallyHidden>
       {label ? (
         <MenuButton {...menu}>{label}</MenuButton>

app/scenes/Collection/Actions.tsx

@@ -62,6 +62,7 @@ function Actions({ collection }: Props) {
           placement="bottom-end"
           label={(props) => (
             <Button
+              aria-label={t("Collection menu")}
               icon={<MoreIcon />}
               {...props}
               borderOnHover

app/scenes/Search/components/RecentSearches.tsx

@@ -30,6 +30,7 @@ function RecentSearches() {
               {searchQuery.query}
               <Tooltip tooltip={t("Remove search")} delay={150}>
                 <RemoveButton
+                  aria-label={t("Remove search")}
                   onClick={(ev) => {
                     ev.preventDefault();
                     searchQuery.delete();

shared/i18n/locales/en_US/translation.json

@@ -136,6 +136,7 @@
   "Dismiss": "Dismiss",
   "Back": "Back",
   "Documents": "Documents",
+  "Logo": "Logo",
   "Document archived": "Document archived",
   "Move document": "Move document",
   "Collections": "Collections",
@@ -299,6 +300,7 @@
   "Least recently updated": "Least recently updated",
   "A–Z": "A–Z",
   "Search in collection": "Search in collection",
+  "Collection menu": "Collection menu",
   "Drop documents to import": "Drop documents to import",
   "<em>{{ collectionName }}</em> doesn’t contain any\n                    documents yet.": "<em>{{ collectionName }}</em> doesn’t contain any\n                    documents yet.",
   "Get started by creating a new one!": "Get started by creating a new one!",
@@ -551,7 +553,6 @@
   "Logo updated": "Logo updated",
   "Unable to upload new logo": "Unable to upload new logo",
   "These settings affect the way that your knowledge base appears to everyone on the team.": "These settings affect the way that your knowledge base appears to everyone on the team.",
-  "Logo": "Logo",
   "The logo is displayed at the top left of the application.": "The logo is displayed at the top left of the application.",
   "The team name, usually the same as your company name.": "The team name, usually the same as your company name.",
   "Subdomain": "Subdomain",