Contents

Writing Accessibility Use Case Tests with @afixt/usecase-runner

Part 9: Real-World Patterns

Pattern: Search with Autosuggest

id: search-autosuggest
title: 'Search with Autosuggest Selection'
type: positive

start_location: 'https://app.example.com'
expected_result: 'User can search and select a suggested result'
preconditions:
  - 'Search index contains products'

data:
  search_term: 'wireless'

steps:
  - locate: field "Search"
  - focus: field "Search"
  - enter: field "Search" value "{{ search_term }}" type_slowly true
  - wait_for: role "listbox" name "Search suggestions"
  - locate: role "listbox" name "Search suggestions"
  - keyboard: 'ArrowDown ArrowDown Enter'
  - verify: url "/products/"

id: tab-panel-navigation
title: 'Navigate Tab Panels via Keyboard'
type: positive

start_location: 'https://app.example.com/settings'
expected_result: 'User can switch between settings tabs using keyboard'
preconditions: []

steps:
  - locate: tab "General"
  - focus: tab "General"
  - verify: field "Display Name"

  - keyboard: 'ArrowRight'
  - verify: focus tab "Security"
  - activate: tab "Security" via keyboard
  - verify: visible field "Current Password"
  - verify: hidden field "Display Name"

id: delete-item-confirmation
title: 'Delete Item with Confirmation Dialog'
type: positive

start_location: 'https://app.example.com/items/42'
expected_result: 'Item is deleted after user confirms'
preconditions:
  - 'Item 42 exists'

steps:
  - locate: button "Delete"
  - focus: button "Delete"
  - activate: button "Delete"

  # Dialog should appear and trap focus
  - verify: visible dialog "Confirm Delete"
  - verify: focus button "Cancel" within dialog "Confirm Delete"
  - locate: text "Are you sure?" within dialog "Confirm Delete"

  # Confirm deletion
  - activate: button "Delete" within dialog "Confirm Delete"
  - verify: hidden dialog "Confirm Delete"
  - verify: url "/items"
  - verify: text "Item deleted successfully"

Pattern: Table Interaction

id: sort-users-table
title: 'Sort Users Table by Name'
type: positive

start_location: 'https://app.example.com/admin/users'
expected_result: 'Table is sorted alphabetically by name'
preconditions:
  - 'Admin is logged in'
  - 'Multiple users exist'

steps:
  - locate: table "Users"
  - locate: button "Name" within table "Users"
  - activate: button "Name" within table "Users"
  - verify: button "Name" attribute "aria-sort" is "ascending"
  - screenshot: 'users-sorted-ascending'

Pattern: Interaction Testing with Automated Audit

id: login-with-audit
title: 'Log In and Audit Dashboard'
type: positive

start_location: 'https://app.example.com'
expected_result: 'User logs in and dashboard passes WCAG AA audit'
preconditions:
  - 'User has valid credentials'

data:
  username: '[email protected]'
  password: 'SecurePass123!'

steps:
  # Audit the login page before interacting
  - audit: page

  # Standard login flow
  - locate: field "Email"
  - focus: field "Email"
  - enter: field "Email" value "{{ username }}"
  - locate: field "Password"
  - focus: field "Password"
  - enter: field "Password" value "{{ password }}"
  - activate: button "Sign In"

  # Verify login succeeded
  - verify: url "/dashboard"
  - verify: heading "Dashboard"

  # Audit the dashboard after login
  - audit: page

  # Audit just the navigation region
  - audit: navigation "Main Menu"

Pattern: Multi-Step Form (Wizard)

id: checkout-wizard
title: 'Complete Checkout Wizard'
type: positive

start_location: 'https://shop.example.com/cart'
expected_result: 'Order is placed successfully'
preconditions:
  - 'Cart contains items'
  - 'User is logged in'

data:
  street: '123 Main St'
  city: 'Springfield'
  state: 'Illinois'
  zip: '62701'
  card_number: '4111111111111111'
  card_exp: '12/28'
  card_cvc: '123'

steps:
  # Page 1: Shipping
  - verify: heading "Shipping Address" level 2
  - locate: field "Street Address"
  - focus: field "Street Address"
  - enter: field "Street Address" value "{{ street }}"
  - enter: field "City" value "{{ city }}"
  - select: select "State" option "{{ state }}"
  - enter: field "ZIP Code" value "{{ zip }}"
  - activate: button "Continue to Payment"

  # Page 2: Payment
  - verify: heading "Payment Method" level 2
  - locate: field "Card Number"
  - focus: field "Card Number"
  - enter: field "Card Number" value "{{ card_number }}"
  - enter: field "Expiration" value "{{ card_exp }}"
  - enter: field "CVC" value "{{ card_cvc }}"
  - activate: button "Review Order"

  # Page 3: Review & Confirm
  - verify: heading "Review Your Order" level 2
  - locate: text "{{ street }}"
  - activate: button "Place Order"

  # Confirmation
  - verify: heading "Order Confirmed"
  - verify: text "Thank you for your purchase"