arial-labels

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

@@ -17,7 +17,7 @@ import { css } from 'glamor';
 import { SvgRemove } from '../../icons/v2';
 import { useResponsive } from '../../ResponsiveProvider';
 import { theme, styles } from '../../style';
-import { Button } from '../common/Button';
+import { Button } from '../common/Button2';
 import { Input } from '../common/Input';
 import { Popover } from '../common/Popover';
 import { View } from '../common/View';
@@ -621,7 +621,12 @@ function MultiItem({ name, onRemove }: MultiItemProps) {
       }}
     >
       {name}
-      <Button type="bare" style={{ marginLeft: 1 }} onClick={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

@@ -26,7 +26,7 @@ import { usePayees } from '../../hooks/usePayees';
 import { SvgAdd } from '../../icons/v1';
 import { useResponsive } from '../../ResponsiveProvider';
 import { type CSSProperties, theme, styles } from '../../style';
-import { Button } from '../common/Button';
+import { Button } from '../common/Button2';
 import { TextOneLine } from '../common/TextOneLine';
 import { View } from '../common/View';
 
@@ -366,9 +366,10 @@ export function PayeeAutocomplete({
             <AutocompleteFooter embedded={embedded}>
               {showMakeTransfer && (
                 <Button
-                  type={focusTransferPayees ? 'menuSelected' : 'menu'}
+                  variant={focusTransferPayees ? 'menuSelected' : 'menu'}
+                  aria-label="Make transfer"
                   style={showManagePayees && { marginBottom: 5 }}
-                  onClick={() => {
+                  onPress={() => {
                     onUpdate?.(null, null);
                     setFocusTransferPayees(!focusTransferPayees);
                   }}
@@ -377,7 +378,11 @@ export function PayeeAutocomplete({
                 </Button>
               )}
               {showManagePayees && (
-                <Button type="menu" onClick={() => onManagePayees()}>
+                <Button
+                  variant="menu"
+                  aria-label="Manage payees"
+                  onPress={() => onManagePayees()}
+                >
                   Manage Payees
                 </Button>
               )}

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

@@ -1,11 +1,11 @@
 import React from 'react';
 
 import { SvgFilter } from '../../icons/v1';
-import { Button } from '../common/Button';
+import { Button } from '../common/Button2';
 
 export function CompactFiltersButton({ onClick }: { onClick: () => void }) {
   return (
-    <Button type="bare" onClick={onClick}>
+    <Button variant="bare" onPress={onClick}>
       <SvgFilter width={15} height={15} />
     </Button>
   );

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

@@ -9,7 +9,7 @@ import {
 
 import { SvgDelete } from '../../icons/v0';
 import { type CSSProperties, theme } from '../../style';
-import { Button } from '../common/Button';
+import { Button } from '../common/Button2';
 import { Popover } from '../common/Popover';
 import { Text } from '../common/Text';
 import { View } from '../common/View';
@@ -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
@@ -60,9 +62,10 @@ export function FilterExpression({
     >
       <Button
         ref={triggerRef}
-        type="bare"
+        variant="bare"
-        disabled={customName != null}
+        aria-label={`${displayField} ${displayOp} ${value} filter`}
-        onClick={() => setEditing(true)}
+        isDisabled={customName != null}
+        onPress={() => setEditing(true)}
       >
         <div style={{ paddingBlock: 1, paddingLeft: 5, paddingRight: 2 }}>
           {customName ? (
@@ -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}
@@ -87,7 +90,7 @@ export function FilterExpression({
           )}
         </div>
       </Button>
-      <Button type="bare" onClick={onDelete} aria-label="Delete filter">
+      <Button variant="bare" onPress={onDelete} aria-label="Delete filter">
         <SvgDelete
           style={{
             width: 8,

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

@@ -1,11 +1,11 @@
 import React from 'react';
 
 import { SvgFilter } from '../../icons/v1/Filter';
-import { Button } from '../common/Button';
+import { Button } from '../common/Button2';
 
 export function FiltersButton({ onClick }: { onClick: () => void }) {
   return (
-    <Button type="bare" onClick={onClick} title="Filters">
+    <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

@@ -22,7 +22,7 @@ import { titleFirst } from 'loot-core/src/shared/util';
 
 import { useDateFormat } from '../../hooks/useDateFormat';
 import { styles, theme } from '../../style';
-import { Button } from '../common/Button';
+import { Button } from '../common/Button2';
 import { Menu } from '../common/Menu';
 import { Popover } from '../common/Popover';
 import { Select } from '../common/Select';
@@ -219,9 +219,9 @@ function ConfigureField({
         >
           <View style={{ flex: 1 }} />
           <Button
-            type="primary"
+            variant="primary"
-            onClick={e => {
+            aria-label="Apply"
-              e.preventDefault();
+            onPress={() => {
               onApply({
                 field,
                 op,

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

@@ -1,7 +1,7 @@
 import React, { useRef, useEffect } from 'react';
 
 import { theme } from '../../style';
-import { Button } from '../common/Button';
+import { Button } from '../common/Button2';
 import { Input } from '../common/Input';
 import { Stack } from '../common/Stack';
 import { Text } from '../common/Text';
@@ -54,12 +54,10 @@ export function NameFilter({
               />
             </FormField>
             <Button
-              type="primary"
+              variant="primary"
+              aria-label={adding ? 'Add' : 'Update'}
               style={{ marginTop: 18 }}
-              onClick={e => {
+              onPress={onAddUpdate}
-                e.preventDefault();
-                onAddUpdate();
-              }}
             >
               {adding ? 'Add' : 'Update'}
             </Button>

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { friendlyOp } from 'loot-core/src/shared/rules';
 
 import { type CSSProperties, theme } from '../../style';
-import { Button } from '../common/Button';
+import { Button } from '../common/Button2';
 
 type OpButtonProps = {
   op: string;
@@ -13,24 +13,30 @@ type OpButtonProps = {
 };
 
 export function OpButton({ op, selected, style, onClick }: OpButtonProps) {
+  const displayOp = friendlyOp(op);
   return (
     <Button
-      type="bare"
+      variant="bare"
-      style={{
+      aria-label={`${displayOp} op`}
-        backgroundColor: theme.pillBackground,
+      style={({ isHovered, isPressed }) => ({
         marginBottom: 5,
         ...style,
-        ...(selected && {
+        ...(selected
-          color: theme.buttonNormalSelectedText,
+          ? {
-          '&,:hover,:active': {
+              color: theme.pillTextSelected,
-            backgroundColor: theme.buttonNormalSelectedBackground,
+              backgroundColor: theme.pillBackgroundSelected,
-            color: theme.buttonNormalSelectedText,
+            }
-          },
+          : isHovered || isPressed
+            ? {
+                backgroundColor: theme.pillBackgroundHover,
+              }
+            : {
+                backgroundColor: theme.pillBackground,
               }),
-      }}
+      })}
-      onClick={onClick}
+      onPress={onClick}
     >
-      {friendlyOp(op)}
+      {displayOp}
     </Button>
   );
 }

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

@@ -5,7 +5,7 @@ import { type TransactionFilterEntity } from 'loot-core/types/models';
 import { type RuleConditionEntity } from 'loot-core/types/models/rule';
 
 import { SvgExpandArrow } from '../../icons/v0';
-import { Button } from '../common/Button';
+import { Button } from '../common/Button2';
 import { Popover } from '../common/Popover';
 import { Text } from '../common/Text';
 import { View } from '../common/View';
@@ -161,9 +161,10 @@ export function SavedFilterMenuButton({
       {conditions.length > 0 && (
         <Button
           ref={triggerRef}
-          type="bare"
+          variant="bare"
+          aria-label="Saved filter menu"
           style={{ marginTop: 10 }}
-          onClick={() => {
+          onPress={() => {
             setMenuOpen(true);
           }}
         >

packages/desktop-client/src/style/themes/dark.ts

@@ -183,6 +183,7 @@ export const pillTextHighlighted = colorPalette.purple200;
 export const pillBorder = colorPalette.navy700;
 export const pillBorderDark = pillBorder;
 export const pillBackgroundSelected = colorPalette.purple600;
+export const pillBackgroundHover = 'rgba(200, 200, 200, .3)';
 export const pillTextSelected = colorPalette.navy150;
 export const pillBorderSelected = colorPalette.purple400;
 export const pillTextSubdued = colorPalette.navy500;

packages/desktop-client/src/style/themes/development.ts

@@ -182,6 +182,7 @@ export const pillTextHighlighted = colorPalette.purple600;
 export const pillBorder = colorPalette.navy150;
 export const pillBorderDark = colorPalette.navy300;
 export const pillBackgroundSelected = colorPalette.blue150;
+export const pillBackgroundHover = 'rgba(100, 100, 100, .15)';
 export const pillTextSelected = colorPalette.blue900;
 export const pillBorderSelected = colorPalette.purple500;
 export const pillTextSubdued = colorPalette.navy200;

packages/desktop-client/src/style/themes/light.ts

@@ -185,6 +185,7 @@ export const pillTextHighlighted = colorPalette.purple600;
 export const pillBorder = colorPalette.navy150;
 export const pillBorderDark = colorPalette.navy300;
 export const pillBackgroundSelected = colorPalette.blue150;
+export const pillBackgroundHover = 'rgba(100, 100, 100, .15)';
 export const pillTextSelected = colorPalette.blue900;
 export const pillBorderSelected = colorPalette.purple500;
 export const pillTextSubdued = colorPalette.navy200;

packages/desktop-client/src/style/themes/midnight.ts

@@ -185,6 +185,7 @@ export const pillTextHighlighted = colorPalette.purple200;
 export const pillBorder = colorPalette.gray500;
 export const pillBorderDark = pillBorder;
 export const pillBackgroundSelected = colorPalette.purple600;
+export const pillBackgroundHover = 'rgba(200, 200, 200, .3)';
 export const pillTextSelected = colorPalette.gray150;
 export const pillBorderSelected = colorPalette.purple300;
 export const pillTextSubdued = colorPalette.gray500;

upcoming-release-notes/2915.md

@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [joel-jeremy]
+---
+
+Use new react-aria-components based Button on autocomplete and filters.