Accessible Icon Buttons

tone-row · Jul 13, 2023 · 39f2f34 · 39f2f34
1 parent 5ccf7e3
commit 39f2f34
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 5 deletions.
diff --git a/app/src/components/GraphFloatingMenu.tsx b/app/src/components/GraphFloatingMenu.tsx
@@ -42,6 +42,7 @@ export function GraphFloatingMenu() {
       <Tooltip2 content={t`Reset`}>
         <IconButton2
           size="xs"
+          aria-label={t`Reset`}
           onClick={() => {
             useUnmountStore.setState({
               unmount: true,
@@ -55,17 +56,18 @@ export function GraphFloatingMenu() {
         </IconButton2>
       </Tooltip2>
       <Tooltip2 content={t`Zoom In`}>
-        <IconButton2 size="xs" onClick={zoomIn}>
+        <IconButton2 size="xs" onClick={zoomIn} aria-label={t`Zoom In`}>
           <Plus size={16} />
         </IconButton2>
       </Tooltip2>
       <Tooltip2 content={t`Zoom Out`}>
-        <IconButton2 size="xs" onClick={zoomOut}>
+        <IconButton2 size="xs" onClick={zoomOut} aria-label={t`Zoom Out`}>
           <Minus size={16} />
         </IconButton2>
       </Tooltip2>
       <Tooltip2 content={t`Lock Zoom to Graph`}>
         <IconToggleButton
+          aria-label={t`Lock Zoom to Graph`}
           size="xs"
           pressed={autoFit}
           onPressedChange={(pressed) => {
@@ -80,6 +82,7 @@ export function GraphFloatingMenu() {
       </Tooltip2>
       <Tooltip2 content={t`Layout Frozen`}>
         <IconToggleButton
+          aria-label={t`Layout Frozen`}
           size="xs"
           pressed={isFrozen}
           onPressedChange={(pressed) => {

diff --git a/app/src/components/MightLoseSponsorTrigger.tsx b/app/src/components/MightLoseSponsorTrigger.tsx
@@ -18,7 +18,7 @@ export function MightLoseSponsorTrigger() {
   return (
     <Popover.Root>
       <Popover.Trigger asChild>
-        <IconButton2>
+        <IconButton2 aria-label={t`Temporary Flowchart Warning`}>
           <Warning size={16} />
         </IconButton2>
       </Popover.Trigger>

diff --git a/app/src/components/MightLoseWarning.tsx b/app/src/components/MightLoseWarning.tsx
@@ -1,4 +1,4 @@
-import { Trans } from "@lingui/macro";
+import { t, Trans } from "@lingui/macro";
 import * as Popover from "@radix-ui/react-popover";
 import { Warning } from "phosphor-react";
 import { useContext } from "react";
@@ -16,7 +16,7 @@ export function MightLoseWarning() {
   return (
     <Popover.Root>
       <Popover.Trigger asChild>
-        <IconButton2>
+        <IconButton2 aria-label={t`Temporary Flowchart Warning`}>
           <Warning size={16} />
         </IconButton2>
       </Popover.Trigger>