From 5f528018698906bef812b34660394b89d2c14154 Mon Sep 17 00:00:00 2001
From: Michael Clark <5285928+MikesGlitch@users.noreply.github.com>
Date: Mon, 4 Dec 2023 19:31:38 +0000
Subject: [PATCH] [Maintenance] Adding Aria labels for accessibility (#2025)

---
 packages/desktop-client/src/components/NotesButton.tsx     | 1 +
 packages/desktop-client/src/components/Notifications.tsx   | 1 +
 packages/desktop-client/src/components/ThemeSelector.tsx   | 1 +
 packages/desktop-client/src/components/Titlebar.tsx        | 2 ++
 .../desktop-client/src/components/UpdateNotification.tsx   | 1 +
 packages/desktop-client/src/components/accounts/Header.js  | 1 +
 .../desktop-client/src/components/budget/BudgetTotals.tsx  | 1 +
 .../src/components/budget/MobileBudgetTable.js             | 5 +++++
 .../budget/report/budgetsummary/BudgetSummary.tsx          | 3 ++-
 .../budget/rollover/budgetsummary/BudgetSummary.tsx        | 3 ++-
 .../desktop-client/src/components/manager/BudgetList.js    | 2 ++
 .../src/components/schedules/SchedulesTable.tsx            | 1 +
 .../src/components/select/RecurringSchedulePicker.js       | 2 ++
 .../desktop-client/src/components/sidebar/ToggleButton.tsx | 7 ++++++-
 .../src/components/transactions/TransactionsTable.js       | 1 +
 .../desktop-client/src/components/util/AmountInput.tsx     | 1 +
 upcoming-release-notes/2025.md                             | 6 ++++++
 17 files changed, 36 insertions(+), 3 deletions(-)
 create mode 100644 upcoming-release-notes/2025.md

diff --git a/packages/desktop-client/src/components/NotesButton.tsx b/packages/desktop-client/src/components/NotesButton.tsx
index 76d4c9a9aca..59ab1112259 100644
--- a/packages/desktop-client/src/components/NotesButton.tsx
+++ b/packages/desktop-client/src/components/NotesButton.tsx
@@ -188,6 +188,7 @@ export default function NotesButton({
     >
       <Button
         type="bare"
+        aria-label="View notes"
         className={!hasNotes && !tooltipOpen ? 'hover-visible' : ''}
         style={{
           color: defaultColor,
diff --git a/packages/desktop-client/src/components/Notifications.tsx b/packages/desktop-client/src/components/Notifications.tsx
index 17fb09f8563..a56c529187d 100644
--- a/packages/desktop-client/src/components/Notifications.tsx
+++ b/packages/desktop-client/src/components/Notifications.tsx
@@ -197,6 +197,7 @@ function Notification({
         {sticky && (
           <Button
             type="bare"
+            aria-label="Close"
             style={{ flexShrink: 0, color: 'currentColor' }}
             onClick={onRemove}
           >
diff --git a/packages/desktop-client/src/components/ThemeSelector.tsx b/packages/desktop-client/src/components/ThemeSelector.tsx
index 1332c30be20..e780bfe296d 100644
--- a/packages/desktop-client/src/components/ThemeSelector.tsx
+++ b/packages/desktop-client/src/components/ThemeSelector.tsx
@@ -21,6 +21,7 @@ export function ThemeSelector({ style }: ThemeSelectorProps) {
   return isNarrowWidth ? null : (
     <Button
       type="bare"
+      aria-label="Switch theme"
       onClick={() => {
         saveGlobalPrefs({
           theme: theme === 'dark' ? 'light' : 'dark',
diff --git a/packages/desktop-client/src/components/Titlebar.tsx b/packages/desktop-client/src/components/Titlebar.tsx
index 5d8cc508993..aa55d08005e 100644
--- a/packages/desktop-client/src/components/Titlebar.tsx
+++ b/packages/desktop-client/src/components/Titlebar.tsx
@@ -114,6 +114,7 @@ function PrivacyButton({ style }) {
   return (
     <Button
       type="bare"
+      aria-label={`${isPrivacyEnabled ? 'Disable' : 'Enable'} privacy mode`}
       onClick={() => savePrefs({ isPrivacyEnabled: !isPrivacyEnabled })}
       style={style}
     >
@@ -227,6 +228,7 @@ export function SyncButton({ style, isMobile = false }: SyncButtonProps) {
 
       <Button
         type="bare"
+        aria-label="Sync"
         style={
           isMobile
             ? {
diff --git a/packages/desktop-client/src/components/UpdateNotification.tsx b/packages/desktop-client/src/components/UpdateNotification.tsx
index 95b4051adee..6826f8272b3 100644
--- a/packages/desktop-client/src/components/UpdateNotification.tsx
+++ b/packages/desktop-client/src/components/UpdateNotification.tsx
@@ -77,6 +77,7 @@ export default function UpdateNotification() {
               )
               <Button
                 type="bare"
+                aria-label="Close"
                 style={{ display: 'inline', padding: '1px 7px 2px 7px' }}
                 onClick={() => closeNotification(setAppState)}
               >
diff --git a/packages/desktop-client/src/components/accounts/Header.js b/packages/desktop-client/src/components/accounts/Header.js
index 0dc588443fc..ab40a636894 100644
--- a/packages/desktop-client/src/components/accounts/Header.js
+++ b/packages/desktop-client/src/components/accounts/Header.js
@@ -168,6 +168,7 @@ export function AccountHeader({
                 )}
                 <Button
                   type="bare"
+                  aria-label="Edit account name"
                   className="hover-visible"
                   onClick={() => onExposeName(true)}
                 >
diff --git a/packages/desktop-client/src/components/budget/BudgetTotals.tsx b/packages/desktop-client/src/components/budget/BudgetTotals.tsx
index fbcc9aca998..52fb650727d 100644
--- a/packages/desktop-client/src/components/budget/BudgetTotals.tsx
+++ b/packages/desktop-client/src/components/budget/BudgetTotals.tsx
@@ -55,6 +55,7 @@ const BudgetTotals = memo(function BudgetTotals({
         <View style={{ flexGrow: '1' }}>Category</View>
         <Button
           type="bare"
+          aria-label="Menu"
           onClick={() => {
             setMenuOpen(true);
           }}
diff --git a/packages/desktop-client/src/components/budget/MobileBudgetTable.js b/packages/desktop-client/src/components/budget/MobileBudgetTable.js
index 43dd2114cdb..a02840ce508 100644
--- a/packages/desktop-client/src/components/budget/MobileBudgetTable.js
+++ b/packages/desktop-client/src/components/budget/MobileBudgetTable.js
@@ -349,6 +349,7 @@ const ExpenseCategory = memo(function ExpenseCategory({
             <>
               <Button
                 type="bare"
+                aria-label="Menu"
                 style={{ padding: 10 }}
                 {...tooltip.getOpenEvents()}
               >
@@ -633,6 +634,7 @@ const ExpenseGroupTotals = memo(function ExpenseGroupTotals({
             <>
               <Button
                 type="bare"
+                aria-label="Menu"
                 style={{ padding: 10 }}
                 {...tooltip.getOpenEvents()}
               >
@@ -887,6 +889,7 @@ const IncomeGroupTotals = memo(function IncomeGroupTotals({
             <>
               <Button
                 type="bare"
+                aria-label="Menu"
                 style={{ padding: 10 }}
                 {...tooltip.getOpenEvents()}
               >
@@ -1091,6 +1094,7 @@ const IncomeCategory = memo(function IncomeCategory({
             <>
               <Button
                 type="bare"
+                aria-label="Menu"
                 style={{ padding: 10 }}
                 {...tooltip.getOpenEvents()}
               >
@@ -2107,6 +2111,7 @@ function BudgetHeader({
           <>
             <Button
               type="bare"
+              aria-label="Menu"
               hoveredStyle={{
                 color: theme.mobileHeaderText,
                 background: theme.mobileHeaderTextHover,
diff --git a/packages/desktop-client/src/components/budget/report/budgetsummary/BudgetSummary.tsx b/packages/desktop-client/src/components/budget/report/budgetsummary/BudgetSummary.tsx
index 9a5bdb12cf9..d1f726a7ed5 100644
--- a/packages/desktop-client/src/components/budget/report/budgetsummary/BudgetSummary.tsx
+++ b/packages/desktop-client/src/components/budget/report/budgetsummary/BudgetSummary.tsx
@@ -84,6 +84,7 @@ export default function BudgetSummary({ month }: BudgetSummaryProps) {
           >
             <Button
               type="bare"
+              aria-label={`${collapsed ? 'Expand' : 'Collapse'} month summary`}
               className="hover-visible"
               onClick={onToggleSummaryCollapse}
             >
@@ -129,7 +130,7 @@ export default function BudgetSummary({ month }: BudgetSummaryProps) {
               />
             </View>
             <View style={{ userSelect: 'none' }}>
-              <Button type="bare" onClick={onMenuOpen}>
+              <Button type="bare" aria-label="Menu" onClick={onMenuOpen}>
                 <DotsHorizontalTriple
                   width={15}
                   height={15}
diff --git a/packages/desktop-client/src/components/budget/rollover/budgetsummary/BudgetSummary.tsx b/packages/desktop-client/src/components/budget/rollover/budgetsummary/BudgetSummary.tsx
index 8c7c3bb0381..5cbf8f57343 100644
--- a/packages/desktop-client/src/components/budget/rollover/budgetsummary/BudgetSummary.tsx
+++ b/packages/desktop-client/src/components/budget/rollover/budgetsummary/BudgetSummary.tsx
@@ -86,6 +86,7 @@ export default function BudgetSummary({
           >
             <Button
               type="bare"
+              aria-label={`${collapsed ? 'Expand' : 'Collapse'} month summary`}
               className="hover-visible"
               onClick={onToggleSummaryCollapse}
             >
@@ -132,7 +133,7 @@ export default function BudgetSummary({
               />
             </View>
             <View style={{ userSelect: 'none', marginLeft: 2 }}>
-              <Button type="bare" onClick={onMenuOpen}>
+              <Button type="bare" aria-label="Menu" onClick={onMenuOpen}>
                 <DotsHorizontalTriple
                   width={15}
                   height={15}
diff --git a/packages/desktop-client/src/components/manager/BudgetList.js b/packages/desktop-client/src/components/manager/BudgetList.js
index 6725c039f91..0f57c29f954 100644
--- a/packages/desktop-client/src/components/manager/BudgetList.js
+++ b/packages/desktop-client/src/components/manager/BudgetList.js
@@ -63,6 +63,7 @@ function DetailButton({ state, onDelete }) {
     <View>
       <Button
         type="bare"
+        aria-label="Menu"
         onClick={e => {
           e.stopPropagation();
           setMenuOpen(true);
@@ -235,6 +236,7 @@ function RefreshButton({ onRefresh }) {
   return (
     <Button
       type="bare"
+      aria-label="Refresh"
       style={{ padding: 10, marginRight: 5 }}
       onClick={_onRefresh}
     >
diff --git a/packages/desktop-client/src/components/schedules/SchedulesTable.tsx b/packages/desktop-client/src/components/schedules/SchedulesTable.tsx
index 248136fea10..149cb6fd188 100644
--- a/packages/desktop-client/src/components/schedules/SchedulesTable.tsx
+++ b/packages/desktop-client/src/components/schedules/SchedulesTable.tsx
@@ -98,6 +98,7 @@ function OverflowMenu({
     <View>
       <Button
         type="bare"
+        aria-label="Menu"
         onClick={e => {
           e.stopPropagation();
           setOpen(true);
diff --git a/packages/desktop-client/src/components/select/RecurringSchedulePicker.js b/packages/desktop-client/src/components/select/RecurringSchedulePicker.js
index 1d8fdfb58fb..2c5b47c16e7 100644
--- a/packages/desktop-client/src/components/select/RecurringSchedulePicker.js
+++ b/packages/desktop-client/src/components/select/RecurringSchedulePicker.js
@@ -243,6 +243,7 @@ function MonthlyPatterns({ config, dispatch }) {
           />
           <Button
             type="bare"
+            aria-label="Remove recurrence"
             style={{ padding: 7 }}
             onClick={() =>
               dispatch({
@@ -255,6 +256,7 @@ function MonthlyPatterns({ config, dispatch }) {
           </Button>
           <Button
             type="bare"
+            aria-label="Add recurrence"
             style={{ padding: 7, marginLeft: 5 }}
             onClick={() => dispatch({ type: 'add-recurrence' })}
           >
diff --git a/packages/desktop-client/src/components/sidebar/ToggleButton.tsx b/packages/desktop-client/src/components/sidebar/ToggleButton.tsx
index ddc1fbabef4..69c7dfe4486 100644
--- a/packages/desktop-client/src/components/sidebar/ToggleButton.tsx
+++ b/packages/desktop-client/src/components/sidebar/ToggleButton.tsx
@@ -15,7 +15,12 @@ type ToggleButtonProps = {
 function ToggleButton({ style, isFloating, onFloat }: ToggleButtonProps) {
   return (
     <View className="float" style={{ ...style, flexShrink: 0 }}>
-      <Button type="bare" onClick={onFloat} color={theme.buttonMenuBorder}>
+      <Button
+        type="bare"
+        aria-label={`${isFloating ? 'Pin' : 'Unpin'} sidebar`}
+        onClick={onFloat}
+        color={theme.buttonMenuBorder}
+      >
         {isFloating ? (
           <Pin
             style={{
diff --git a/packages/desktop-client/src/components/transactions/TransactionsTable.js b/packages/desktop-client/src/components/transactions/TransactionsTable.js
index c0288def8a9..4710d7d89ed 100644
--- a/packages/desktop-client/src/components/transactions/TransactionsTable.js
+++ b/packages/desktop-client/src/components/transactions/TransactionsTable.js
@@ -663,6 +663,7 @@ function PayeeIcons({
       {transferAccount && (
         <Button
           type="bare"
+          aria-label="Transfer"
           style={buttonStyle}
           onClick={e => {
             e.stopPropagation();
diff --git a/packages/desktop-client/src/components/util/AmountInput.tsx b/packages/desktop-client/src/components/util/AmountInput.tsx
index 4c830ce4096..e4e57e0c7a3 100644
--- a/packages/desktop-client/src/components/util/AmountInput.tsx
+++ b/packages/desktop-client/src/components/util/AmountInput.tsx
@@ -88,6 +88,7 @@ export function AmountInput({
       leftContent={
         <Button
           type="bare"
+          aria-label={`Make ${negative ? 'positive' : 'negative'}`}
           style={{ padding: '0 7px' }}
           onPointerUp={onSwitch}
           onPointerDown={e => e.preventDefault()}
diff --git a/upcoming-release-notes/2025.md b/upcoming-release-notes/2025.md
new file mode 100644
index 00000000000..2571d0a9427
--- /dev/null
+++ b/upcoming-release-notes/2025.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [MikesGlitch]
+---
+
+Adding aria-labels to some buttons for greater accessibility