[Maintenance] Adding Aria labels for accessibility (#2025)

actualbudget · Dec 4, 2023 · 5f52801 · 5f52801
1 parent 6bfd958
commit 5f52801
Show file tree

Hide file tree

Showing 17 changed files with 36 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [MikesGlitch]
+---
+
+Adding aria-labels to some buttons for greater accessibility