Create tests for APG design pattern example: Modal Dialog

[IsaDC]

Applies To

• APG design pattern: Dialog (Modal)
• Specific example: Modal Dialog

Testing Notes

This issue thread will house all documentation relating to the development of a test plan for the "Modal Dialog" APG example, which conforms to the "Dialog (Modal)" 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

• dialog (role)
• aria-modal (property)
• aria-labelledby (property)
• aria-describedby (property)

[IsaDC]

Below is the test plan for the Modal Dialog example. Please note that moving into the 'Verification Result' dialog is not tested, for the following reasons:

• Moving from one modal dialog into another is thoroughly tested within the "Open a nested modal dialog" tests, which utilise the "Address Added" dialog instead.
• It is impossible to assert that the accessible description is announced in its entirety in both a user-friendly and reproducible way. This dialog serves to demonstrate an antipattern, and hence the accessible description is almost 2,000 characters long.

Each test title is marked up as a level 4 heading to facilitate screen reader navigation.

Open a modal dialog in reading mode

• Applies to: JAWS, NVDA
• Mode: reading
• Instructions: With the reading cursor on the 'Add Delivery Address' button, open the dialog.
• Commands:
  • Space
  • Enter
• Setup script description: sets focus on the 'Add Delivery Address' button

Assertions

Assertion	Priority	Reference
Role 'dialog' is conveyed	required	role="dialog"
Name 'Add Delivery Address' is conveyed	required	aria-labelledby
Name of the focused input ('Street') is conveyed	required	<label>
The ability to enter text into the focused input is conveyed	required	input[type="text"]

Open a modal dialog in interaction mode

• Applies to: JAWS, NVDA
• Mode: interaction
• Instructions: With focus on the 'Add Delivery Address' button, open the dialog.
• Commands:
  • Space
  • Enter
• Setup script description: sets focus on the 'Add Delivery Address' button

Assertions

Assertion	Priority	Reference
Role 'dialog' is conveyed	required	role="dialog"
Name 'Add Delivery Address' is conveyed	required	aria-labelledby
Name of the focused input ('Street') is conveyed	required	<label>
The ability to enter text into the focused input is conveyed	required	input[type="text"]

Open a Modal Dialog

• Applies to: macOS VoiceOver
• Mode: interaction
• Instructions: With focus on the 'Add Delivery Address' button, open the dialog.
• Commands:
  • Control+Option+Space
  • Space
  • Enter
• Setup script description: sets focus on the 'Add Delivery Address' button

Assertions

Assertion	Priority	Reference
Role 'dialog' is conveyed	required	role="dialog"
Name 'Add Delivery Address' is conveyed	required	aria-labelledby
Name of the focused input ('Street') is conveyed	required	<label>
The ability to enter text into the focused input is conveyed	required	input[type="text"]

Close a modal dialog in reading mode

• Applies to: JAWS, NVDA
• Mode: reading
• Instructions: With the reading cursor on an input inside a modal dialog, close the dialog.
• Commands:
  • Escape
• Setup script description: opens the 'Add Delivery Address' modal dialog, and sets focus on the first input

Assertions

Assertion	Priority	Reference
Role of the focused element ('button') is conveyed	required	<button>
Name of the focused element ('Add Delivery Address') is conveyed	required	Visible text content contained within the <button> element

Close a modal dialog in interaction mode

• Applies to: JAWS, NVDA
• Mode: interaction
• Instructions: With focus on an input inside a modal dialog, close the dialog.
• Commands:
  • Escape
• Setup script description: opens the 'Add Delivery Address' modal dialog, and sets focus on the first input

Assertions

Assertion	Priority	Reference
Role of the focused element ('button') is conveyed	required	<button>
Name of the focused element ('Add Delivery Address') is conveyed	required	Visible text content contained within the <button> element

Close a modal dialog

• Applies to: macOS VoiceOver
• Mode: interaction
• Instructions: With focus on an input inside a modal dialog, close the dialog.
• Commands:
  • Escape
• Setup script description: opens the 'Add Delivery Address' modal dialog, and sets focus on the first input

Assertions

