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

2021-01-22 19:31:30 -08:00
parent 6a206de6cd
commit c9fdf48c33
19 changed files with 43 additions and 17 deletions
--- a/app/components/IconPicker.js
+++ b/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>
--- a/app/components/Sidebar/Sidebar.js
+++ b/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>
--- a/app/components/Sidebar/components/CollapseToggle.js
+++ b/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" />
        ) : (
--- a/app/menus/BreadcrumbMenu.js
+++ b/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}
--- a/app/menus/CollectionGroupMemberMenu.js
+++ b/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}
--- a/app/menus/CollectionMenu.js
+++ b/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}
--- a/app/menus/CollectionSortMenu.js
+++ b/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>
        )}
--- a/app/menus/DocumentMenu.js
+++ b/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}
--- a/app/menus/GroupMemberMenu.js
+++ b/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}
--- a/app/menus/GroupMenu.js
+++ b/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}
--- a/app/menus/MemberMenu.js
+++ b/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}
--- a/app/menus/RevisionMenu.js
+++ b/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")}>
--- a/app/menus/ShareMenu.js
+++ b/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>
--- a/app/menus/UserMenu.js
+++ b/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}
--- a/app/scenes/Collection.js
+++ b/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>
--- a/app/scenes/Dashboard.js
+++ b/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 />
--- a/app/scenes/Drafts.js
+++ b/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 />
--- a/app/scenes/Starred.js
+++ b/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 />
--- a/shared/i18n/locales/en_US/translation.json
+++ b/shared/i18n/locales/en_US/translation.json
@ -76,6 +76,7 @@
  "Warning": "Warning",
  "Warning notice": "Warning notice",
  "Icon": "Icon",
+  "Show menu": "Show menu",
  "Choose icon": "Choose icon",
  "Loading": "Loading",
  "Search": "Search",
@ -108,6 +109,7 @@
  "Export Data": "Export Data",
  "Integrations": "Integrations",
  "Installation": "Installation",
+  "Resize sidebar": "Resize sidebar",
  "Appearance": "Appearance",
  "System": "System",
  "Light": "Light",
@ -117,6 +119,7 @@
  "Send us feedback": "Send us feedback",
  "Report a bug": "Report a bug",
  "Log out": "Log out",
+  "Show path to document": "Show path to document",
  "Path to document": "Path to document",
  "Group member options": "Group member options",
  "Members": "Members",
@ -132,6 +135,7 @@
  "Edit collection": "Edit collection",
  "Delete collection": "Delete collection",
  "Export collection": "Export collection",
+  "Show sort menu": "Show sort menu",
  "Sort in sidebar": "Sort in sidebar",
  "Alphabetical sort": "Alphabetical sort",
  "Manual sort": "Manual sort",
@ -235,6 +239,7 @@
  "Create": "Create",
  "Recently viewed": "Recently viewed",
  "Created by me": "Created by me",
+  "Search documents": "Search documents",
  "Hide contents": "Hide contents",
  "Show contents": "Show contents",
  "Archived": "Archived",