Dialog test scenarios
These test scenarios are designed to be human readable by using Gherkin syntax. Almost all of them are automated behind the scenes using JavaScript and Playwright, which you can see in the GitHub repo.
Sections: the scenarios are grouped by the same themes as the accessibility requirements in the component documentation, so each section here matches a section there.
Tags: marked by an @ symbol, tags are a
way to group related tests. For example, by component name, whether
it's an automated or manual test, and the WCAG level and success
criterion number.
Steps: every scenario is written with the same shared set of Given, When and Then steps. See the full list of test steps for what each one does.
View accessibility requirements
Adaptability
View accessibility requirements: Adaptability
@dialog @adaptability Feature: Dialog — Adaptability Helping people by honouring user preferences and by allowing adaptations to content presentation and time limits User story: As a person who needs to adjust the way content is presented, or to adjust timings I want components that my tools can interpret and adjust so that I can navigate, understand, and operate the interface reliably using the technology that supports me. Background: Given I load the sample "http://localhost:8081/dialog/examples/default" # ---------------------------------------------------------------------------- # Perceivable # ---------------------------------------------------------------------------- @1.3.4 @aa @automatic Rule: 1.3.4 Orientation, Level AA Scenario Outline: Content is not restricted to a single orientation, unless it's essential When I click on "#dialog-trigger" And I switch to landscape mode And I view the rendered "<element>" Then it should not lose any content or functionality Examples: | element | | #dialog-modal | | .tl-dialog__actions | @1.4.4 @aa @automatic Rule: 1.4.4 Resize Text, Level AA Scenario Outline: Text can scale up to 200% without loss of content or functionality When I click on "#dialog-trigger" And I zoom in the browser to 200% And I view the rendered "<element>" Then it should not lose any content or functionality Examples: | element | | #dialog-modal | | .tl-dialog__actions | @1.4.10 @aa @automatic Rule: 1.4.10 Reflow, Level AA Scenario: Content reflows without horizontal scrolling at 320px wide When I click on "#dialog-trigger" And I view the rendered '#dialog-modal' And I set the viewport to 320px wide Then it should reflow without requiring horizontal scrolling @1.4.10 @aa @automatic Rule: 1.4.10 Reflow, Level AA Scenario: A non-modal dialog reflows without horizontal scrolling at 320px wide Given I load the sample "http://localhost:8081/dialog/examples/non-modal" When I click on "#dialog-trigger" And I view the rendered '#dialog-non-modal' And I set the viewport to 320px wide Then it should reflow without requiring horizontal scrolling @1.4.12 @aa @automatic Rule: 1.4.12 Text Spacing, Level AA Scenario: Line, letter and word spacing can be increased without a loss of content When I click on "#dialog-trigger" And I view the rendered '#dialog-modal' And I increase the line height to 1.5 times the font size And I increase the spacing following paragraphs to 2 times the font size And I increase the letter spacing to 0.12 times the font size And I increase the word spacing to 0.16 times the font size Then it should not lose any content or functionality @1.4.8 @aaa @automatic Rule: 1.4.8 Visual Presentation, Level AAA Scenario: Content adjusts as expected when people apply their own colour, width, alignment, spacing and size preferences When I click on "#dialog-trigger" And I view the rendered '#dialog-modal' And I apply a custom foreground and background colour using a user stylesheet And I apply a custom max-width using a user stylesheet And I apply a custom text-alignment using a user stylesheet And I apply a custom line height using a user stylesheet And I apply a custom font size of 200% using a user stylesheet Then it should not lose any content or functionality @recommendation @automatic Rule: Recommendation Scenario: Content and information remains visible and understandable when using high contrast themes When I enable "forced colors" mode And I click on "#dialog-trigger" And I view the rendered '#dialog-modal' Then it should not lose any content or functionality @recommendation @automatic Rule: Recommendation Scenario: The dialog remains distinguishable from the content behind it when using high contrast themes When I enable "forced colors" mode And I click on "#dialog-trigger" And I view the rendered '.tl-dialog__actions' Then it should not lose any content or functionalityFeature: Dialog — Adaptability
Helping people by honouring user preferences and by allowing adaptations to content presentation and time limits
User story:
As a person who needs to adjust the way content is presented, or to adjust timings I want components that my tools can interpret and adjust so that I can navigate, understand, and operate the interface reliably using the technology that supports me.
Background:
Given I load the sample "https://tetralogical.com/resources/accessible-components-library/dialog/examples/default.html"
1.3.4 Orientation
Rule: 1.3.4 Orientation, Level AA
Scenario Outline: Content is not restricted to a single orientation, unless it's essential
When I click on "#dialog-trigger"
And I switch to landscape mode
And I view the rendered "<element>"
Then it should not lose any content or functionality
Examples:
| element |
|---|
| #dialog-modal |
| .tl-dialog__actions |
1.4.4 Resize Text
Rule: 1.4.4 Resize Text, Level AA
Scenario Outline: Text can scale up to 200% without loss of content or functionality
When I click on "#dialog-trigger"
And I zoom in the browser to 200%
And I view the rendered "<element>"
Then it should not lose any content or functionality
Examples:
| element |
|---|
| #dialog-modal |
| .tl-dialog__actions |
1.4.10 Reflow
Rule: 1.4.10 Reflow, Level AA
Scenario: Content reflows without horizontal scrolling at 320px wide
When I click on "#dialog-trigger"
And I view the rendered '#dialog-modal'
And I set the viewport to 320px wide
Then it should reflow without requiring horizontal scrolling
Rule: 1.4.10 Reflow, Level AA
Scenario: A non-modal dialog reflows without horizontal scrolling at 320px wide
Given I load the sample "https://tetralogical.com/resources/accessible-components-library/dialog/examples/non-modal.html"
When I click on "#dialog-trigger"
And I view the rendered '#dialog-non-modal'
And I set the viewport to 320px wide
Then it should reflow without requiring horizontal scrolling
1.4.12 Text Spacing
Rule: 1.4.12 Text Spacing, Level AA
Scenario: Line, letter and word spacing can be increased without a loss of content
When I click on "#dialog-trigger"
And I view the rendered '#dialog-modal'
And I increase the line height to 1.5 times the font size
And I increase the spacing following paragraphs to 2 times the font size
And I increase the letter spacing to 0.12 times the font size
And I increase the word spacing to 0.16 times the font size
Then it should not lose any content or functionality
1.4.8 Visual Presentation
Rule: 1.4.8 Visual Presentation, Level AAA
Scenario: Content adjusts as expected when people apply their own colour, width, alignment, spacing and size preferences
When I click on "#dialog-trigger"
And I view the rendered '#dialog-modal'
And I apply a custom foreground and background colour using a user stylesheet
And I apply a custom max-width using a user stylesheet
And I apply a custom text-alignment using a user stylesheet
And I apply a custom line height using a user stylesheet
And I apply a custom font size of 200% using a user stylesheet
Then it should not lose any content or functionality
Recommendations
Rule: Recommendation
Scenario: Content and information remains visible and understandable when using high contrast themes
When I enable "forced colors" mode
And I click on "#dialog-trigger"
And I view the rendered '#dialog-modal'
Then it should not lose any content or functionality
Rule: Recommendation
Scenario: The dialog remains distinguishable from the content behind it when using high contrast themes
When I enable "forced colors" mode
And I click on "#dialog-trigger"
And I view the rendered '.tl-dialog__actions'
Then it should not lose any content or functionality
Animation and movement
View accessibility requirements: Animation and movement
@dialog @animation-and-movement Feature: Dialog — Animation and movement Helping people to limit animation or reduce motion within content No component-specific requirementsFeature: Dialog — Animation and movement
Helping people to limit animation or reduce motion within content
No component-specific requirements
Assistive technologies and semantics
View accessibility requirements: Assistive technologies and semantics
@dialog @assistive-technologies-and-semantics Feature: Dialog — Assistive technologies and semantics Helping people who use a screen reader or other assistive tech by using appropriate code User story: As a person who uses assistive technology I want components that use semantic markup, roles, and states that my tools can interpret so that I can navigate, understand, and operate the interface reliably. Background: Given I load the sample "http://localhost:8081/dialog/examples/default" # ---------------------------------------------------------------------------- # Perceivable # ---------------------------------------------------------------------------- @1.3.1 @a @automatic Rule: 1.3.1 Info and Relationships, Level A Scenario: The dialog has an accessible name When I click on "#dialog-trigger" And I inspect "#dialog-modal" in the DOM Then it should have an accessible name And its accessible name should be "Do you want to delete your account?" @1.3.1 @a @automatic Rule: 1.3.1 Info and Relationships, Level A Scenario: The dialog takes its accessible name from its visible heading When I click on "#dialog-trigger" And I inspect "#dialog-modal" in the DOM Then it should have the attribute "aria-labelledby" with the value "dialog-modal-heading" @1.3.1 @a @automatic Rule: 1.3.1 Info and Relationships, Level A Scenario: A non-modal dialog has an accessible name Given I load the sample "http://localhost:8081/dialog/examples/non-modal" When I click on "#dialog-trigger" And I inspect "#dialog-non-modal" in the DOM Then it should have an accessible name And its accessible name should be "Non-modal example" @1.3.2 @a @automatic Rule: 1.3.2 Meaningful Sequence, Level A Scenario Outline: A correct reading sequence is programmatically determined when the dialog is open When I click on "#dialog-trigger" And I inspect "<element>" in the DOM Then it is positioned after the "<previous_element>" element in the DOM Examples: | element | previous_element | | #dialog-modal | #dialog-trigger | | .tl-dialog__actions | #dialog-modal-heading | | #dialog-confirm | #dialog-cancel | @1.3.2 @a @automatic Rule: 1.3.2 Meaningful Sequence, Level A Scenario: The close button comes after the content in a non-modal dialog's reading sequence Given I load the sample "http://localhost:8081/dialog/examples/non-modal" When I click on "#dialog-trigger" And I inspect "#dialog-close" in the DOM Then it is positioned after the "#dialog-non-modal p" element in the DOM @1.3.2 @a @automatic Rule: 1.3.2 Meaningful Sequence, Level A Scenario: The dialog is removed from the reading sequence when it is closed When I click on "#dialog-trigger" And I click on "#dialog-cancel" And I inspect "#dialog-modal" in the DOM Then it should not have the attribute "open" # ---------------------------------------------------------------------------- # Operable # ---------------------------------------------------------------------------- @2.5.3 @a @automatic Rule: 2.5.3 Label in Name, Level A Scenario Outline: The controls which open and dismiss the dialog have an accessible name which matches or includes the visible label When I click on "#dialog-trigger" And I view the rendered "<element>" Then it should have an accessible name which contains the visible label "<visible_label>" Examples: | element | visible_label | | #dialog-cancel | No | | #dialog-confirm | Yes | @2.5.3 @a @automatic Rule: 2.5.3 Label in Name, Level A Scenario: The control which opens the dialog has an accessible name which matches or includes the visible label When I view the rendered '#dialog-trigger' Then it should have an accessible name which contains the visible label "Open modal" # ---------------------------------------------------------------------------- # Robust # ---------------------------------------------------------------------------- @4.1.2 @a @automatic Rule: 4.1.2 Name, Role, Value, Level A Scenario: The dialog has a role of dialog When I click on "#dialog-trigger" And I inspect "#dialog-modal" in the DOM Then it should have an accessible role of "dialog" @4.1.2 @a @automatic Rule: 4.1.2 Name, Role, Value, Level A Scenario: A non-modal dialog has a role of dialog Given I load the sample "http://localhost:8081/dialog/examples/non-modal" When I click on "#dialog-trigger" And I inspect "#dialog-non-modal" in the DOM Then it should have an accessible role of "dialog" @4.1.2 @a @automatic Rule: 4.1.2 Name, Role, Value, Level A Scenario: Modal dialogs use aria-modal="true" When I click on "#dialog-trigger" And I inspect "#dialog-modal" in the DOM Then it should have the attribute "aria-modal" with the value "true" @4.1.2 @a @automatic Rule: 4.1.2 Name, Role, Value, Level A Scenario: Non-modal dialogs do not use aria-modal Given I load the sample "http://localhost:8081/dialog/examples/non-modal" When I click on "#dialog-trigger" And I inspect "#dialog-non-modal" in the DOM Then it should not have the attribute "aria-modal" @4.1.2 @a @automatic Rule: 4.1.2 Name, Role, Value, Level A Scenario: The dialog reports whether it is open When I click on "#dialog-trigger" And I inspect "#dialog-modal" in the DOM Then it should have the attribute "open" @4.1.2 @a @automatic Rule: 4.1.2 Name, Role, Value, Level A Scenario Outline: The controls which open and dismiss the dialog have an appropriate accessible name and role for their function When I click on "#dialog-trigger" And I inspect "<element>" in the DOM Then it should have an accessible role of "button" And it should have an accessible name And its accessible name should be "<name>" Examples: | element | name | | #dialog-trigger | Open modal | | #dialog-cancel | No | | #dialog-confirm | Yes | @4.1.2 @a @automatic Rule: 4.1.2 Name, Role, Value, Level A Scenario: An icon-only close button has an appropriate accessible name and role for its function Given I load the sample "http://localhost:8081/dialog/examples/non-modal" When I click on "#dialog-trigger" And I inspect "#dialog-close" in the DOM Then it should have an accessible role of "button" And it should have an accessible name And its accessible name should be "Close" @recommendation @automatic Rule: Recommendation Scenario: Markup can be parsed without errors When I click on "#dialog-trigger" And I inspect "#dialog-modal" in the DOM Then it should use valid HTML with no parsing errorsFeature: Dialog — Assistive technologies and semantics
Helping people who use a screen reader or other assistive tech by using appropriate code
User story:
As a person who uses assistive technology I want components that use semantic markup, roles, and states that my tools can interpret so that I can navigate, understand, and operate the interface reliably.
Background:
Given I load the sample "https://tetralogical.com/resources/accessible-components-library/dialog/examples/default.html"
1.3.1 Info and Relationships
Rule: 1.3.1 Info and Relationships, Level A
Scenario: The dialog has an accessible name
When I click on "#dialog-trigger"
And I inspect "#dialog-modal" in the DOM
Then it should have an accessible name
And its accessible name should be "Do you want to delete your account?"
Rule: 1.3.1 Info and Relationships, Level A
Scenario: The dialog takes its accessible name from its visible heading
When I click on "#dialog-trigger"
And I inspect "#dialog-modal" in the DOM
Then it should have the attribute "aria-labelledby" with the value "dialog-modal-heading"
Rule: 1.3.1 Info and Relationships, Level A
Scenario: A non-modal dialog has an accessible name
Given I load the sample "https://tetralogical.com/resources/accessible-components-library/dialog/examples/non-modal.html"
When I click on "#dialog-trigger"
And I inspect "#dialog-non-modal" in the DOM
Then it should have an accessible name
And its accessible name should be "Non-modal example"
1.3.2 Meaningful Sequence
Rule: 1.3.2 Meaningful Sequence, Level A
Scenario Outline: A correct reading sequence is programmatically determined when the dialog is open
When I click on "#dialog-trigger"
And I inspect "<element>" in the DOM
Then it is positioned after the "<previous_element>" element in the DOM
Examples:
| element | previous_element |
|---|---|
| #dialog-modal | #dialog-trigger |
| .tl-dialog__actions | #dialog-modal-heading |
| #dialog-confirm | #dialog-cancel |
Rule: 1.3.2 Meaningful Sequence, Level A
Scenario: The close button comes after the content in a non-modal dialog's reading sequence
Given I load the sample "https://tetralogical.com/resources/accessible-components-library/dialog/examples/non-modal.html"
When I click on "#dialog-trigger"
And I inspect "#dialog-close" in the DOM
Then it is positioned after the "#dialog-non-modal p" element in the DOM
Rule: 1.3.2 Meaningful Sequence, Level A
Scenario: The dialog is removed from the reading sequence when it is closed
When I click on "#dialog-trigger"
And I click on "#dialog-cancel"
And I inspect "#dialog-modal" in the DOM
Then it should not have the attribute "open"
2.5.3 Label in Name
Rule: 2.5.3 Label in Name, Level A
Scenario Outline: The controls which open and dismiss the dialog have an accessible name which matches or includes the visible label
When I click on "#dialog-trigger"
And I view the rendered "<element>"
Then it should have an accessible name which contains the visible label "<visible_label>"
Examples:
| element | visible_label |
|---|---|
| #dialog-cancel | No |
| #dialog-confirm | Yes |
Rule: 2.5.3 Label in Name, Level A
Scenario: The control which opens the dialog has an accessible name which matches or includes the visible label
When I view the rendered '#dialog-trigger'
Then it should have an accessible name which contains the visible label "Open modal"
4.1.2 Name, Role, Value
Rule: 4.1.2 Name, Role, Value, Level A
Scenario: The dialog has a role of dialog
When I click on "#dialog-trigger"
And I inspect "#dialog-modal" in the DOM
Then it should have an accessible role of "dialog"
Rule: 4.1.2 Name, Role, Value, Level A
Scenario: A non-modal dialog has a role of dialog
Given I load the sample "https://tetralogical.com/resources/accessible-components-library/dialog/examples/non-modal.html"
When I click on "#dialog-trigger"
And I inspect "#dialog-non-modal" in the DOM
Then it should have an accessible role of "dialog"
Rule: 4.1.2 Name, Role, Value, Level A
Scenario: Modal dialogs use aria-modal="true"
When I click on "#dialog-trigger"
And I inspect "#dialog-modal" in the DOM
Then it should have the attribute "aria-modal" with the value "true"
Rule: 4.1.2 Name, Role, Value, Level A
Scenario: Non-modal dialogs do not use aria-modal
Given I load the sample "https://tetralogical.com/resources/accessible-components-library/dialog/examples/non-modal.html"
When I click on "#dialog-trigger"
And I inspect "#dialog-non-modal" in the DOM
Then it should not have the attribute "aria-modal"
Rule: 4.1.2 Name, Role, Value, Level A
Scenario: The dialog reports whether it is open
When I click on "#dialog-trigger"
And I inspect "#dialog-modal" in the DOM
Then it should have the attribute "open"
Rule: 4.1.2 Name, Role, Value, Level A
Scenario Outline: The controls which open and dismiss the dialog have an appropriate accessible name and role for their function
When I click on "#dialog-trigger"
And I inspect "<element>" in the DOM
Then it should have an accessible role of "button"
And it should have an accessible name
And its accessible name should be "<name>"
Examples:
| element | name |
|---|---|
| #dialog-trigger | Open modal |
| #dialog-cancel | No |
| #dialog-confirm | Yes |
Rule: 4.1.2 Name, Role, Value, Level A
Scenario: An icon-only close button has an appropriate accessible name and role for its function
Given I load the sample "https://tetralogical.com/resources/accessible-components-library/dialog/examples/non-modal.html"
When I click on "#dialog-trigger"
And I inspect "#dialog-close" in the DOM
Then it should have an accessible role of "button"
And it should have an accessible name
And its accessible name should be "Close"
Recommendations
Rule: Recommendation
Scenario: Markup can be parsed without errors
When I click on "#dialog-trigger"
And I inspect "#dialog-modal" in the DOM
Then it should use valid HTML with no parsing errors
Colour and contrast
View accessibility requirements: Colour and contrast
@dialog @colour-and-contrast Feature: Dialog — Colour and contrast Helping people who struggle with colour perception or low vision User story: As a person with low vision or colour vision deficiency I want components with sufficient contrast and that don't rely solely on colour so that I can perceive and understand all content and interface elements. Background: Given I load the sample "http://localhost:8081/dialog/examples/default" # ---------------------------------------------------------------------------- # Perceivable # ---------------------------------------------------------------------------- @1.4.3 @aa @automatic Rule: 1.4.3 Contrast (Minimum), Level AA Scenario Outline: Text in the dialog has a contrast ratio of 4.5:1 against its background When I click on "#dialog-trigger" And I view the rendered "<element>" Then its text should have a contrast ratio of '4.5:1' against its background Examples: | element | | #dialog-modal | | #dialog-modal-heading | | #dialog-cancel | | #dialog-confirm | @1.4.3 @aa @automatic @darkmode Rule: 1.4.3 Contrast (Minimum), Level AA Scenario Outline: Darkmode: Text in the dialog has a contrast ratio of 4.5:1 against its background When I click on "#dialog-trigger" And I view the rendered "<element>" And I enable "dark" mode Then its text should have a contrast ratio of '4.5:1' against its background Examples: | element | | #dialog-modal | | #dialog-modal-heading | | #dialog-cancel | | #dialog-confirm | @1.4.11 @aa @automatic Rule: 1.4.11 Non-text Contrast, Level AA Scenario: The icon which is the only content of the close button has a contrast ratio of 3:1 with its background Given I load the sample "http://localhost:8081/dialog/examples/non-modal" When I click on "#dialog-trigger" And I view the rendered '#dialog-close' Then its text should have a contrast ratio of '3:1' against its background @1.4.11 @aa @automatic @darkmode Rule: 1.4.11 Non-text Contrast, Level AA Scenario: Darkmode: The icon which is the only content of the close button has a contrast ratio of 3:1 with its background Given I load the sample "http://localhost:8081/dialog/examples/non-modal" When I click on "#dialog-trigger" And I view the rendered '#dialog-close' And I enable "dark" mode Then its text should have a contrast ratio of '3:1' against its background @1.4.11 @aa @automatic Rule: 1.4.11 Non-text Contrast, Level AA Scenario Outline: The custom focus indicator has a contrast ratio of 3:1 against the background When I click on "#dialog-trigger" And I focus "<element>" using a keyboard Then it should have a visible focus indicator And the focus indicator should have a contrast ratio of 3:1 against its background Examples: | element | | #dialog-cancel | | #dialog-confirm | @1.4.11 @aa @automatic Rule: 1.4.11 Non-text Contrast, Level AA Scenario: The custom focus indicator on the control which opens the dialog has a contrast ratio of 3:1 against the background When I focus "#dialog-trigger" using a keyboard Then it should have a visible focus indicator And the focus indicator should have a contrast ratio of 3:1 against its background @1.4.6 @aaa @automatic Rule: 1.4.6 Contrast (Enhanced), Level AAA Scenario Outline: Text in the dialog has a contrast ratio of 7:1 against its background When I click on "#dialog-trigger" And I view the rendered "<element>" Then its text should have a contrast ratio of '7:1' against its background Examples: | element | | #dialog-modal | | #dialog-modal-heading | | #dialog-cancel | | #dialog-confirm | @1.4.6 @aaa @automatic @darkmode Rule: 1.4.6 Contrast (Enhanced), Level AAA Scenario Outline: Darkmode: Text in the dialog has a contrast ratio of 7:1 against its background When I click on "#dialog-trigger" And I view the rendered "<element>" And I enable "dark" mode Then its text should have a contrast ratio of '7:1' against its background Examples: | element | | #dialog-modal | | #dialog-modal-heading | | #dialog-cancel | | #dialog-confirm |Feature: Dialog — Colour and contrast
Helping people who struggle with colour perception or low vision
User story:
As a person with low vision or colour vision deficiency I want components with sufficient contrast and that don't rely solely on colour so that I can perceive and understand all content and interface elements.
Background:
Given I load the sample "https://tetralogical.com/resources/accessible-components-library/dialog/examples/default.html"
1.4.3 Contrast (Minimum)
Rule: 1.4.3 Contrast (Minimum), Level AA
Scenario Outline: Text in the dialog has a contrast ratio of 4.5:1 against its background
When I click on "#dialog-trigger"
And I view the rendered "<element>"
Then its text should have a contrast ratio of '4.5:1' against its background
Examples:
| element |
|---|
| #dialog-modal |
| #dialog-modal-heading |
| #dialog-cancel |
| #dialog-confirm |
Rule: 1.4.3 Contrast (Minimum), Level AA
Scenario Outline: Darkmode: Text in the dialog has a contrast ratio of 4.5:1 against its background
When I click on "#dialog-trigger"
And I view the rendered "<element>"
And I enable "dark" mode
Then its text should have a contrast ratio of '4.5:1' against its background
Examples:
| element |
|---|
| #dialog-modal |
| #dialog-modal-heading |
| #dialog-cancel |
| #dialog-confirm |
1.4.11 Non-text Contrast
Rule: 1.4.11 Non-text Contrast, Level AA
Scenario: The icon which is the only content of the close button has a contrast ratio of 3:1 with its background
Given I load the sample "https://tetralogical.com/resources/accessible-components-library/dialog/examples/non-modal.html"
When I click on "#dialog-trigger"
And I view the rendered '#dialog-close'
Then its text should have a contrast ratio of '3:1' against its background
Rule: 1.4.11 Non-text Contrast, Level AA
Scenario: Darkmode: The icon which is the only content of the close button has a contrast ratio of 3:1 with its background
Given I load the sample "https://tetralogical.com/resources/accessible-components-library/dialog/examples/non-modal.html"
When I click on "#dialog-trigger"
And I view the rendered '#dialog-close'
And I enable "dark" mode
Then its text should have a contrast ratio of '3:1' against its background
Rule: 1.4.11 Non-text Contrast, Level AA
Scenario Outline: The custom focus indicator has a contrast ratio of 3:1 against the background
When I click on "#dialog-trigger"
And I focus "<element>" using a keyboard
Then it should have a visible focus indicator
And the focus indicator should have a contrast ratio of 3:1 against its background
Examples:
| element |
|---|
| #dialog-cancel |
| #dialog-confirm |
Rule: 1.4.11 Non-text Contrast, Level AA
Scenario: The custom focus indicator on the control which opens the dialog has a contrast ratio of 3:1 against the background
When I focus "#dialog-trigger" using a keyboard
Then it should have a visible focus indicator
And the focus indicator should have a contrast ratio of 3:1 against its background
1.4.6 Contrast (Enhanced)
Rule: 1.4.6 Contrast (Enhanced), Level AAA
Scenario Outline: Text in the dialog has a contrast ratio of 7:1 against its background
When I click on "#dialog-trigger"
And I view the rendered "<element>"
Then its text should have a contrast ratio of '7:1' against its background
Examples:
| element |
|---|
| #dialog-modal |
| #dialog-modal-heading |
| #dialog-cancel |
| #dialog-confirm |
Rule: 1.4.6 Contrast (Enhanced), Level AAA
Scenario Outline: Darkmode: Text in the dialog has a contrast ratio of 7:1 against its background
When I click on "#dialog-trigger"
And I view the rendered "<element>"
And I enable "dark" mode
Then its text should have a contrast ratio of '7:1' against its background
Examples:
| element |
|---|
| #dialog-modal |
| #dialog-modal-heading |
| #dialog-cancel |
| #dialog-confirm |
Consistency and predictability
View accessibility requirements: Consistency and predictability
@dialog @consistency-and-predictability Feature: Dialog — Consistency and predictability Helping people by keeping functionality consistent and predictable User story: As a person who benefits from consistent and predictable interfaces I want components that behave in expected ways and don't cause unexpected changes so that I can navigate and interact with confidence. Background: Given I load the sample "http://localhost:8081/dialog/examples/default" # ---------------------------------------------------------------------------- # Understandable # ---------------------------------------------------------------------------- @3.2.1 @a @automatic Rule: 3.2.1 On Focus, Level A Scenario: The control which opens the dialog does not initiate a change of context when it receives focus When I focus "#dialog-trigger" using a keyboard Then it should NOT navigate to a new page @3.2.1 @a @automatic Rule: 3.2.1 On Focus, Level A Scenario: The dialog does not open when the control which opens it receives focus When I focus "#dialog-trigger" using a keyboard And I inspect "#dialog-modal" in the DOM Then it should not have the attribute "open" @3.2.1 @a @automatic Rule: 3.2.1 On Focus, Level A Scenario Outline: The controls which dismiss the dialog do not initiate a change of context when they receive focus When I click on "#dialog-trigger" And I focus "<element>" using a keyboard Then it should NOT navigate to a new page Examples: | element | | #dialog-cancel | | #dialog-confirm | @3.2.1 @a @automatic Rule: 3.2.1 On Focus, Level A Scenario: The dialog does not close when a control within it receives focus When I click on "#dialog-trigger" And I focus "#dialog-cancel" using a keyboard And I inspect "#dialog-modal" in the DOM Then it should have the attribute "open" @recommendation @automatic Rule: Recommendation Scenario Outline: The dialog has a clear visible method to dismiss it, such as a close button When I click on "#dialog-trigger" And I view the rendered "<element>" Then it should have an accessible name Examples: | element | | #dialog-cancel | | #dialog-confirm | @recommendation @automatic Rule: Recommendation Scenario: While a modal dialog is open, the page behind it cannot be scrolled When I click on "#dialog-trigger" And I inspect "html" in the DOM Then it should have the CSS property "overflow-y" with the value "hidden" When I press the "ESC" key once And I inspect "html" in the DOM Then it should have the CSS property "overflow-y" with the value "visible" @recommendation @automatic Rule: Recommendation Scenario: A non-modal dialog does not stop the page behind it from scrolling Given I load the sample "http://localhost:8081/dialog/examples/non-modal" When I click on "#dialog-trigger" And I inspect "html" in the DOM Then it should have the CSS property "overflow-y" with the value "visible" @recommendation @automatic Rule: Recommendation Scenario: A non-modal dialog has a clear visible method to dismiss it, such as a close button Given I load the sample "http://localhost:8081/dialog/examples/non-modal" When I click on "#dialog-trigger" And I view the rendered '#dialog-close' Then it should have an accessible nameFeature: Dialog — Consistency and predictability
Helping people by keeping functionality consistent and predictable
User story:
As a person who benefits from consistent and predictable interfaces I want components that behave in expected ways and don't cause unexpected changes so that I can navigate and interact with confidence.
Background:
Given I load the sample "https://tetralogical.com/resources/accessible-components-library/dialog/examples/default.html"
3.2.1 On Focus
Rule: 3.2.1 On Focus, Level A
Scenario: The control which opens the dialog does not initiate a change of context when it receives focus
When I focus "#dialog-trigger" using a keyboard
Then it should NOT navigate to a new page
Rule: 3.2.1 On Focus, Level A
Scenario: The dialog does not open when the control which opens it receives focus
When I focus "#dialog-trigger" using a keyboard
And I inspect "#dialog-modal" in the DOM
Then it should not have the attribute "open"
Rule: 3.2.1 On Focus, Level A
Scenario Outline: The controls which dismiss the dialog do not initiate a change of context when they receive focus
When I click on "#dialog-trigger"
And I focus "<element>" using a keyboard
Then it should NOT navigate to a new page
Examples:
| element |
|---|
| #dialog-cancel |
| #dialog-confirm |
Rule: 3.2.1 On Focus, Level A
Scenario: The dialog does not close when a control within it receives focus
When I click on "#dialog-trigger"
And I focus "#dialog-cancel" using a keyboard
And I inspect "#dialog-modal" in the DOM
Then it should have the attribute "open"
Recommendations
Rule: Recommendation
Scenario Outline: The dialog has a clear visible method to dismiss it, such as a close button
When I click on "#dialog-trigger"
And I view the rendered "<element>"
Then it should have an accessible name
Examples:
| element |
|---|
| #dialog-cancel |
| #dialog-confirm |
Rule: Recommendation
Scenario: While a modal dialog is open, the page behind it cannot be scrolled
When I click on "#dialog-trigger"
And I inspect "html" in the DOM
Then it should have the CSS property "overflow-y" with the value "hidden"
When I press the "ESC" key once
And I inspect "html" in the DOM
Then it should have the CSS property "overflow-y" with the value "visible"
Rule: Recommendation
Scenario: A non-modal dialog does not stop the page behind it from scrolling
Given I load the sample "https://tetralogical.com/resources/accessible-components-library/dialog/examples/non-modal.html"
When I click on "#dialog-trigger"
And I inspect "html" in the DOM
Then it should have the CSS property "overflow-y" with the value "visible"
Rule: Recommendation
Scenario: A non-modal dialog has a clear visible method to dismiss it, such as a close button
Given I load the sample "https://tetralogical.com/resources/accessible-components-library/dialog/examples/non-modal.html"
When I click on "#dialog-trigger"
And I view the rendered '#dialog-close'
Then it should have an accessible name
Images and media
View accessibility requirements: Images and media
@dialog @images-and-media Feature: Dialog — Images and media Helping people to access (and remove distractions caused by) image, video and audio content User story: As a person who cannot see images I want appropriate text alternatives for images so that I can access the same information as everyone else. Background: Given I load the sample "http://localhost:8081/dialog/examples/non-modal" # ---------------------------------------------------------------------------- # Perceivable # ---------------------------------------------------------------------------- @1.1.1 @a @automatic Rule: 1.1.1 Non-text Content, Level A Scenario: If an icon is the only content of the close button, it has a text alternative; if a text label is also available, the icon is hidden from screen readers When I click on "#dialog-trigger" And I view the rendered '#dialog-close' Then any icon should have a text description, or be hidden from assistive technologies @1.1.1 @a @automatic Rule: 1.1.1 Non-text Content, Level A Scenario: The close button has an accessible name, whether it uses a text label or an icon When I click on "#dialog-trigger" And I inspect "#dialog-close" in the DOM Then it should have an accessible name @1.1.1 @a @automatic Rule: 1.1.1 Non-text Content, Level A Scenario: The icon within the close button is hidden from assistive technologies When I click on "#dialog-trigger" And I inspect "#dialog-close svg" in the DOM Then it should have the attribute "aria-hidden" with the value "true"Feature: Dialog — Images and media
Helping people to access (and remove distractions caused by) image, video and audio content
User story:
As a person who cannot see images I want appropriate text alternatives for images so that I can access the same information as everyone else.
Background:
Given I load the sample "https://tetralogical.com/resources/accessible-components-library/dialog/examples/non-modal.html"
1.1.1 Non-text Content
Rule: 1.1.1 Non-text Content, Level A
Scenario: If an icon is the only content of the close button, it has a text alternative; if a text label is also available, the icon is hidden from screen readers
When I click on "#dialog-trigger"
And I view the rendered '#dialog-close'
Then any icon should have a text description, or be hidden from assistive technologies
Rule: 1.1.1 Non-text Content, Level A
Scenario: The close button has an accessible name, whether it uses a text label or an icon
When I click on "#dialog-trigger"
And I inspect "#dialog-close" in the DOM
Then it should have an accessible name
Rule: 1.1.1 Non-text Content, Level A
Scenario: The icon within the close button is hidden from assistive technologies
When I click on "#dialog-trigger"
And I inspect "#dialog-close svg" in the DOM
Then it should have the attribute "aria-hidden" with the value "true"
Input assistance
View accessibility requirements: Input assistance
@dialog @input-assistance Feature: Dialog — Input assistance Helping people to complete forms, enter data and pass authentication No component-specific requirementsFeature: Dialog — Input assistance
Helping people to complete forms, enter data and pass authentication
No component-specific requirements
Keyboard
View accessibility requirements: Keyboard
@dialog @keyboard Feature: Dialog — Keyboard Helping people who use a keyboard User story: As a keyboard user I want components that follow a logical tab order and provide visible, predictable focus states so that I can move through the interface efficiently and operate every feature without using a mouse. Background: Given I load the sample "http://localhost:8081/dialog/examples/default" # ---------------------------------------------------------------------------- # Operable # ---------------------------------------------------------------------------- @2.1.1 @a @automatic Rule: 2.1.1 Keyboard, Level A Scenario: The control which opens the dialog can be focused using the Tab key When I focus "#dialog-trigger" using a keyboard Then "#dialog-trigger" should be focused @2.1.1 @a @automatic Rule: 2.1.1 Keyboard, Level A Scenario Outline: The dialog can be triggered using the keyboard When I focus "#dialog-trigger" using a keyboard And I press the "<key>" key once And I inspect "#dialog-modal" in the DOM Then it should have the attribute "open" Examples: | key | | ENTER | | SPACE | @2.1.1 @a @automatic Rule: 2.1.1 Keyboard, Level A Scenario: The dialog can be dismissed using the keyboard When I click on "#dialog-trigger" And I focus "#dialog-cancel" using a keyboard And I press the "ENTER" key once And I inspect "#dialog-modal" in the DOM Then it should not have the attribute "open" @2.1.1 @a @automatic Rule: 2.1.1 Keyboard, Level A Scenario: A non-modal dialog can be triggered and dismissed using the keyboard Given I load the sample "http://localhost:8081/dialog/examples/non-modal" When I focus "#dialog-trigger" using a keyboard And I press the "ENTER" key once And I focus "#dialog-close" using a keyboard And I press the "ENTER" key once And I inspect "#dialog-non-modal" in the DOM Then it should not have the attribute "open" @2.1.2 @a @automatic Rule: 2.1.2 No Keyboard Trap, Level A # Focus is placed on the trigger explicitly, because the browser restores it # there asynchronously when the dialog closes Scenario: Focus can be moved away from the dialog once it has been dismissed When I click on "#dialog-trigger" And I press the "ESC" key once And I focus "#dialog-trigger" using a keyboard And I hold the "SHIFT" key And I press the "TAB" key once Then ".demo-link" should be focused @2.1.2 @a @automatic Rule: 2.1.2 No Keyboard Trap, Level A Scenario: Focus is not trapped by a non-modal dialog Given I load the sample "http://localhost:8081/dialog/examples/non-modal" When I click on "#dialog-trigger" And I focus "#dialog-close" using a keyboard And I press the "TAB" key once Then the focus should not be on a "#dialog-close" element @2.4.3 @a @automatic Rule: 2.4.3 Focus Order, Level A Scenario: When a dialog opens, focus moves to it When I click on "#dialog-trigger" Then "#dialog-modal" should be focused @2.4.3 @a @automatic Rule: 2.4.3 Focus Order, Level A Scenario: When a non-modal dialog opens, focus moves to it Given I load the sample "http://localhost:8081/dialog/examples/non-modal" When I click on "#dialog-trigger" Then "#dialog-non-modal" should be focused @2.4.3 @a @automatic Rule: 2.4.3 Focus Order, Level A Scenario: Until a modal dialog is dismissed, focus is contained within it When I click on "#dialog-trigger" And I focus "#dialog-confirm" using a keyboard And I press the "TAB" key once Then "#dialog-cancel" should be focused @2.4.3 @a @automatic Rule: 2.4.3 Focus Order, Level A Scenario: Until a modal dialog is dismissed, focus is contained within it when moving backwards When I click on "#dialog-trigger" And I focus "#dialog-cancel" using a keyboard And I hold the "SHIFT" key And I press the "TAB" key once Then "#dialog-confirm" should be focused @2.4.3 @a @automatic Rule: 2.4.3 Focus Order, Level A Scenario: When a modal dialog has just opened, moving backwards goes to its last control When I click on "#dialog-trigger" And I hold the "SHIFT" key And I press the "TAB" key once Then "#dialog-confirm" should be focused @2.4.3 @a @automatic Rule: 2.4.3 Focus Order, Level A Scenario: Until a modal dialog is dismissed, the content behind it is inert When I click on "#dialog-trigger" And I press the "TAB" key once And I press the "TAB" key once And I press the "TAB" key once Then the focus should not be on a ".demo-link" element @2.4.3 @a @automatic Rule: 2.4.3 Focus Order, Level A Scenario: The close button is the last control in a non-modal dialog's focus order Given I load the sample "http://localhost:8081/dialog/examples/non-modal" When I click on "#dialog-trigger" And I press the "TAB" key once Then "#dialog-close" should be focused When I press the "TAB" key once Then the focus should not be on a "#dialog-close" element @2.4.3 @a @automatic Rule: 2.4.3 Focus Order, Level A Scenario: When a dialog is closed, focus returns to the element that triggered the dialog When I click on "#dialog-trigger" And I click on "#dialog-cancel" Then "#dialog-trigger" should be focused @2.4.3 @a @automatic Rule: 2.4.3 Focus Order, Level A Scenario: When a dialog is dismissed with the Esc key, focus returns to the element that triggered the dialog When I click on "#dialog-trigger" And I press the "ESC" key once Then "#dialog-trigger" should be focused @2.4.7 @aa @automatic Rule: 2.4.7 Focus Visible, Level AA Scenario Outline: When controls within the dialog receive keyboard focus, a focus indicator is visible When I click on "#dialog-trigger" And I focus "<element>" using a keyboard Then it should have a visible focus indicator Examples: | element | | #dialog-cancel | | #dialog-confirm | @2.4.7 @aa @automatic Rule: 2.4.7 Focus Visible, Level AA Scenario: When the control which opens the dialog receives keyboard focus, a focus indicator is visible When I focus "#dialog-trigger" using a keyboard Then it should have a visible focus indicator @2.4.11 @aa @automatic Rule: 2.4.11 Focus Not Obscured (Minimum), Level AA Scenario Outline: When controls within the dialog receive keyboard focus, they are not fully hidden by other content When I click on "#dialog-trigger" And I focus "<element>" using a keyboard Then it should have a visible focus indicator And its focus indicator should be at least partially visible Examples: | element | | #dialog-cancel | | #dialog-confirm | @2.4.11 @aa @automatic Rule: 2.4.11 Focus Not Obscured (Minimum), Level AA Scenario: When content behind a non-modal dialog receives keyboard focus, the dialog does not fully hide it Given I load the sample "http://localhost:8081/dialog/examples/non-modal" When I click on "#dialog-trigger" And I focus a link behind "#dialog-non-modal" using a keyboard Then it should have a visible focus indicator And its focus indicator should be at least partially visible And it should not have its focus indicator entirely covered by "#dialog-non-modal" @2.1.3 @aaa @automatic Rule: 2.1.3 Keyboard (No Exception), Level AAA Scenario: The dialog component is accessible by keyboard, with no exceptions When I click on "#dialog-trigger" And I view the rendered '#dialog-modal' Then every interactive control should be reachable using the keyboard @2.4.12 @aaa @automatic Rule: 2.4.12 Focus Not Obscured (Enhanced), Level AAA Scenario Outline: When controls within the dialog receive keyboard focus, they are fully visible When I click on "#dialog-trigger" And I focus "<element>" using a keyboard Then it should have a visible focus indicator And its focus indicator should be fully visible Examples: | element | | #dialog-cancel | | #dialog-confirm | @2.4.12 @aaa @automatic Rule: 2.4.12 Focus Not Obscured (Enhanced), Level AAA Scenario: When content behind a non-modal dialog receives keyboard focus, the dialog moves aside Given I load the sample "http://localhost:8081/dialog/examples/non-modal" When I click on "#dialog-trigger" And I focus a link behind "#dialog-non-modal" using a keyboard Then it should have a visible focus indicator And its focus indicator should be fully visible And it should not have any part of its focus indicator covered by "#dialog-non-modal" @2.4.12 @aaa @automatic Rule: 2.4.12 Focus Not Obscured (Enhanced), Level AAA # In a viewport this small the dialog takes up most of the screen, so there # is nowhere on it left to move to. It runs off the edge instead, rather # than staying put and covering the focus Scenario: When content behind a non-modal dialog receives keyboard focus in a small viewport, the dialog still moves aside Given I load the sample "http://localhost:8081/dialog/examples/non-modal" When I set the viewport to 320px by 400px And I click on "#dialog-trigger" And I focus a link behind "#dialog-non-modal" using a keyboard Then it should have a visible focus indicator And its focus indicator should be fully visible And it should not have any part of its focus indicator covered by "#dialog-non-modal" @2.4.13 @aaa @automatic Rule: 2.4.13 Focus Appearance, Level AAA Scenario Outline: The custom focus style has a solid 2 pixel thick perimeter, or equivalent, and a contrast ratio of at least 3:1 against the background colour When I click on "#dialog-trigger" And I focus "<element>" using a keyboard Then it should have a visible focus indicator And the focus indicator should have a contrast ratio of 3:1 against its background And its focus indicator should have a minimum perimiter thickness of 2px Examples: | element | | #dialog-cancel | | #dialog-confirm | @recommendation @automatic Rule: Recommendation Scenario: The Esc key closes the dialog When I click on "#dialog-trigger" And I press the "ESC" key once And I inspect "#dialog-modal" in the DOM Then it should not have the attribute "open" @recommendation @automatic Rule: Recommendation Scenario: The Esc key closes a non-modal dialog Given I load the sample "http://localhost:8081/dialog/examples/non-modal" When I click on "#dialog-trigger" And I press the "ESC" key once And I inspect "#dialog-non-modal" in the DOM Then it should not have the attribute "open" @recommendation @automatic Rule: Recommendation Scenario Outline: A custom focus style is used instead of the browser's default When I click on "#dialog-trigger" And I focus "<element>" using a keyboard Then it should have a visible focus indicator And its focus indicator should have a minimum perimiter thickness of 2px Examples: | element | | #dialog-cancel | | #dialog-confirm |Feature: Dialog — Keyboard
Helping people who use a keyboard
User story:
As a keyboard user I want components that follow a logical tab order and provide visible, predictable focus states so that I can move through the interface efficiently and operate every feature without using a mouse.
Background:
Given I load the sample "https://tetralogical.com/resources/accessible-components-library/dialog/examples/default.html"
2.1.1 Keyboard
Rule: 2.1.1 Keyboard, Level A
Scenario: The control which opens the dialog can be focused using the Tab key
When I focus "#dialog-trigger" using a keyboard
Then "#dialog-trigger" should be focused
Rule: 2.1.1 Keyboard, Level A
Scenario Outline: The dialog can be triggered using the keyboard
When I focus "#dialog-trigger" using a keyboard
And I press the "<key>" key once
And I inspect "#dialog-modal" in the DOM
Then it should have the attribute "open"
Examples:
| key |
|---|
| ENTER |
| SPACE |
Rule: 2.1.1 Keyboard, Level A
Scenario: The dialog can be dismissed using the keyboard
When I click on "#dialog-trigger"
And I focus "#dialog-cancel" using a keyboard
And I press the "ENTER" key once
And I inspect "#dialog-modal" in the DOM
Then it should not have the attribute "open"
Rule: 2.1.1 Keyboard, Level A
Scenario: A non-modal dialog can be triggered and dismissed using the keyboard
Given I load the sample "https://tetralogical.com/resources/accessible-components-library/dialog/examples/non-modal.html"
When I focus "#dialog-trigger" using a keyboard
And I press the "ENTER" key once
And I focus "#dialog-close" using a keyboard
And I press the "ENTER" key once
And I inspect "#dialog-non-modal" in the DOM
Then it should not have the attribute "open"
2.1.2 No Keyboard Trap
Rule: 2.1.2 No Keyboard Trap, Level A
Scenario: Focus can be moved away from the dialog once it has been dismissed
When I click on "#dialog-trigger"
And I press the "ESC" key once
And I focus "#dialog-trigger" using a keyboard
And I hold the "SHIFT" key
And I press the "TAB" key once
Then ".demo-link" should be focused
Rule: 2.1.2 No Keyboard Trap, Level A
Scenario: Focus is not trapped by a non-modal dialog
Given I load the sample "https://tetralogical.com/resources/accessible-components-library/dialog/examples/non-modal.html"
When I click on "#dialog-trigger"
And I focus "#dialog-close" using a keyboard
And I press the "TAB" key once
Then the focus should not be on a "#dialog-close" element
2.4.3 Focus Order
Rule: 2.4.3 Focus Order, Level A
Scenario: When a dialog opens, focus moves to it
When I click on "#dialog-trigger"
Then "#dialog-modal" should be focused
Rule: 2.4.3 Focus Order, Level A
Scenario: When a non-modal dialog opens, focus moves to it
Given I load the sample "https://tetralogical.com/resources/accessible-components-library/dialog/examples/non-modal.html"
When I click on "#dialog-trigger"
Then "#dialog-non-modal" should be focused
Rule: 2.4.3 Focus Order, Level A
Scenario: Until a modal dialog is dismissed, focus is contained within it
When I click on "#dialog-trigger"
And I focus "#dialog-confirm" using a keyboard
And I press the "TAB" key once
Then "#dialog-cancel" should be focused
Rule: 2.4.3 Focus Order, Level A
Scenario: Until a modal dialog is dismissed, focus is contained within it when moving backwards
When I click on "#dialog-trigger"
And I focus "#dialog-cancel" using a keyboard
And I hold the "SHIFT" key
And I press the "TAB" key once
Then "#dialog-confirm" should be focused
Rule: 2.4.3 Focus Order, Level A
Scenario: When a modal dialog has just opened, moving backwards goes to its last control
When I click on "#dialog-trigger"
And I hold the "SHIFT" key
And I press the "TAB" key once
Then "#dialog-confirm" should be focused
Rule: 2.4.3 Focus Order, Level A
Scenario: Until a modal dialog is dismissed, the content behind it is inert
When I click on "#dialog-trigger"
And I press the "TAB" key once
And I press the "TAB" key once
And I press the "TAB" key once
Then the focus should not be on a ".demo-link" element
Rule: 2.4.3 Focus Order, Level A
Scenario: The close button is the last control in a non-modal dialog's focus order
Given I load the sample "https://tetralogical.com/resources/accessible-components-library/dialog/examples/non-modal.html"
When I click on "#dialog-trigger"
And I press the "TAB" key once
Then "#dialog-close" should be focused
When I press the "TAB" key once
Then the focus should not be on a "#dialog-close" element
Rule: 2.4.3 Focus Order, Level A
Scenario: When a dialog is closed, focus returns to the element that triggered the dialog
When I click on "#dialog-trigger"
And I click on "#dialog-cancel"
Then "#dialog-trigger" should be focused
Rule: 2.4.3 Focus Order, Level A
Scenario: When a dialog is dismissed with the Esc key, focus returns to the element that triggered the dialog
When I click on "#dialog-trigger"
And I press the "ESC" key once
Then "#dialog-trigger" should be focused
2.4.7 Focus Visible
Rule: 2.4.7 Focus Visible, Level AA
Scenario Outline: When controls within the dialog receive keyboard focus, a focus indicator is visible
When I click on "#dialog-trigger"
And I focus "<element>" using a keyboard
Then it should have a visible focus indicator
Examples:
| element |
|---|
| #dialog-cancel |
| #dialog-confirm |
Rule: 2.4.7 Focus Visible, Level AA
Scenario: When the control which opens the dialog receives keyboard focus, a focus indicator is visible
When I focus "#dialog-trigger" using a keyboard
Then it should have a visible focus indicator
2.4.11 Focus Not Obscured (Minimum)
Rule: 2.4.11 Focus Not Obscured (Minimum), Level AA
Scenario Outline: When controls within the dialog receive keyboard focus, they are not fully hidden by other content
When I click on "#dialog-trigger"
And I focus "<element>" using a keyboard
Then it should have a visible focus indicator
And its focus indicator should be at least partially visible
Examples:
| element |
|---|
| #dialog-cancel |
| #dialog-confirm |
Rule: 2.4.11 Focus Not Obscured (Minimum), Level AA
Scenario: When content behind a non-modal dialog receives keyboard focus, the dialog does not fully hide it
Given I load the sample "https://tetralogical.com/resources/accessible-components-library/dialog/examples/non-modal.html"
When I click on "#dialog-trigger"
And I focus a link behind "#dialog-non-modal" using a keyboard
Then it should have a visible focus indicator
And its focus indicator should be at least partially visible
And it should not have its focus indicator entirely covered by "#dialog-non-modal"
2.1.3 Keyboard (No Exception)
Rule: 2.1.3 Keyboard (No Exception), Level AAA
Scenario: The dialog component is accessible by keyboard, with no exceptions
When I click on "#dialog-trigger"
And I view the rendered '#dialog-modal'
Then every interactive control should be reachable using the keyboard
2.4.12 Focus Not Obscured (Enhanced)
Rule: 2.4.12 Focus Not Obscured (Enhanced), Level AAA
Scenario Outline: When controls within the dialog receive keyboard focus, they are fully visible
When I click on "#dialog-trigger"
And I focus "<element>" using a keyboard
Then it should have a visible focus indicator
And its focus indicator should be fully visible
Examples:
| element |
|---|
| #dialog-cancel |
| #dialog-confirm |
Rule: 2.4.12 Focus Not Obscured (Enhanced), Level AAA
Scenario: When content behind a non-modal dialog receives keyboard focus, the dialog moves aside
Given I load the sample "https://tetralogical.com/resources/accessible-components-library/dialog/examples/non-modal.html"
When I click on "#dialog-trigger"
And I focus a link behind "#dialog-non-modal" using a keyboard
Then it should have a visible focus indicator
And its focus indicator should be fully visible
And it should not have any part of its focus indicator covered by "#dialog-non-modal"
Rule: 2.4.12 Focus Not Obscured (Enhanced), Level AAA
Scenario: When content behind a non-modal dialog receives keyboard focus in a small viewport, the dialog still moves aside
Given I load the sample "https://tetralogical.com/resources/accessible-components-library/dialog/examples/non-modal.html"
When I set the viewport to 320px by 400px
And I click on "#dialog-trigger"
And I focus a link behind "#dialog-non-modal" using a keyboard
Then it should have a visible focus indicator
And its focus indicator should be fully visible
And it should not have any part of its focus indicator covered by "#dialog-non-modal"
2.4.13 Focus Appearance
Rule: 2.4.13 Focus Appearance, Level AAA
Scenario Outline: The custom focus style has a solid 2 pixel thick perimeter, or equivalent, and a contrast ratio of at least 3:1 against the background colour
When I click on "#dialog-trigger"
And I focus "<element>" using a keyboard
Then it should have a visible focus indicator
And the focus indicator should have a contrast ratio of 3:1 against its background
And its focus indicator should have a minimum perimiter thickness of 2px
Examples:
| element |
|---|
| #dialog-cancel |
| #dialog-confirm |
Recommendations
Rule: Recommendation
Scenario: The Esc key closes the dialog
When I click on "#dialog-trigger"
And I press the "ESC" key once
And I inspect "#dialog-modal" in the DOM
Then it should not have the attribute "open"
Rule: Recommendation
Scenario: The Esc key closes a non-modal dialog
Given I load the sample "https://tetralogical.com/resources/accessible-components-library/dialog/examples/non-modal.html"
When I click on "#dialog-trigger"
And I press the "ESC" key once
And I inspect "#dialog-non-modal" in the DOM
Then it should not have the attribute "open"
Rule: Recommendation
Scenario Outline: A custom focus style is used instead of the browser's default
When I click on "#dialog-trigger"
And I focus "<element>" using a keyboard
Then it should have a visible focus indicator
And its focus indicator should have a minimum perimiter thickness of 2px
Examples:
| element |
|---|
| #dialog-cancel |
| #dialog-confirm |
Pointer and touch
View accessibility requirements: Pointer and touch
@dialog @pointer-and-touch Feature: Dialog — Pointer and touch Helping people use single pointer or touch interactions User story: As a person using touch or pointer input I want components with accessible gestures, adequate target sizes, and predictable interactions so that I can accurately interact with all functionality. Background: Given I load the sample "http://localhost:8081/dialog/examples/default" # ---------------------------------------------------------------------------- # Operable # ---------------------------------------------------------------------------- @2.5.2 @a @automatic Rule: 2.5.2 Pointer Cancellation, Level A Scenario: The control which opens the dialog is not activated on the down event When I press the mouse down on "#dialog-trigger" And I inspect "#dialog-modal" in the DOM Then it should not have the attribute "open" @2.5.2 @a @automatic Rule: 2.5.2 Pointer Cancellation, Level A Scenario: The control which opens the dialog is activated on the up event When I click on "#dialog-trigger" And I inspect "#dialog-modal" in the DOM Then it should have the attribute "open" @2.5.2 @a @automatic Rule: 2.5.2 Pointer Cancellation, Level A Scenario Outline: The controls which dismiss the dialog are not activated on the down event When I click on "#dialog-trigger" And I press the mouse down on "<element>" And I inspect "#dialog-modal" in the DOM Then it should have the attribute "open" Examples: | element | | #dialog-cancel | | #dialog-confirm | @2.5.2 @a @automatic Rule: 2.5.2 Pointer Cancellation, Level A Scenario Outline: The controls which dismiss the dialog are activated on the up event When I click on "#dialog-trigger" And I click on "<element>" And I inspect "#dialog-modal" in the DOM Then it should not have the attribute "open" Examples: | element | | #dialog-cancel | | #dialog-confirm | @2.5.2 @a @automatic Rule: 2.5.2 Pointer Cancellation, Level A Scenario: Opening the dialog with a pointer does not navigate to a new page When I click on "#dialog-trigger" Then it should NOT navigate to a new page @2.5.8 @aa @automatic Rule: 2.5.8 Target Size (Minimum), Level AA Scenario Outline: The controls which open and dismiss the dialog have a target area size, or a target area size together with spacing, of at least 24 by 24 pixels When I click on "#dialog-trigger" And I view the rendered "<element>" Then it should have a width and height of at least 24px Examples: | element | | #dialog-trigger | | #dialog-cancel | | #dialog-confirm | @2.5.8 @aa @automatic Rule: 2.5.8 Target Size (Minimum), Level AA Scenario: An icon-only close button has a target area size of at least 24 by 24 pixels Given I load the sample "http://localhost:8081/dialog/examples/non-modal" When I click on "#dialog-trigger" And I view the rendered '#dialog-close' Then it should have a width and height of at least 24px @2.5.5 @aaa @automatic Rule: 2.5.5 Target Size (Enhanced), Level AAA Scenario Outline: The controls which open and dismiss the dialog have a target area size of at least 44 by 44 pixels When I click on "#dialog-trigger" And I view the rendered "<element>" Then it should have a width and height of at least 44px Examples: | element | | #dialog-trigger | | #dialog-cancel | | #dialog-confirm | @2.5.5 @aaa @automatic Rule: 2.5.5 Target Size (Enhanced), Level AAA Scenario: An icon-only close button has a target area size of at least 44 by 44 pixels Given I load the sample "http://localhost:8081/dialog/examples/non-modal" When I click on "#dialog-trigger" And I view the rendered '#dialog-close' Then it should have a width and height of at least 44pxFeature: Dialog — Pointer and touch
Helping people use single pointer or touch interactions
User story:
As a person using touch or pointer input I want components with accessible gestures, adequate target sizes, and predictable interactions so that I can accurately interact with all functionality.
Background:
Given I load the sample "https://tetralogical.com/resources/accessible-components-library/dialog/examples/default.html"
2.5.2 Pointer Cancellation
Rule: 2.5.2 Pointer Cancellation, Level A
Scenario: The control which opens the dialog is not activated on the down event
When I press the mouse down on "#dialog-trigger"
And I inspect "#dialog-modal" in the DOM
Then it should not have the attribute "open"
Rule: 2.5.2 Pointer Cancellation, Level A
Scenario: The control which opens the dialog is activated on the up event
When I click on "#dialog-trigger"
And I inspect "#dialog-modal" in the DOM
Then it should have the attribute "open"
Rule: 2.5.2 Pointer Cancellation, Level A
Scenario Outline: The controls which dismiss the dialog are not activated on the down event
When I click on "#dialog-trigger"
And I press the mouse down on "<element>"
And I inspect "#dialog-modal" in the DOM
Then it should have the attribute "open"
Examples:
| element |
|---|
| #dialog-cancel |
| #dialog-confirm |
Rule: 2.5.2 Pointer Cancellation, Level A
Scenario Outline: The controls which dismiss the dialog are activated on the up event
When I click on "#dialog-trigger"
And I click on "<element>"
And I inspect "#dialog-modal" in the DOM
Then it should not have the attribute "open"
Examples:
| element |
|---|
| #dialog-cancel |
| #dialog-confirm |
Rule: 2.5.2 Pointer Cancellation, Level A
Scenario: Opening the dialog with a pointer does not navigate to a new page
When I click on "#dialog-trigger"
Then it should NOT navigate to a new page
2.5.8 Target Size (Minimum)
Rule: 2.5.8 Target Size (Minimum), Level AA
Scenario Outline: The controls which open and dismiss the dialog have a target area size, or a target area size together with spacing, of at least 24 by 24 pixels
When I click on "#dialog-trigger"
And I view the rendered "<element>"
Then it should have a width and height of at least 24px
Examples:
| element |
|---|
| #dialog-trigger |
| #dialog-cancel |
| #dialog-confirm |
Rule: 2.5.8 Target Size (Minimum), Level AA
Scenario: An icon-only close button has a target area size of at least 24 by 24 pixels
Given I load the sample "https://tetralogical.com/resources/accessible-components-library/dialog/examples/non-modal.html"
When I click on "#dialog-trigger"
And I view the rendered '#dialog-close'
Then it should have a width and height of at least 24px
2.5.5 Target Size (Enhanced)
Rule: 2.5.5 Target Size (Enhanced), Level AAA
Scenario Outline: The controls which open and dismiss the dialog have a target area size of at least 44 by 44 pixels
When I click on "#dialog-trigger"
And I view the rendered "<element>"
Then it should have a width and height of at least 44px
Examples:
| element |
|---|
| #dialog-trigger |
| #dialog-cancel |
| #dialog-confirm |
Rule: 2.5.5 Target Size (Enhanced), Level AAA
Scenario: An icon-only close button has a target area size of at least 44 by 44 pixels
Given I load the sample "https://tetralogical.com/resources/accessible-components-library/dialog/examples/non-modal.html"
When I click on "#dialog-trigger"
And I view the rendered '#dialog-close'
Then it should have a width and height of at least 44px