Assertion	Priority	Reference
Role of the focused element ('button') is conveyed	required	<button>
Name of the focused element ('Add Delivery Address') is conveyed	required	Visible text content contained within the <button> element

Close a modal dialog using a button in reading mode

• Applies to: JAWS, NVDA
• Mode: reading
• Instructions: With the reading cursor on the 'Cancel' button inside a modal dialog, press the button to close the dialog.
• Commands:
  • Space
  • Enter
• Setup script description: opens the 'Add Delivery Address' modal dialog, and sets focus on the 'Cancel' button

Assertions

Assertion	Priority	Reference
Role of the focused element ('button') is conveyed	required	<button>
Name of the focused element ('Add Delivery Address') is conveyed	required	Visible text content contained within the <button> element

Close a modal dialog using a button in interaction mode

• Applies to: JAWS, NVDA
• Mode: interaction
• Instructions: With focus on the 'Cancel' button inside a modal dialog, press the button to close the dialog.
• Commands:
  • Space
  • Enter
• Setup script description: opens the 'Add Delivery Address' modal dialog, and sets focus on the 'Cancel' button

Assertions

Assertion	Priority	Reference
Role of the focused element ('button') is conveyed	required	<button>
Name of the focused element ('Add Delivery Address') is conveyed	required	Visible text content contained within the <button> element

Close a modal dialog using a button

• Applies to: macOS VoiceOver
• Mode: interaction
• Instructions: With focus on the 'Cancel' button inside a modal dialog, press the button to close the dialog.
• Commands:
  • Control+Option+Space
  • Space
  • Enter
• Setup script description: opens the 'Add Delivery Address' modal dialog, and sets focus on the 'Cancel' button

Assertions

Assertion	Priority	Reference
Role of the focused element ('button') is conveyed	required	<button>
Name of the focused element ('Add Delivery Address') is conveyed	required	Visible text content contained within the <button> element

Navigate to the last focusable element in a modal dialog in interaction mode

• Applies to: JAWS, NVDA
• Mode: interaction
• Instructions: With focus on the first focusable element inside a modal dialog, navigate to the last focusable element in the same dialog.
• Commands:
  • Shift+Tab
• Setup script description: opens the 'Add Delivery Address' modal dialog, and sets focus on the first input

Assertions

Assertion	Priority	Reference
Role 'button' is conveyed	required	<button>
Name 'Cancel' is conveyed	required	Visible text content contained within the <button> element

Navigate to the last focusable element in a modal dialog

• Applies to: macOS VoiceOver
• Mode: interaction
• Instructions: With focus on the first focusable element inside a modal dialog, navigate to the last focusable element in the same dialog.
• Commands:
  • Shift+Tab
• Setup script description: opens the 'Add Delivery Address' modal dialog, and sets focus on the first input

Assertions

Assertion	Priority	Reference
Role 'button' is conveyed	required	<button>
Name 'Cancel' is conveyed	required	Visible text content contained within the <button> element

Navigate to the first focusable element in a modal dialog in interaction mode

• Applies to: JAWS, NVDA
• Mode: interaction
• Instructions: With focus on the last focusable element inside a modal dialog, navigate to the first focusable element in the same dialog.
• Commands:
  • Tab
• Setup script description: opens the 'Add Delivery Address' modal dialog, and sets focus on the 'Cancel' button

Assertions

Assertion	Priority	Reference
Name 'Street' is conveyed	required	<label>
The ability to enter text is conveyed	required	input[type="text"]

Navigate to the first focusable element in a modal dialog

• Applies to: macOS VoiceOver
• Mode: interaction
• Instructions: With focus on the last focusable element inside a modal dialog, navigate to the first focusable element in the same dialog.
• Commands:
  • Tab
• Setup script description: opens the 'Add Delivery Address' modal dialog, and sets focus on the 'Cancel' button

Assertions

Assertion	Priority	Reference
Name 'Street' is conveyed	required	<label>
The ability to enter text is conveyed	required	input[type="text"]

Navigate to the beginning of a modal dialog in reading mode (JAWS)

• Applies to: JAWS
• Mode: reading
• Instructions: With the reading cursor on an input inside a modal dialog, navigate to the beginning of the dialog.
• Commands:
  • Control+Home followed by Down Arrow
