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 76d4c9a9a..59ab11122 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 17fb09f85..a56c52918 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 1332c30be..e780bfe29 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 5d8cc5089..aa55d0800 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 95b4051ad..6826f8272 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 0dc588443..ab40a6368 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 fbcc9aca9..52fb65072 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 43dd2114c..a02840ce5 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 9a5bdb12c..d1f726a7e 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 8c7c3bb03..5cbf8f573 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 6725c039f..0f57c29f9 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 248136fea..149cb6fd1 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 1d8fdfb58..2c5b47c16 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 ddc1fbabe..69c7dfe44 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 c0288def8..4710d7d89 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 4c830ce40..e4e57e0c7 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 000000000..2571d0a94
--- /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
--
GitLab