Disclosure 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
@disclosure @adaptability Feature: Disclosure — 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/disclosure/examples/default" # ---------------------------------------------------------------------------- # Perceivable # ---------------------------------------------------------------------------- @1.3.4 @aa @automatic Rule: 1.3.4 Orientation, Level AA Scenario: Content is not restricted to a single orientation, unless it's essential When I switch to landscape mode And I view the rendered ".tl-disclosure" Then it should not lose any content or functionality @1.4.4 @aa @automatic Rule: 1.4.4 Resize Text, Level AA Scenario: Text can scale up to 200% without loss of content or functionality When I zoom in the browser to 200% And I view the rendered ".tl-disclosure" Then it should not lose any content or functionality @1.4.10 @aa @automatic Rule: 1.4.10 Reflow, Level AA Scenario: Content reflows without horizontal scrolling at 320px wide When I view the rendered ".tl-disclosure" 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: The expanded content reflows without horizontal scrolling at 320px wide When I click on ".tl-disclosure > button" And I view the rendered ".tl-disclosure" 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: No loss of content occurs when line, letter or word spacing is increased When I view the rendered ".tl-disclosure" 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 preferences for text colour, width, alignment, spacing, and size When I view the rendered ".tl-disclosure" 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 remain visible and understandable when using high contrast themes When I enable "forced colors" mode And I view the rendered ".tl-disclosure" Then it should not lose any content or functionality @recommendation @automatic Rule: Recommendation Scenario: Collapsed content is shown when the page is printed When I preview the page for printing And I inspect "#disclosure-content" in the DOM Then it should have the CSS property "content-visibility" with the value "visible" And it should have the CSS property "display" with the value "block"Feature: Disclosure — 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/disclosure/examples/default.html"
1.3.4 Orientation
Rule: 1.3.4 Orientation, Level AA
Scenario: Content is not restricted to a single orientation, unless it's essential
When I switch to landscape mode
And I view the rendered ".tl-disclosure"
Then it should not lose any content or functionality
1.4.4 Resize Text
Rule: 1.4.4 Resize Text, Level AA
Scenario: Text can scale up to 200% without loss of content or functionality
When I zoom in the browser to 200%
And I view the rendered ".tl-disclosure"
Then it should not lose any content or functionality
1.4.10 Reflow
Rule: 1.4.10 Reflow, Level AA
Scenario: Content reflows without horizontal scrolling at 320px wide
When I view the rendered ".tl-disclosure"
And I set the viewport to 320px wide
Then it should reflow without requiring horizontal scrolling
Rule: 1.4.10 Reflow, Level AA
Scenario: The expanded content reflows without horizontal scrolling at 320px wide
When I click on ".tl-disclosure > button"
And I view the rendered ".tl-disclosure"
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: No loss of content occurs when line, letter or word spacing is increased
When I view the rendered ".tl-disclosure"
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 preferences for text colour, width, alignment, spacing, and size
When I view the rendered ".tl-disclosure"
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 remain visible and understandable when using high contrast themes
When I enable "forced colors" mode
And I view the rendered ".tl-disclosure"
Then it should not lose any content or functionality
Rule: Recommendation
Scenario: Collapsed content is shown when the page is printed
When I preview the page for printing
And I inspect "#disclosure-content" in the DOM
Then it should have the CSS property "content-visibility" with the value "visible"
And it should have the CSS property "display" with the value "block"
Animation and movement
View accessibility requirements: Animation and movement
@disclosure @animation-and-movement Feature: Disclosure — Animation and movement Helping people to limit animation or reduce motion within content No component-specific requirementsFeature: Disclosure — 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
@disclosure @assistive-technologies-and-semantics Feature: Disclosure — 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/disclosure/examples/default" # ---------------------------------------------------------------------------- # Perceivable # ---------------------------------------------------------------------------- @1.3.2 @a @automatic Rule: 1.3.2 Meaningful Sequence, Level A Scenario: The order of content in the accessibility tree matches the logical reading order When I inspect "#disclosure-content" in the DOM Then it is positioned after the ".tl-disclosure > button" element in the DOM # ---------------------------------------------------------------------------- # Operable # ---------------------------------------------------------------------------- @2.5.3 @a @automatic Rule: 2.5.3 Label in Name, Level A Scenario: The disclosure trigger has an accessible name that matches or includes the visible label When I view the rendered ".tl-disclosure > button" Then it should have an accessible name which contains the visible label "World Wide Web Consortium" # ---------------------------------------------------------------------------- # Robust # ---------------------------------------------------------------------------- @4.1.2 @a @automatic Rule: 4.1.2 Name, Role, Value, Level A Scenario: The disclosure trigger has an accessible name When I inspect ".tl-disclosure > button" in the Accessibility Tree Then it should have an accessible name And its accessible name should be "World Wide Web Consortium" @4.1.2 @a @automatic Rule: 4.1.2 Name, Role, Value, Level A Scenario: The disclosure trigger has a role of button When I inspect ".tl-disclosure > button" in the Accessibility Tree Then it should have an accessible role of "button" And it should use the tag "button" @4.1.2 @a @automatic Rule: 4.1.2 Name, Role, Value, Level A Scenario: The collapsed state of the disclosure is conveyed to screen readers When I inspect ".tl-disclosure > button" in the DOM Then it should have the attribute "aria-expanded" with the value "false" When I inspect "#disclosure-content" in the DOM Then it should have the attribute "hidden" @4.1.2 @a @automatic Rule: 4.1.2 Name, Role, Value, Level A Scenario: The expanded state of the disclosure is conveyed to screen readers When I click on ".tl-disclosure > button" And I inspect ".tl-disclosure > button" in the DOM Then it should have the attribute "aria-expanded" with the value "true" When I inspect "#disclosure-content" in the DOM Then it should not have the attribute "hidden" @recommendation @automatic Rule: Recommendation Scenario: The trigger is associated with the content it controls, using the aria-controls attribute When I inspect ".tl-disclosure > button" in the DOM Then it should have the attribute "aria-controls" with the value "disclosure-content" When I inspect "#disclosure-content" in the DOM Then it should have the attribute "id" with the value "disclosure-content" @recommendation @automatic Rule: Recommendation Scenario: A heading placed inside the trigger keeps its heading role once the script has run Given I load the sample "http://localhost:8081/disclosure/examples/with-heading" When I inspect ".tl-disclosure > h2" in the Accessibility Tree Then it should have an accessible role of "heading" When I inspect ".tl-disclosure > h2 > button" in the Accessibility Tree Then it should have an accessible role of "button" And its accessible name should be "World Wide Web Consortium" @recommendation @automatic Rule: Recommendation Scenario: Markup can be parsed without errors When I inspect ".tl-disclosure" in the DOM Then it should use valid HTML with no parsing errorsFeature: Disclosure — 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/disclosure/examples/default.html"
1.3.2 Meaningful Sequence
Rule: 1.3.2 Meaningful Sequence, Level A
Scenario: The order of content in the accessibility tree matches the logical reading order
When I inspect "#disclosure-content" in the DOM
Then it is positioned after the ".tl-disclosure > button" element in the DOM
2.5.3 Label in Name
Rule: 2.5.3 Label in Name, Level A
Scenario: The disclosure trigger has an accessible name that matches or includes the visible label
When I view the rendered ".tl-disclosure > button"
Then it should have an accessible name which contains the visible label "World Wide Web Consortium"
4.1.2 Name, Role, Value
Rule: 4.1.2 Name, Role, Value, Level A
Scenario: The disclosure trigger has an accessible name
When I inspect ".tl-disclosure > button" in the Accessibility Tree
Then it should have an accessible name
And its accessible name should be "World Wide Web Consortium"
Rule: 4.1.2 Name, Role, Value, Level A
Scenario: The disclosure trigger has a role of button
When I inspect ".tl-disclosure > button" in the Accessibility Tree
Then it should have an accessible role of "button"
And it should use the tag "button"
Rule: 4.1.2 Name, Role, Value, Level A
Scenario: The collapsed state of the disclosure is conveyed to screen readers
When I inspect ".tl-disclosure > button" in the DOM
Then it should have the attribute "aria-expanded" with the value "false"
When I inspect "#disclosure-content" in the DOM
Then it should have the attribute "hidden"
Rule: 4.1.2 Name, Role, Value, Level A
Scenario: The expanded state of the disclosure is conveyed to screen readers
When I click on ".tl-disclosure > button"
And I inspect ".tl-disclosure > button" in the DOM
Then it should have the attribute "aria-expanded" with the value "true"
When I inspect "#disclosure-content" in the DOM
Then it should not have the attribute "hidden"
Recommendations
Rule: Recommendation
Scenario: The trigger is associated with the content it controls, using the aria-controls attribute
When I inspect ".tl-disclosure > button" in the DOM
Then it should have the attribute "aria-controls" with the value "disclosure-content"
When I inspect "#disclosure-content" in the DOM
Then it should have the attribute "id" with the value "disclosure-content"
Rule: Recommendation
Scenario: A heading placed inside the trigger keeps its heading role once the script has run
Given I load the sample "https://tetralogical.com/resources/accessible-components-library/disclosure/examples/with-heading.html"
When I inspect ".tl-disclosure > h2" in the Accessibility Tree
Then it should have an accessible role of "heading"
When I inspect ".tl-disclosure > h2 > button" in the Accessibility Tree
Then it should have an accessible role of "button"
And its accessible name should be "World Wide Web Consortium"
Rule: Recommendation
Scenario: Markup can be parsed without errors
When I inspect ".tl-disclosure" in the DOM
Then it should use valid HTML with no parsing errors
Colour and contrast
View accessibility requirements: Colour and contrast
@disclosure @colour-and-contrast Feature: Disclosure — 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/disclosure/examples/default" # ---------------------------------------------------------------------------- # Perceivable # ---------------------------------------------------------------------------- @1.4.3 @aa @automatic Rule: 1.4.3 Contrast (Minimum), Level AA Scenario: The disclosure trigger has a contrast ratio of at least 4.5:1 against the background, when collapsed When I view the rendered ".tl-disclosure > button" Then its text should have a contrast ratio of "4.5" against its background @1.4.3 @aa @automatic Rule: 1.4.3 Contrast (Minimum), Level AA Scenario: The trigger and the content have a contrast ratio of at least 4.5:1 against the background, when expanded When I click on ".tl-disclosure > button" And I view the rendered ".tl-disclosure > button" Then its text should have a contrast ratio of "4.5" against its background When I view the rendered "#disclosure-content p" Then its text should have a contrast ratio of "4.5" against its background @1.4.3 @aa @automatic @darkmode Rule: 1.4.3 Contrast (Minimum), Level AA Scenario: Darkmode: The trigger and the content have a contrast ratio of at least 4.5:1 against the background When I click on ".tl-disclosure > button" And I view the rendered ".tl-disclosure > button" And I enable "dark" mode Then its text should have a contrast ratio of "4.5" against its background When I view the rendered "#disclosure-content p" Then its text should have a contrast ratio of "4.5" against its background @1.4.11 @aa @automatic Rule: 1.4.11 Non-text Contrast, Level AA Scenario: The icon which indicates the disclosure state has a contrast ratio of at least 3:1 against the background When I view the rendered ".tl-disclosure > button svg" Then its text should have a contrast ratio of "3" against its background @1.4.11 @aa @automatic @darkmode Rule: 1.4.11 Non-text Contrast, Level AA Scenario: Darkmode: The icon which indicates the disclosure state has a contrast ratio of at least 3:1 against the background When I view the rendered ".tl-disclosure > button svg" And I enable "dark" mode Then its text should have a contrast ratio of "3" against its background @1.4.11 @aa @automatic Rule: 1.4.11 Non-text Contrast, Level AA Scenario: The custom focus style has a contrast ratio of at least 3:1 against the background When I focus ".tl-disclosure > button" 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: The trigger and the content have a contrast ratio of at least 7:1 against the background When I click on ".tl-disclosure > button" And I view the rendered ".tl-disclosure > button" Then its text should have a contrast ratio of "7" against its background When I view the rendered "#disclosure-content p" Then its text should have a contrast ratio of "7" against its background @1.4.6 @aaa @automatic @darkmode Rule: 1.4.6 Contrast (Enhanced), Level AAA Scenario: Darkmode: The trigger and the content have a contrast ratio of at least 7:1 against the background When I click on ".tl-disclosure > button" And I view the rendered ".tl-disclosure > button" And I enable "dark" mode Then its text should have a contrast ratio of "7" against its background When I view the rendered "#disclosure-content p" Then its text should have a contrast ratio of "7" against its backgroundFeature: Disclosure — 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/disclosure/examples/default.html"
1.4.3 Contrast (Minimum)
Rule: 1.4.3 Contrast (Minimum), Level AA
Scenario: The disclosure trigger has a contrast ratio of at least 4.5:1 against the background, when collapsed
When I view the rendered ".tl-disclosure > button"
Then its text should have a contrast ratio of "4.5" against its background
Rule: 1.4.3 Contrast (Minimum), Level AA
Scenario: The trigger and the content have a contrast ratio of at least 4.5:1 against the background, when expanded
When I click on ".tl-disclosure > button"
And I view the rendered ".tl-disclosure > button"
Then its text should have a contrast ratio of "4.5" against its background
When I view the rendered "#disclosure-content p"
Then its text should have a contrast ratio of "4.5" against its background
Rule: 1.4.3 Contrast (Minimum), Level AA
Scenario: Darkmode: The trigger and the content have a contrast ratio of at least 4.5:1 against the background
When I click on ".tl-disclosure > button"
And I view the rendered ".tl-disclosure > button"
And I enable "dark" mode
Then its text should have a contrast ratio of "4.5" against its background
When I view the rendered "#disclosure-content p"
Then its text should have a contrast ratio of "4.5" against its background
1.4.11 Non-text Contrast
Rule: 1.4.11 Non-text Contrast, Level AA
Scenario: The icon which indicates the disclosure state has a contrast ratio of at least 3:1 against the background
When I view the rendered ".tl-disclosure > button svg"
Then its text should have a contrast ratio of "3" against its background
Rule: 1.4.11 Non-text Contrast, Level AA
Scenario: Darkmode: The icon which indicates the disclosure state has a contrast ratio of at least 3:1 against the background
When I view the rendered ".tl-disclosure > button svg"
And I enable "dark" mode
Then its text should have a contrast ratio of "3" against its background
Rule: 1.4.11 Non-text Contrast, Level AA
Scenario: The custom focus style has a contrast ratio of at least 3:1 against the background
When I focus ".tl-disclosure > button" 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: The trigger and the content have a contrast ratio of at least 7:1 against the background
When I click on ".tl-disclosure > button"
And I view the rendered ".tl-disclosure > button"
Then its text should have a contrast ratio of "7" against its background
When I view the rendered "#disclosure-content p"
Then its text should have a contrast ratio of "7" against its background
Rule: 1.4.6 Contrast (Enhanced), Level AAA
Scenario: Darkmode: The trigger and the content have a contrast ratio of at least 7:1 against the background
When I click on ".tl-disclosure > button"
And I view the rendered ".tl-disclosure > button"
And I enable "dark" mode
Then its text should have a contrast ratio of "7" against its background
When I view the rendered "#disclosure-content p"
Then its text should have a contrast ratio of "7" against its background
Consistency and predictability
View accessibility requirements: Consistency and predictability
@disclosure @consistency-and-predictability Feature: Disclosure — Consistency and predictability Helping people by keeping functionality and content 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/disclosure/examples/default" # ---------------------------------------------------------------------------- # Understandable # ---------------------------------------------------------------------------- @3.2.1 @a @automatic Rule: 3.2.1 On Focus, Level A Scenario: The disclosure trigger does not initiate a change of context when it receives keyboard focus When I focus ".tl-disclosure > button" using a keyboard Then it should NOT navigate to a new page When I inspect ".tl-disclosure > button" in the DOM Then it should have the attribute "aria-expanded" with the value "false" @3.2.2 @a @automatic Rule: 3.2.2 On Input, Level A Scenario: Expanding the disclosure does not result in an unexpected change of context When I focus ".tl-disclosure > button" And I press the "Enter" key once Then it should NOT navigate to a new page And ".tl-disclosure > button" should be focused When I inspect ".tl-disclosure > button" in the DOM Then it should have the attribute "aria-expanded" with the value "true" @3.2.2 @a @automatic Rule: 3.2.2 On Input, Level A Scenario: Collapsing the disclosure does not result in an unexpected change of context When I click on ".tl-disclosure > button" And I focus ".tl-disclosure > button" And I press the "Enter" key once Then it should NOT navigate to a new page And ".tl-disclosure > button" should be focused When I inspect ".tl-disclosure > button" in the DOM Then it should have the attribute "aria-expanded" with the value "false" @recommendation @automatic Rule: Recommendation Scenario: The chevron icon is inside the disclosure trigger, before its label When I inspect ".tl-disclosure > button svg" in the DOM Then it should be nested within the ".tl-disclosure > button" element And it should use the tag "svg" @recommendation @automatic Rule: Recommendation Scenario: The down pointing chevron is to the left of the disclosure's label When I view the rendered ".tl-disclosure > button svg" Then it should be to the left of the text in the ".tl-disclosure > button" elementFeature: Disclosure — Consistency and predictability
Helping people by keeping functionality and content 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/disclosure/examples/default.html"
3.2.1 On Focus
Rule: 3.2.1 On Focus, Level A
Scenario: The disclosure trigger does not initiate a change of context when it receives keyboard focus
When I focus ".tl-disclosure > button" using a keyboard
Then it should NOT navigate to a new page
When I inspect ".tl-disclosure > button" in the DOM
Then it should have the attribute "aria-expanded" with the value "false"
3.2.2 On Input
Rule: 3.2.2 On Input, Level A
Scenario: Expanding the disclosure does not result in an unexpected change of context
When I focus ".tl-disclosure > button"
And I press the "Enter" key once
Then it should NOT navigate to a new page
And ".tl-disclosure > button" should be focused
When I inspect ".tl-disclosure > button" in the DOM
Then it should have the attribute "aria-expanded" with the value "true"
Rule: 3.2.2 On Input, Level A
Scenario: Collapsing the disclosure does not result in an unexpected change of context
When I click on ".tl-disclosure > button"
And I focus ".tl-disclosure > button"
And I press the "Enter" key once
Then it should NOT navigate to a new page
And ".tl-disclosure > button" should be focused
When I inspect ".tl-disclosure > button" in the DOM
Then it should have the attribute "aria-expanded" with the value "false"
Recommendations
Rule: Recommendation
Scenario: The chevron icon is inside the disclosure trigger, before its label
When I inspect ".tl-disclosure > button svg" in the DOM
Then it should be nested within the ".tl-disclosure > button" element
And it should use the tag "svg"
Rule: Recommendation
Scenario: The down pointing chevron is to the left of the disclosure's label
When I view the rendered ".tl-disclosure > button svg"
Then it should be to the left of the text in the ".tl-disclosure > button" element
Images and media
View accessibility requirements: Images and media
@disclosure @images-and-media Feature: Disclosure — 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/disclosure/examples/default" # ---------------------------------------------------------------------------- # Perceivable # ---------------------------------------------------------------------------- @1.1.1 @a @automatic Rule: 1.1.1 Non-text Content, Level A Scenario: The icon is hidden from screen readers, because the trigger has a visible text label When I inspect ".tl-disclosure > button svg" in the DOM Then it should have the attribute "aria-hidden" with the value "true" When I inspect ".tl-disclosure > button" in the Accessibility Tree Then its accessible name should be "World Wide Web Consortium" @1.1.1 @a @automatic Rule: 1.1.1 Non-text Content, Level A Scenario: If the disclosure trigger uses an icon without a visible text label, the icon has a text description When I view the rendered ".tl-disclosure > button" Then any icon should have a text description, or be hidden from assistive technologiesFeature: Disclosure — 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/disclosure/examples/default.html"
1.1.1 Non-text Content
Rule: 1.1.1 Non-text Content, Level A
Scenario: The icon is hidden from screen readers, because the trigger has a visible text label
When I inspect ".tl-disclosure > button svg" in the DOM
Then it should have the attribute "aria-hidden" with the value "true"
When I inspect ".tl-disclosure > button" in the Accessibility Tree
Then its accessible name should be "World Wide Web Consortium"
Rule: 1.1.1 Non-text Content, Level A
Scenario: If the disclosure trigger uses an icon without a visible text label, the icon has a text description
When I view the rendered ".tl-disclosure > button"
Then any icon should have a text description, or be hidden from assistive technologies
Input assistance
View accessibility requirements: Input assistance
@disclosure @input-assistance Feature: Disclosure — Input assistance Helping people to complete forms, enter data and pass authentication No component-specific requirementsFeature: Disclosure — Input assistance
Helping people to complete forms, enter data and pass authentication
No component-specific requirements
Keyboard
View accessibility requirements: Keyboard
@disclosure @keyboard Feature: Disclosure — 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/disclosure/examples/default" # ---------------------------------------------------------------------------- # Operable # ---------------------------------------------------------------------------- @2.1.1 @a @automatic Rule: 2.1.1 Keyboard, Level A Scenario: The disclosure trigger can be focused using the Tab key When I focus ".tl-disclosure > button" using a keyboard Then ".tl-disclosure > button" should be focused @2.1.1 @a @automatic Rule: 2.1.1 Keyboard, Level A Scenario: The disclosure trigger can be activated using the Enter key When I focus ".tl-disclosure > button" And I press the "Enter" key once And I inspect ".tl-disclosure > button" in the DOM Then it should have the attribute "aria-expanded" with the value "true" When I press the "Enter" key once And I inspect ".tl-disclosure > button" in the DOM Then it should have the attribute "aria-expanded" with the value "false" @2.1.1 @a @automatic Rule: 2.1.1 Keyboard, Level A Scenario: The disclosure trigger can be activated using the Space key When I focus ".tl-disclosure > button" And I press the "Space" key once And I inspect ".tl-disclosure > button" in the DOM Then it should have the attribute "aria-expanded" with the value "true" When I press the "Space" key once And I inspect ".tl-disclosure > button" in the DOM Then it should have the attribute "aria-expanded" with the value "false" @2.1.2 @a @automatic Rule: 2.1.2 No Keyboard Trap, Level A Scenario: The disclosure does not trap focus going forwards When I focus ".tl-disclosure > button" And I press the "TAB" key once Then the focus should not be on a ".tl-disclosure > button" element @2.1.2 @a @automatic Rule: 2.1.2 No Keyboard Trap, Level A Scenario: The disclosure does not trap focus going backwards When I focus ".tl-disclosure > button" And I hold the "SHIFT" key And I press the "TAB" key once Then the focus should not be on a ".tl-disclosure > button" element @2.1.2 @a @automatic Rule: 2.1.2 No Keyboard Trap, Level A Scenario: The disclosure does not trap focus once its content is expanded When I click on ".tl-disclosure > button" And I focus ".tl-disclosure > button" And I press the "TAB" key once Then the focus should not be on a ".tl-disclosure > button" element @2.4.7 @aa @automatic Rule: 2.4.7 Focus Visible, Level AA Scenario: The disclosure trigger has a visible focus indicator when it receives keyboard focus When I focus ".tl-disclosure > button" 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: The disclosure trigger is not fully hidden by other content when it receives keyboard focus When I focus ".tl-disclosure > button" using a keyboard Then it should have a visible focus indicator And its focus indicator should be at least partially visible @2.1.3 @aaa @automatic Rule: 2.1.3 Keyboard (No Exception), Level AAA Scenario: The disclosure component is accessible by keyboard, with no exceptions When I view the rendered ".tl-disclosure" 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: The disclosure trigger is fully visible when it receives keyboard focus When I focus ".tl-disclosure > button" using a keyboard Then it should have a visible focus indicator And its focus indicator should be fully visible @2.4.13 @aaa @automatic Rule: 2.4.13 Focus Appearance, Level AAA Scenario: The custom focus style has a solid 2 pixel thick perimeter, or equivalent, and a contrast ratio of at least 3:1 When I focus ".tl-disclosure > button" 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 2pxFeature: Disclosure — 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/disclosure/examples/default.html"
2.1.1 Keyboard
Rule: 2.1.1 Keyboard, Level A
Scenario: The disclosure trigger can be focused using the Tab key
When I focus ".tl-disclosure > button" using a keyboard
Then ".tl-disclosure > button" should be focused
Rule: 2.1.1 Keyboard, Level A
Scenario: The disclosure trigger can be activated using the Enter key
When I focus ".tl-disclosure > button"
And I press the "Enter" key once
And I inspect ".tl-disclosure > button" in the DOM
Then it should have the attribute "aria-expanded" with the value "true"
When I press the "Enter" key once
And I inspect ".tl-disclosure > button" in the DOM
Then it should have the attribute "aria-expanded" with the value "false"
Rule: 2.1.1 Keyboard, Level A
Scenario: The disclosure trigger can be activated using the Space key
When I focus ".tl-disclosure > button"
And I press the "Space" key once
And I inspect ".tl-disclosure > button" in the DOM
Then it should have the attribute "aria-expanded" with the value "true"
When I press the "Space" key once
And I inspect ".tl-disclosure > button" in the DOM
Then it should have the attribute "aria-expanded" with the value "false"
2.1.2 No Keyboard Trap
Rule: 2.1.2 No Keyboard Trap, Level A
Scenario: The disclosure does not trap focus going forwards
When I focus ".tl-disclosure > button"
And I press the "TAB" key once
Then the focus should not be on a ".tl-disclosure > button" element
Rule: 2.1.2 No Keyboard Trap, Level A
Scenario: The disclosure does not trap focus going backwards
When I focus ".tl-disclosure > button"
And I hold the "SHIFT" key
And I press the "TAB" key once
Then the focus should not be on a ".tl-disclosure > button" element
Rule: 2.1.2 No Keyboard Trap, Level A
Scenario: The disclosure does not trap focus once its content is expanded
When I click on ".tl-disclosure > button"
And I focus ".tl-disclosure > button"
And I press the "TAB" key once
Then the focus should not be on a ".tl-disclosure > button" element
2.4.7 Focus Visible
Rule: 2.4.7 Focus Visible, Level AA
Scenario: The disclosure trigger has a visible focus indicator when it receives keyboard focus
When I focus ".tl-disclosure > button" 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: The disclosure trigger is not fully hidden by other content when it receives keyboard focus
When I focus ".tl-disclosure > button" using a keyboard
Then it should have a visible focus indicator
And its focus indicator should be at least partially visible
2.1.3 Keyboard (No Exception)
Rule: 2.1.3 Keyboard (No Exception), Level AAA
Scenario: The disclosure component is accessible by keyboard, with no exceptions
When I view the rendered ".tl-disclosure"
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: The disclosure trigger is fully visible when it receives keyboard focus
When I focus ".tl-disclosure > button" using a keyboard
Then it should have a visible focus indicator
And its focus indicator should be fully visible
2.4.13 Focus Appearance
Rule: 2.4.13 Focus Appearance, Level AAA
Scenario: The custom focus style has a solid 2 pixel thick perimeter, or equivalent, and a contrast ratio of at least 3:1
When I focus ".tl-disclosure > button" 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
Pointer and touch
View accessibility requirements: Pointer and touch
@disclosure @pointer-and-touch Feature: Disclosure — 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/disclosure/examples/default" # ---------------------------------------------------------------------------- # Operable # ---------------------------------------------------------------------------- @2.5.2 @a @automatic Rule: 2.5.2 Pointer Cancellation, Level A Scenario: The disclosure trigger is activated on the up event, not on the down event When I press the mouse down on ".tl-disclosure > button" And I inspect ".tl-disclosure > button" in the DOM Then it should have the attribute "aria-expanded" with the value "false" When I inspect "#disclosure-content" in the DOM Then it should have the attribute "hidden" @2.5.8 @aa @automatic Rule: 2.5.8 Target Size (Minimum), Level AA Scenario: The disclosure trigger has a target area size of at least 24 by 24 pixels When I view the rendered ".tl-disclosure > button" 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: The disclosure trigger has a target area size of at least 44 by 44 pixels When I view the rendered ".tl-disclosure > button" Then it should have a width and height of at least 44pxFeature: Disclosure — 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/disclosure/examples/default.html"
2.5.2 Pointer Cancellation
Rule: 2.5.2 Pointer Cancellation, Level A
Scenario: The disclosure trigger is activated on the up event, not on the down event
When I press the mouse down on ".tl-disclosure > button"
And I inspect ".tl-disclosure > button" in the DOM
Then it should have the attribute "aria-expanded" with the value "false"
When I inspect "#disclosure-content" in the DOM
Then it should have the attribute "hidden"
2.5.8 Target Size (Minimum)
Rule: 2.5.8 Target Size (Minimum), Level AA
Scenario: The disclosure trigger has a target area size of at least 24 by 24 pixels
When I view the rendered ".tl-disclosure > button"
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: The disclosure trigger has a target area size of at least 44 by 44 pixels
When I view the rendered ".tl-disclosure > button"
Then it should have a width and height of at least 44px