• Setup script description: opens the 'Add Delivery Address' modal dialog, and sets focus on the first input

Assertions

Assertion	Priority	Reference
Role 'heading' is conveyed	required	<h2>
Level of the heading (2) is conveyed	required	<h2>
Text of the heading ('Add Delivery Address') is conveyed	required	Visible text content contained within the <h2> element

Navigate to the beginning of a modal dialog in reading mode (NVDA)

• Applies to: NVDA
• Mode: reading
• Instructions: With the reading cursor on an input inside a modal dialog, navigate to the beginning of the dialog.
• Commands:
  • Control+Home
• Setup script description: opens the 'Add Delivery Address' modal dialog, and sets focus on the first input

Assertions

Assertion	Priority	Reference
Role 'heading' is conveyed	required	<h2>
Level of the heading (2) is conveyed	required	<h2>
Text of the heading ('Add Delivery Address') is conveyed	required	Visible text content contained within the <h2> element

Navigate to the beginning of a modal dialog

• Applies to: NmacOS VoiceOver
• Mode: interaction
• Instructions: With focus on an input inside a modal dialog, navigate to the beginning of the dialog.
• Commands:
  • Control+Option+Home
• Setup script description: opens the 'Add Delivery Address' modal dialog, and sets focus on the first input

Assertions

Assertion	Priority	Reference
Role 'heading' is conveyed	required	<h2>
Level of the heading (2) is conveyed	required	<h2>
Text of the heading ('Add Delivery Address') is conveyed	required	Visible text content contained within the <h2> element

Navigate to the end of a modal dialog in reading mode

• Applies to: JAWS, NVDA
• Mode: reading
• Instructions: With the reading cursor on an input inside a modal dialog, navigate to the end of the dialog.
• Commands:
  • Control+End
• Setup script description: opens the 'Add Delivery Address' modal dialog, and sets focus on the first input

Assertions

Assertion	Priority	Reference
Role 'button' is conveyed	required	<button>
Name 'Cancel' is conveyed	required	Visible text content contained within the <button> element

Navigate to the end of a modal dialog

• Applies to: macOS VoiceOver
• Mode: interaction
• Instructions: With focus on an input inside a modal dialog, navigate to the end of the dialog.
• Commands:
  • Control+Option+End
• Setup script description: opens the 'Add Delivery Address' modal dialog, and sets focus on the first input

Assertions

Assertion	Priority	Reference
Role 'button' is conveyed	required	<button>
Name 'Cancel' is conveyed	required	Visible text content contained within the <button> element

Open a nested modal dialog in reading mode

• Applies to: JAWS, NVDA
• Mode: reading
• Instructions: With the reading cursor on the 'Add' button inside a modal dialog, open the nested 'Address Added' dialog.
• Commands:
  • Space
  • Enter
• Setup script description: opens the 'Add Delivery Address' modal dialog, and sets focus on the 'Add' button

Assertions

Assertion	Priority	Reference
Role 'dialog' is conveyed	required	role="dialog"
Name 'Address Added' is conveyed	required	aria-labelledby
Description of the dialog ('The address you provided has been added to your list of delivery addresses. It is ready for immediate use. If you wish to remove it, you can do so from your profile.') is conveyed	required	aria-describedby
Role of the focused element ('button') is conveyed	required	<button>
Name of the focused element ('OK') is conveyed	required	Visible text content contained within the <button> element

Open a nested modal dialog in interaction mode

• Applies to: JAWS, NVDA
• Mode: interaction
• Instructions: With focus on the 'Add' button inside a modal dialog, open the nested 'Address Added' dialog.
• Commands:
  • Space
  • Enter
• Setup script description: opens the 'Add Delivery Address' modal dialog, and sets focus on the 'Add' button

Assertions

Assertion	Priority	Reference
Role 'dialog' is conveyed	required	role="dialog"
Name 'Address Added' is conveyed	required	aria-labelledby
Description of the dialog ('The address you provided has been added to your list of delivery addresses. It is ready for immediate use. If you wish to remove it, you can do so from your profile.') is conveyed	required	aria-describedby
Role of the focused element ('button') is conveyed	required	<button>
Name of the focused element ('OK') is conveyed	required	Visible text content contained within the <button> element

