Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Create tests for APG design pattern example: Accordion #423

Open
IsaDC opened this issue Apr 13, 2021 · 1 comment · May be fixed by #426
Open

Create tests for APG design pattern example: Accordion #423

IsaDC opened this issue Apr 13, 2021 · 1 comment · May be fixed by #426
Assignees
@IsaDC

Comments

@IsaDC
Copy link
Contributor

IsaDC commented Apr 13, 2021

Applies To

Testing Notes

This issue thread will house all documentation relating to the development of a test plan for the "accordion" APG example, which conforms to the "Accordion" design pattern. All follow-ups (including the test plan itself) will be added as new comments to facilitate notifications, but this initial comment will be updated with relevant details and URLs as needed for convenience.

Additional References
@IsaDC IsaDC linked a pull request Apr 15, 2021 that will close this issue
Draft
@IsaDC IsaDC self-assigned this Jun 1, 2021
@IsaDC
Copy link
Contributor Author

IsaDC commented Jun 30, 2021

Below is the test plan for the accordion example. Each test title is marked up as a level 4 heading to facilitate screen reader navigation.

Navigate forwards to an expanded accordion header

  • Applies to: JAWS, NVDA, macOS VoiceOver
  • Modes: reading, interaction
  • Instructions:
    • Reading mode: With the reading cursor on the 'Navigate forwards from here' link, navigate to the 'Personal Information' accordion header.
    • Interaction mode: With focus on the 'Navigate forwards from here' link, navigate to the 'Personal Information' accordion header.
  • Setup script description: sets focus on a link before the 'Personal Information' accordion header
Commands
AT Mode Commands
JAWS, NVDA reading
  • B
  • F
  • H
  • Three
  • Tab
  • Down Arrow
JAWS, NVDA interaction Tab
macOS VoiceOver interaction
  • Control+Option+Right Arrow
  • Tab
  • Control+Option_Command+J
Assertions
Assertion Priority
Role 'button' is conveyed required
Role 'heading' is conveyed required
Heading level 3 is conveyed required
Name 'Personal Information' is conveyed required
State 'expanded' is conveyed required
State 'disabled' is conveyed required
References

heading, aria-labelledby, aria-disabled, aria-expanded

Navigate backwards to an expanded accordion header

  • Applies to: JAWS, NVDA, macOS VoiceOver
  • Modes: reading, interaction
  • Instructions:
    • Reading mode: With the reading cursor on the 'Billing Address' accordion header, navigate to the 'Personal Information' accordion header.
    • Interaction mode: With focus on the 'Billing Address' accordion header, navigate to the 'Personal Information' accordion header.
  • Setup script description: sets focus on the 'Billing Address' accordion header, and sets the state of the 'Personal Information' accordion header to expanded without displaying its associated content
Commands
AT Mode Commands
JAWS, NVDA reading
  • Shift+B
  • Shift+F
  • Shift+H
  • Shift+Three
  • Shift+Tab
  • Up Arrow
JAWS, NVDA interaction Shift+Tab
macOS VoiceOver interaction
  • Control+Option+Left Arrow
  • Shift+Tab
  • Shift+Control+Option_Command+J
Assertions
Assertion Priority
Role 'button' is conveyed required
Role 'heading' is conveyed required
Heading level 3 is conveyed required
Name 'Personal Information' is conveyed required
State 'expanded' is conveyed required
State 'disabled' is conveyed required
References

heading, aria-labelledby, aria-disabled, aria-expanded

Navigate forwards to a collapsed accordion header

  • Applies to: JAWS, NVDA, macOS VoiceOver
  • Modes: reading, interaction
  • Instructions:
    • Reading mode: With the reading cursor on the 'Navigate forwards from here' link, navigate to the 'Personal Information' accordion header.
    • Interaction mode: With focus on the 'Navigate forwards from here' link, navigate to the 'Personal Information' accordion header.
  • Setup script description: sets focus on a link before the 'Personal Information' accordion header, and expands the 'Billing Address' accordion header
Commands
AT Mode Commands
JAWS, NVDA reading
  • B
  • F
  • H
  • Three
  • Tab
  • Down Arrow
