arial-labels

packages/desktop-client/src/components/autocomplete/Autocomplete.tsx

@@ -621,7 +621,12 @@ function MultiItem({ name, onRemove }: MultiItemProps) {
       }}
     >
       {name}
-      <Button variant="bare" style={{ marginLeft: 1 }} onPress={onRemove}>
+      <Button
+        variant="bare"
+        aria-label="Remove autocomplete item"
+        style={{ marginLeft: 1 }}
+        onPress={onRemove}
+      >
         <SvgRemove style={{ width: 8, height: 8 }} />
       </Button>
     </View>

packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.tsx

@@ -367,6 +367,7 @@ export function PayeeAutocomplete({
               {showMakeTransfer && (
                 <Button
                   variant={focusTransferPayees ? 'menuSelected' : 'menu'}
+                  aria-label="Make transfer"
                   style={showManagePayees && { marginBottom: 5 }}
                   onPress={() => {
                     onUpdate?.(null, null);
@@ -377,7 +378,11 @@ export function PayeeAutocomplete({
                 </Button>
               )}
               {showManagePayees && (
-                <Button variant="menu" onPress={() => onManagePayees()}>
+                <Button
+                  variant="menu"
+                  aria-label="Manage payees"
+                  onPress={() => onManagePayees()}
+                >
                   Manage Payees
                 </Button>
               )}

packages/desktop-client/src/components/filters/FilterExpression.tsx

@@ -45,6 +45,8 @@ export function FilterExpression({
   const triggerRef = useRef(null);
 
   const field = subfieldFromFilter({ field: originalField, value });
+  const displayField = mapField(field, options);
+  const displayOp = friendlyOp(op, null);
 
   return (
     <View
@@ -61,6 +63,7 @@ export function FilterExpression({
       <Button
         ref={triggerRef}
         variant="bare"
+        aria-label={`${displayField} ${displayOp} ${value} filter`}
         isDisabled={customName != null}
         onPress={() => setEditing(true)}
       >
@@ -70,9 +73,9 @@ export function FilterExpression({
           ) : (
             <>
               <Text style={{ color: theme.pageTextPositive }}>
-                {mapField(field, options)}
+                {displayField}
               </Text>{' '}
-              <Text>{friendlyOp(op, null)}</Text>{' '}
+              <Text>{displayOp}</Text>{' '}
               <Value
                 value={value}
                 field={field}

packages/desktop-client/src/components/filters/FiltersButton.tsx

@@ -5,7 +5,7 @@ import { Button } from '../common/Button2';
 
 export function FiltersButton({ onClick }: { onClick: () => void }) {
   return (
-    <Button variant="bare" onPress={onClick}>
+    <Button variant="bare" onPress={onClick} aria-label="Filters">
       <SvgFilter style={{ width: 12, height: 12, marginRight: 5 }} /> Filter
     </Button>
   );

packages/desktop-client/src/components/filters/FiltersMenu.jsx

@@ -220,6 +220,7 @@ function ConfigureField({
           <View style={{ flex: 1 }} />
           <Button
             variant="primary"
+            aria-label="Apply"
             onPress={() => {
               onApply({
                 field,

packages/desktop-client/src/components/filters/NameFilter.tsx

@@ -55,6 +55,7 @@ export function NameFilter({
             </FormField>
             <Button
               variant="primary"
+              aria-label={adding ? 'Add' : 'Update'}
               style={{ marginTop: 18 }}
               onPress={onAddUpdate}
             >

packages/desktop-client/src/components/filters/OpButton.tsx

@@ -13,9 +13,11 @@ type OpButtonProps = {
 };
 
 export function OpButton({ op, selected, style, onClick }: OpButtonProps) {
+  const displayOp = friendlyOp(op);
   return (
     <Button
       variant="bare"
+      aria-label={`${displayOp} op`}
       style={({ isHovered, isPressed }) => ({
         marginBottom: 5,
         ...style,
@@ -34,7 +36,7 @@ export function OpButton({ op, selected, style, onClick }: OpButtonProps) {
       })}
       onPress={onClick}
     >
-      {friendlyOp(op)}
+      {displayOp}
     </Button>
   );
 }

packages/desktop-client/src/components/filters/SavedFilterMenuButton.tsx

@@ -162,6 +162,7 @@ export function SavedFilterMenuButton({
         <Button
           ref={triggerRef}
           variant="bare"
+          aria-label="Saved filter menu"
           style={{ marginTop: 10 }}
           onPress={() => {
             setMenuOpen(true);