Open a nested modal dialog

• Applies to: macOS VoiceOver
• Mode: interaction
• Instructions: With focus on the 'Add' button inside a modal dialog, open the nested 'Address Added' dialog.
• Commands:
  • Control+Option+Space
  • Space
  • Enter
• Setup script description: opens the 'Add Delivery Address' modal dialog, and sets focus on the 'Add' button

Assertions

Assertion	Priority	Reference
Role 'dialog' is conveyed	required	role="dialog"
Name 'Address Added' is conveyed	required	aria-labelledby
Description of the dialog ('The address you provided has been added to your list of delivery addresses. It is ready for immediate use. If you wish to remove it, you can do so from your profile.') is conveyed	required	aria-describedby
Role of the focused element ('button') is conveyed	required	<button>
Name of the focused element ('OK') is conveyed	required	Visible text content contained within the <button> element

Close a nested modal dialog in reading mode

• Applies to: JAWS, NVDA
• Mode: reading
• Instructions: With the reading cursor on the 'Close' button inside a modal dialog, close the dialog.
• Commands:
  • Escape
• Setup script description: opens the 'Add Delivery Address' dialog followed by the 'Verification Result' dialog, and sets focus on the 'Close' button inside the second dialog

Assertions

Assertion	Priority	Reference
Role 'dialog' is conveyed	required	role="dialog"
Name 'Add Delivery Address' is conveyed	required	aria-labelledby
Role of the focused element ('button') is conveyed	required	<button>
Name of the focused element ('Verify Address') is conveyed	required	Visible text content contained within the <button> element

Close a nested modal dialog in interaction mode

• Applies to: JAWS, NVDA
• Mode: interaction
• Instructions: With focus on the 'Close' button inside a modal dialog, close the dialog.
• Commands:
  • Escape
• Setup script description: opens the 'Add Delivery Address' dialog followed by the 'Verification Result' dialog, and sets focus on the 'Close' button inside the second dialog

Assertions

Assertion	Priority	Reference
Role 'dialog' is conveyed	required	role="dialog"
Name 'Add Delivery Address' is conveyed	required	aria-labelledby
Role of the focused element ('button') is conveyed	required	<button>
Name of the focused element ('Verify Address') is conveyed	required	Visible text content contained within the <button> element

Close a nested modal dialog

• Applies to: macOS VoiceOver
• Mode: interaction
• Instructions: With focus on the 'Close' button inside a modal dialog, close the dialog.
• Commands:
  • Escape
• Setup script description: opens the 'Add Delivery Address' dialog followed by the 'Verification Result' dialog, and sets focus on the 'Close' button inside the second dialog

Assertions

Assertion	Priority	Reference
Role 'dialog' is conveyed	required	role="dialog"
Name 'Add Delivery Address' is conveyed	required	aria-labelledby
Role of the focused element ('button') is conveyed	required	<button>
Name of the focused element ('Verify Address') is conveyed	required	Visible text content contained within the <button> element

Close a nested modal dialog using a button in reading mode

• Applies to: JAWS, NVDA
• Mode: reading
• Instructions: With the reading cursor on the 'Close' button inside a modal dialog, press the button to close the dialog.
• Commands:
  • Space
  • Enter
• Setup script description: opens the 'Add Delivery Address' dialog followed by the 'Verification Result' dialog, and sets focus on the 'Close' button inside the second dialog

Assertions

Assertion	Priority	Reference
Role 'dialog' is conveyed	required	role="dialog"
Name 'Add Delivery Address' is conveyed	required	aria-labelledby
Role of the focused element ('button') is conveyed	required	<button>
Name of the focused element ('Verify Address') is conveyed	required	Visible text content contained within the <button> element

Close a nested modal dialog using a button in interaction mode

• Applies to: JAWS, NVDA
• Mode: interaction
• Instructions: With focus on the 'Close' button inside a modal dialog, press the button to close the dialog.
• Commands:
  • Space
  • Enter
• Setup script description: opens the 'Add Delivery Address' dialog followed by the 'Verification Result' dialog, and sets focus on the 'Close' button inside the second dialog