JAWS, NVDA interaction Tab
macOS VoiceOver interaction
  • Control+Option+Right Arrow
  • Tab
  • Control+Option_Command+J
Assertions
Assertion Priority
Role 'button' is conveyed required
Role 'heading' is conveyed required
Heading level 3 is conveyed required
Name 'Personal Information' is conveyed required
State 'collapsed' is conveyed required
References

heading, aria-labelledby, aria-expanded

Navigate backwards to a collapsed accordion header

  • Applies to: JAWS, NVDA, macOS VoiceOver
  • Modes: reading, interaction
  • Instructions:
    • Reading mode: With the reading cursor on the 'Billing Address' accordion header, navigate to the 'Personal Information' accordion header.
    • Interaction mode: With focus on the 'Billing Address' accordion header, navigate to the 'Personal Information' accordion header.
  • Setup script description: sets focus on and expands the 'Billing Address' accordion header
Commands
AT Mode Commands
JAWS, NVDA reading
  • Shift+B
  • Shift+F
  • Shift+H
  • Shift+Three
  • Shift+Tab
  • Up Arrow
JAWS, NVDA interaction Shift+Tab
macOS VoiceOver interaction
  • Control+Option+Left Arrow
  • Shift+Tab
  • Shift+Control+Option_Command+J
Assertions
Assertion Priority
Role 'button' is conveyed required
Role 'heading' is conveyed required
Heading level 3 is conveyed required
Name 'Personal Information' is conveyed required
State 'collapsed' is conveyed required
References

heading, aria-labelledby, aria-expanded

Read information about an expanded accordion header

  • Applies to: JAWS, NVDA, macOS VoiceOver
  • Modes: reading, interaction
  • Instructions:
    • Reading mode: With the reading cursor on the 'Personal Information' accordion header, read information about the accordion header.
    • Interaction mode: With focus on the 'Personal Information' accordion header, read information about the accordion header.
  • Setup script description: sets focus on the 'Personal Information' accordion header
Commands
AT Mode Commands
JAWS, NVDA reading, interaction
  • Insert+Tab
  • Insert+Up
macOS VoiceOver interaction
  • Control+Option+F3
  • Control+Option+F4
Assertions
Assertion Priority
Role 'button' is conveyed required
Role 'heading' is conveyed required
Heading level 3 is conveyed required
Name 'Personal Information' is conveyed required
State 'expanded' is conveyed required
State 'disabled' is conveyed required
References

heading, aria-labelledby, aria-disabled, aria-expanded

Read information about a collapsed accordion header

  • Applies to: JAWS, NVDA, macOS VoiceOver
  • Modes: reading, interaction
  • Instructions:
    • Reading mode: With the reading cursor on the 'Personal Information' accordion header, read information about the accordion header.
    • Interaction mode: With focus on the 'Personal Information' accordion header, read information about the accordion header.
  • Setup script description: expands the 'Billing Address' accordion header and sets focus on the 'Personal Information' accordion header
Commands
AT Mode Commands
JAWS, NVDA reading, interaction
  • Insert+Tab
  • Insert+Up
macOS VoiceOver interaction
  • Control+Option+F3
  • Control+Option+F4
Assertions
Assertion Priority
Role 'button' is conveyed required
Role 'heading' is conveyed required
Heading level 3 is conveyed required
Name 'Personal Information' is conveyed required
State 'collapsed' is conveyed required
References

heading, aria-labelledby, aria-expanded

Navigate to the next accordion header

  • Applies to: JAWS, NVDA, macOS VoiceOver
  • Mode: interaction
  • Instructions:
    • Interaction mode: With focus on the 'Personal Information' accordion header, navigate to the 'Billing Address' accordion header.
  • Setup script description: sets focus on the 'Personal Information' accordion header
Commands
AT Mode Commands
JAWS, NVDA, macOS VoiceOver interaction Down Arrow
Assertions
Assertion Priority
Role 'button' is conveyed required
Role 'heading' is conveyed required
Heading level 3 is conveyed required
Name 'Billing Address' is conveyed required
State 'collapsed' is conveyed required
References

