fix: make cash flow amounts fully accessible

myteamwallet_frontend_modern/src/app/models/transaction-amount.spec.ts

@@ -1,4 +1,4 @@
-import { presentCashFlow, signedTransactionAmount } from './transaction-amount';
+import { presentCashFlow } from './transaction-amount';
 
 describe('presentCashFlow', () => {
   it.each([
@@ -32,12 +32,48 @@ describe('presentCashFlow', () => {
       context: 'player' as const,
       expected: { direction: 'neutral', amount: 7, sign: '' },
     },
+    {
+      amount: 6,
+      type: 'credit',
+      context: 'player' as const,
+      expected: { direction: 'neutral', amount: 6, sign: '' },
+    },
+    {
+      amount: 5,
+      type: 'levy',
+      context: 'player' as const,
+      expected: { direction: 'neutral', amount: 5, sign: '' },
+    },
+    {
+      amount: 4,
+      type: 'fee',
+      context: 'player' as const,
+      expected: { direction: 'neutral', amount: 4, sign: '' },
+    },
+    {
+      amount: 3,
+      type: 'payment',
+      context: 'team' as const,
+      expected: { direction: 'neutral', amount: 3, sign: '' },
+    },
+    {
+      amount: 2,
+      type: 'expense',
+      context: 'player' as const,
+      expected: { direction: 'neutral', amount: 2, sign: '' },
+    },
     {
       amount: -7,
       type: 'unknown',
       context: 'player' as const,
       expected: { direction: 'neutral', amount: 7, sign: '' },
     },
+    {
+      amount: -9,
+      type: 'unknown',
+      context: 'team' as const,
+      expected: { direction: 'neutral', amount: 9, sign: '' },
+    },
   ])(
     'presents $context $type transactions with their cash-flow direction',
     ({ amount, type, context, expected }) => {
@@ -45,15 +81,3 @@ describe('presentCashFlow', () => {
     },
   );
 });
-
-describe('signedTransactionAmount', () => {
-  it('shows debit transaction types as negative amounts', () => {
-    expect(signedTransactionAmount(12, 'fine')).toBe(-12);
-    expect(signedTransactionAmount(12, { id: 14, name: 'expense' })).toBe(-12);
-  });
-
-  it('keeps credits and negative reversal amounts unchanged', () => {
-    expect(signedTransactionAmount(12, 'credit')).toBe(12);
-    expect(signedTransactionAmount(-12, { id: 1, name: 'credit' })).toBe(-12);
-  });
-});

myteamwallet_frontend_modern/src/app/models/transaction-amount.ts

@@ -10,16 +10,6 @@ export interface CashFlowPresentation {
   sign: '+' | '−' | '';
 }
 
-const debitTypeNames = new Set(['fine', 'levy', 'fee', 'expense']);
-
-export function signedTransactionAmount(amount: number, type: TransactionTypeLike): number {
-  const typeId = typeof type === 'number' ? type : typeof type === 'object' ? type?.id : undefined;
-  const typeName =
-    typeof type === 'string' ? type : typeof type === 'object' ? type?.name : undefined;
-  const isDebit = (typeId ?? 0) > 10 || debitTypeNames.has(typeName ?? '');
-  return isDebit ? -Math.abs(amount) : amount;
-}
-
 export function presentCashFlow(
   amount: number,
   type: TransactionTypeLike,

myteamwallet_frontend_modern/src/app/shared/transaction-amount/transaction-amount.html

@@ -2,8 +2,8 @@
   data-testid="transaction-amount"
   class="transaction-amount"
   [class]="presentation().direction"
-  [attr.aria-label]="directionLabel()"
 >
-  <span class="transaction-amount__sign">{{ presentation().sign }}</span>
+  <span class="transaction-amount__direction">{{ directionLabel() }}</span>
+  <span class="transaction-amount__sign" aria-hidden="true">{{ presentation().sign }}</span>
   {{ presentation().amount | currency: 'EUR' }}
 </span>

myteamwallet_frontend_modern/src/app/shared/transaction-amount/transaction-amount.scss

@@ -1,5 +1,6 @@
 .transaction-amount {
   font-variant-numeric: tabular-nums;
+  white-space: nowrap;
 
   &.inflow {
     color: var(--mat-sys-primary);
@@ -14,6 +15,18 @@
   }
 }
 
+.transaction-amount__direction {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 .transaction-amount__sign {
   display: inline-block;
   min-width: 0.8ch;

myteamwallet_frontend_modern/src/app/shared/transaction-amount/transaction-amount.spec.ts

@@ -9,7 +9,8 @@ describe('TransactionAmount', () => {
       context: 'player' as const,
       sign: '+',
       semanticClass: 'inflow',
-      label: 'Einnahme',
+      direction: 'Einzahlung',
+      text: 'Einzahlung 12,50 \u20ac',
     },
     {
       amount: 12.5,
@@ -17,7 +18,8 @@ describe('TransactionAmount', () => {
       context: 'team' as const,
       sign: '−',
       semanticClass: 'outflow',
-      label: 'Ausgabe',
+      direction: 'Auszahlung',
+      text: 'Auszahlung 12,50 \u20ac',
     },
     {
       amount: 12.5,
@@ -25,11 +27,12 @@ describe('TransactionAmount', () => {
       context: 'player' as const,
       sign: '',
       semanticClass: 'neutral',
-      label: 'Neutraler Betrag',
+      direction: 'Keine Kassenbewegung',
+      text: 'Keine Kassenbewegung 12,50 \u20ac',
     },
   ])(
     'renders the $semanticClass cash-flow meaning accessibly',
-    async ({ amount, type, context, sign, semanticClass, label }) => {
+    async ({ amount, type, context, sign, semanticClass, direction, text }) => {
       await TestBed.configureTestingModule({ imports: [TransactionAmount] }).compileComponents();
       const fixture = TestBed.createComponent(TransactionAmount);
       fixture.componentRef.setInput('amount', amount);
@@ -39,11 +42,19 @@ describe('TransactionAmount', () => {
 
       const element = fixture.nativeElement.querySelector('[data-testid="transaction-amount"]');
       const signElement = element.querySelector('.transaction-amount__sign');
+      const directionElement = element.querySelector('.transaction-amount__direction');
+      const accessibleElement = element.cloneNode(true);
+      accessibleElement
+        .querySelectorAll('[aria-hidden=true]')
+        .forEach((node: Element) => node.remove());
       expect(element.classList).toContain(semanticClass);
       expect(signElement.textContent).toBe(sign);
-      expect(element.textContent).toContain('12,50');
+      expect(signElement.getAttribute('aria-hidden')).toBe('true');
-      expect(element.textContent).toContain('€');
+      expect(directionElement.textContent).toBe(direction);
-      expect(element.getAttribute('aria-label')).toBe(label);
+      expect(accessibleElement.textContent.replace(/\s+/g, ' ').trim()).toBe(text);
+      expect(element.getAttribute('aria-label')).toBeNull();
+      expect(getComputedStyle(element).whiteSpace).toBe('nowrap');
+      expect(getComputedStyle(directionElement).position).toBe('absolute');
     },
   );
 });

myteamwallet_frontend_modern/src/app/shared/transaction-amount/transaction-amount.ts

@@ -28,9 +28,9 @@ export class TransactionAmount {
   protected readonly directionLabel = computed(
     () =>
       ({
-        inflow: 'Einnahme',
+        inflow: 'Einzahlung',
-        outflow: 'Ausgabe',
+        outflow: 'Auszahlung',
-        neutral: 'Neutraler Betrag',
+        neutral: 'Keine Kassenbewegung',
       })[this.presentation().direction],
   );
 }