Assertions

Assertion	Priority	Reference
Role 'dialog' is conveyed	required	role="dialog"
Name 'Add Delivery Address' is conveyed	required	aria-labelledby
Role of the focused element ('button') is conveyed	required	<button>
Name of the focused element ('Verify Address') is conveyed	required	Visible text content contained within the <button> element

Close a nested modal dialog using a button

• Applies to: macOS VoiceOver
• Mode: interaction
• Instructions: With focus on the 'Close' button inside a modal dialog, press the button to close the dialog.
• Commands:
  • Control+Option+Space
  • Space
  • Enter
• Setup script description: opens the 'Add Delivery Address' dialog followed by the 'Verification Result' dialog, and sets focus on the 'Close' button inside the second dialog

Assertions

Assertion	Priority	Reference
Role 'dialog' is conveyed	required	role="dialog"
Name 'Add Delivery Address' is conveyed	required	aria-labelledby
Role of the focused element ('button') is conveyed	required	<button>
Name of the focused element ('Verify Address') is conveyed	required	Visible text content contained within the <button> element

Open a nested modal dialog using a link in reading mode

• Applies to: JAWS, NVDA
• Mode: reading
• Instructions: With the reading cursor on the 'your profile' link inside a modal dialog, open the nested 'End of the Road!' dialog.
• Commands:
  • Enter
• Setup script description: opens the 'Add Delivery Address' dialog followed by the 'Address Added' dialog, and sets focus on the 'your profile' link inside the second dialog

Assertions

Assertion	Priority	Reference
Role 'dialog' is conveyed	required	role="dialog"
Name 'End of the Road!' is conveyed	required	aria-labelledby
Description of the dialog ('You activated a fake link or button that goes nowhere! The link or button is present for demonstration purposes only.') is conveyed	required	aria-describedby
Role of the focused element ('button') is conveyed	required	<button>
Name of the focused element ('Close') is conveyed	required	Visible text content contained within the <button> element

Open a nested modal dialog using a link in interaction mode

• Applies to: JAWS, NVDA
• Mode: interaction
• Instructions: With focus on the 'your profile' link inside a modal dialog, open the nested 'End of the Road!' dialog.
• Commands:
  • Enter
• Setup script description: opens the 'Add Delivery Address' dialog followed by the 'Address Added' dialog, and sets focus on the 'your profile' link inside the second dialog

Assertions

Assertion	Priority	Reference
Role 'dialog' is conveyed	required	role="dialog"
Name 'End of the Road!' is conveyed	required	aria-labelledby
Description of the dialog ('You activated a fake link or button that goes nowhere! The link or button is present for demonstration purposes only.') is conveyed	required	aria-describedby
Role of the focused element ('button') is conveyed	required	<button>
Name of the focused element ('Close') is conveyed	required	Visible text content contained within the <button> element

Open a nested modal dialog using a link

• Applies to: macOS VoiceOver
• Mode: interaction
• Instructions: With focus on the 'your profile' link inside a modal dialog, open the nested 'End of the Road!' dialog.
• Commands:
  • Control+Option+Space
  • Enter
• Setup script description: opens the 'Add Delivery Address' dialog followed by the 'Address Added' dialog, and sets focus on the 'your profile' link inside the second dialog

Assertions

Assertion	Priority	Reference
Role 'dialog' is conveyed	required	role="dialog"
Name 'End of the Road!' is conveyed	required	aria-labelledby
Description of the dialog ('You activated a fake link or button that goes nowhere! The link or button is present for demonstration purposes only.') is conveyed	required	aria-describedby
Role of the focused element ('button') is conveyed	required	<button>
Name of the focused element ('Close') is conveyed	required	Visible text content contained within the <button> element

[shirsha]

How did the screenreaders behave when aria-decribedby is removed from the "End of the Road" dialog?
Is aria-describedby still required for modal dialogs with short descriptions?

[jscholes]

@shirsha Could you clarify these two questions? I'm not clear how they relate to the ARIA-AT project or this test plan specifically. It sounds like you're asking more about the fundamental accessibility and recommended mark-up for dialogs.