heading, aria-labelledby, aria-expanded

Navigate to the previous accordion header

  • Applies to: JAWS, NVDA, macOS VoiceOver
  • Mode: interaction
  • Instructions:
    • Interaction mode: With focus on the 'Billing Address' accordion header, navigate to the 'Personal Information' accordion header.
  • Setup script description: sets focus on the 'Billing Address' accordion header
Commands
AT Mode Commands
JAWS, NVDA, macOS VoiceOver interaction Up Arrow
Assertions
Assertion Priority
Role 'button' is conveyed required
Role 'heading' is conveyed required
Heading level 3 is conveyed required
Name 'Personal Information' is conveyed required
State 'expanded' is conveyed required
State 'disabled' is conveyed required
References

heading, aria-labelledby, aria-disabled, aria-expanded

Navigate to the first accordion header

  • Applies to: JAWS, NVDA, macOS VoiceOver
  • Mode: interaction
  • Instructions:
    • Interaction mode: With focus on the 'Shipping Address' accordion header, navigate to the 'Personal Information' accordion header.
  • Setup script description: sets focus on the 'Shipping Address' accordion header
Commands
AT Mode Commands
JAWS, NVDA, macOS VoiceOver interaction Home
Assertions
Assertion Priority
Role 'button' is conveyed required
Role 'heading' is conveyed required
Heading level 3 is conveyed required
Name 'Personal Information' is conveyed required
State 'expanded' is conveyed required
State 'disabled' is conveyed required
References

heading, aria-labelledby, aria-disabled, aria-expanded

Navigate to the last accordion header

  • Applies to: JAWS, NVDA, macOS VoiceOver
  • Mode: interaction
  • Instructions:
    • Interaction mode: With focus on the 'Personal Information' accordion header, navigate to the 'Shipping Address' accordion header.
  • Setup script description: sets focus on the 'Personal Information' accordion header
Commands
AT Mode Commands
JAWS, NVDA, macOS VoiceOver interaction End
Assertions
Assertion Priority
Role 'button' is conveyed required
Role 'heading' is conveyed required
Heading level 3 is conveyed required
Name 'Shipping Address' is conveyed required
State 'collapsed' is conveyed required
References

heading, aria-labelledby, aria-expanded

Navigate into an accordion panel

  • Applies to: JAWS, NVDA, macOS VoiceOver
  • Mode: reading, interaction
  • Instructions:
    • Reading mode: With the reading cursor on the 'Personal Information' accordion header, navigate into the accordion panel.
    • Interaction mode: With focus on the 'Personal Information' accordion header, navigate into the accordion panel.
  • Setup script description: sets focus on the 'Personal Information' accordion header
Commands
AT Mode Commands
JAWS, NVDA reading
  • Down Arrow followed by Down Arrow
  • Tab
JAWS, NVDA interaction Tab
macOS VoiceOver interaction
  • Control+Option+Right Arrow followed by Control+option+Right Arrow followed by Control+Option+Right Arrow
  • Tab
  • Control+Option+Command+J
Assertions
Assertion Priority
Role 'region' is conveyed required
Name of region ('Personal Information') is conveyed required
Name of input ('Name') is conveyed required
The ability to enter text into the input is conveyed required
State of the input (required) is conveyed required
References

region, aria-labelledby

Operate a collapsed accordion header

  • Applies to: JAWS, NVDA, macOS VoiceOver
  • Modes: reading, interaction
  • Instructions:
    • Reading mode: With the reading cursor on the 'Billing Address' accordion header, activate the acordion header.
    • Interaction mode: With focus on the 'Billing Address' accordion header, activate the acordion header.
  • Setup script description: sets focus on the 'Billing Address' accordion header
Commands
AT Mode Commands
JAWS, NVDA reading, interaction
  • Space
  • Enter
macOS VoiceOver interaction
  • Control+Option+Space
  • Space
  • Enter
Assertions
Assertion Priority
Change in state to 'expanded' is conveyed required
References

aria-expanded

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@IsaDC IsaDC

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Create tests for APG design pattern example: Accordion w3c/aria-at
1 participant
@IsaDC