Tabs 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
@tabs @adaptability Feature: Tabs — 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/tabs/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 switch to landscape mode And I view the rendered "<element>" Then it should not lose any content or functionality Examples: | element | | tl-tabs .tl-tabs__tablist | | #tabs-0-panel-1 | @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 zoom in the browser to 200% And I view the rendered "<element>" Then it should not lose any content or functionality Examples: | element | | tl-tabs .tl-tabs__tablist | | #tabs-0-panel-1 | @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-tabs' 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 view the rendered 'tl-tabs' 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 view the rendered 'tl-tabs' 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 view the rendered 'tl-tabs' Then it should not lose any content or functionality @recommendation @automatic Rule: Recommendation Scenario: The selected tab remains identifiable when using high contrast themes When I enable "forced colors" mode And I view the rendered '#tabs-0-tab-1' Then it should not lose any content or functionalityFeature: Tabs — 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/tabs/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 switch to landscape mode
And I view the rendered "<element>"
Then it should not lose any content or functionality
Examples:
| element |
|---|
| tl-tabs .tl-tabs__tablist |
| #tabs-0-panel-1 |
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 zoom in the browser to 200%
And I view the rendered "<element>"
Then it should not lose any content or functionality
Examples:
| element |
|---|
| tl-tabs .tl-tabs__tablist |
| #tabs-0-panel-1 |
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-tabs'
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 view the rendered 'tl-tabs'
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 view the rendered 'tl-tabs'
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 view the rendered 'tl-tabs'
Then it should not lose any content or functionality
Rule: Recommendation
Scenario: The selected tab remains identifiable when using high contrast themes
When I enable "forced colors" mode
And I view the rendered '#tabs-0-tab-1'
Then it should not lose any content or functionality
Animation and movement
View accessibility requirements: Animation and movement
@tabs @animation-and-movement Feature: Tabs — Animation and movement Helping people to limit animation or reduce motion within content No component-specific requirementsFeature: Tabs — 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
@tabs @assistive-technologies-and-semantics Feature: Tabs — 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/tabs/examples/default" # ---------------------------------------------------------------------------- # Perceivable # ---------------------------------------------------------------------------- @1.3.1 @a @automatic Rule: 1.3.1 Info and Relationships, Level A Scenario: The tab which is visually presented as the active one is identified as selected in the code When I inspect "#tabs-0-tab-1" in the DOM Then it should have the attribute "aria-selected" with the value "true" @1.3.1 @a @automatic Rule: 1.3.1 Info and Relationships, Level A Scenario Outline: Tabs which are not visually presented as the active one are not identified as selected When I inspect "<element>" in the DOM Then it should not have the attribute "aria-selected" Examples: | element | | #tabs-0-tab-2 | | #tabs-0-tab-3 | @1.3.1 @a @automatic Rule: 1.3.1 Info and Relationships, Level A Scenario: The selected state moves with the active tab When I focus "#tabs-0-tab-2" using the arrow keys And I inspect "#tabs-0-tab-1" in the DOM Then it should not have the attribute "aria-selected" @1.3.2 @a @automatic Rule: 1.3.2 Meaningful Sequence, Level A Scenario Outline: The order of content in the accessibility tree matches the logical reading order When I inspect "<element>" in the DOM Then it is positioned after the "<previous_element>" element in the DOM Examples: | element | previous_element | | #tabs-0-tab-2 | #tabs-0-tab-1 | | #tabs-0-tab-3 | #tabs-0-tab-2 | | #tabs-0-panel-1 | tl-tabs .tl-tabs__tablist | | #tabs-0-panel-2 | #tabs-0-panel-1 | | #tabs-0-panel-3 | #tabs-0-panel-2 | # ---------------------------------------------------------------------------- # Operable # ---------------------------------------------------------------------------- @2.5.3 @a @automatic Rule: 2.5.3 Label in Name, Level A Scenario Outline: Each tab has an accessible name which matches or includes the visible label When I view the rendered "<element>" Then it should have an accessible name which contains the visible label "<visible_label>" Examples: | element | visible_label | | #tabs-0-tab-1 | Panel 1 | | #tabs-0-tab-2 | Panel 2 | | #tabs-0-tab-3 | Panel 3 | @2.5.3 @a @automatic Rule: 2.5.3 Label in Name, Level A Scenario Outline: Each tabpanel has an accessible name which matches or includes the visible label on the tab that controls it When I focus "<tab>" using the arrow keys And I inspect "<panel>" in the DOM Then it should have an accessible name which contains the visible label "<visible_label>" Examples: | tab | panel | visible_label | | #tabs-0-tab-1 | #tabs-0-panel-1 | Panel 1 | | #tabs-0-tab-2 | #tabs-0-panel-2 | Panel 2 | | #tabs-0-tab-3 | #tabs-0-panel-3 | Panel 3 | # ---------------------------------------------------------------------------- # Robust # ---------------------------------------------------------------------------- @4.1.2 @a @automatic Rule: 4.1.2 Name, Role, Value, Level A Scenario Outline: Each tab has an accessible name When I inspect "<element>" in the DOM Then it should have an accessible name And its accessible name should be "<name>" Examples: | element | name | | #tabs-0-tab-1 | Panel 1 | | #tabs-0-tab-2 | Panel 2 | | #tabs-0-tab-3 | Panel 3 | @4.1.2 @a @automatic Rule: 4.1.2 Name, Role, Value, Level A Scenario Outline: Each tabpanel has an accessible name When I focus "<tab>" using the arrow keys And I inspect "<panel>" in the DOM Then it should have an accessible name And its accessible name should be "<name>" Examples: | tab | panel | name | | #tabs-0-tab-1 | #tabs-0-panel-1 | Panel 1 | | #tabs-0-tab-2 | #tabs-0-panel-2 | Panel 2 | | #tabs-0-tab-3 | #tabs-0-panel-3 | Panel 3 | @4.1.2 @a @automatic Rule: 4.1.2 Name, Role, Value, Level A Scenario: The tablist has a role of tablist When I inspect 'tl-tabs .tl-tabs__tablist' in the DOM Then it should have an accessible role of "tablist" @4.1.2 @a @automatic Rule: 4.1.2 Name, Role, Value, Level A Scenario Outline: Each tab has a role of tab and is contained within the tablist When I inspect "<element>" in the DOM Then it should have an accessible role of "tab" And it should be nested within the "tl-tabs .tl-tabs__tablist" element Examples: | element | | #tabs-0-tab-1 | | #tabs-0-tab-2 | | #tabs-0-tab-3 | @4.1.2 @a @automatic Rule: 4.1.2 Name, Role, Value, Level A Scenario Outline: Each tabpanel has a role of tabpanel When I inspect "<element>" in the DOM Then it should have an accessible role of "tabpanel" Examples: | element | | #tabs-0-panel-1 | | #tabs-0-panel-2 | | #tabs-0-panel-3 | @4.1.2 @a @automatic Rule: 4.1.2 Name, Role, Value, Level A Scenario Outline: Each tab is programmatically associated with the tabpanel it controls When I inspect "<element>" in the DOM Then it should have the attribute "aria-controls" with the value "<value>" Examples: | element | value | | #tabs-0-tab-1 | tabs-0-panel-1 | | #tabs-0-tab-2 | tabs-0-panel-2 | | #tabs-0-tab-3 | tabs-0-panel-3 | @4.1.2 @a @automatic Rule: 4.1.2 Name, Role, Value, Level A Scenario Outline: Each tabpanel takes its accessible name from the tab that controls it When I inspect "<element>" in the DOM Then it should have the attribute "aria-labelledby" with the value "<value>" Examples: | element | value | | #tabs-0-panel-1 | tabs-0-tab-1 | | #tabs-0-panel-2 | tabs-0-tab-2 | | #tabs-0-panel-3 | tabs-0-tab-3 | @4.1.2 @a @automatic Rule: 4.1.2 Name, Role, Value, Level A Scenario: The orientation of the tablist is exposed so arrow key behaviour is announced correctly When I inspect 'tl-tabs .tl-tabs__tablist' in the DOM Then it should have the attribute "aria-orientation" with the value "horizontal" @recommendation @automatic Rule: Recommendation Scenario: Markup can be parsed without errors When I inspect 'tl-tabs' in the DOM Then it should use valid HTML with no parsing errorsFeature: Tabs — 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/tabs/examples/default.html"
1.3.1 Info and Relationships
Rule: 1.3.1 Info and Relationships, Level A
Scenario: The tab which is visually presented as the active one is identified as selected in the code
When I inspect "#tabs-0-tab-1" in the DOM
Then it should have the attribute "aria-selected" with the value "true"
Rule: 1.3.1 Info and Relationships, Level A
Scenario Outline: Tabs which are not visually presented as the active one are not identified as selected
When I inspect "<element>" in the DOM
Then it should not have the attribute "aria-selected"
Examples:
| element |
|---|
| #tabs-0-tab-2 |
| #tabs-0-tab-3 |
Rule: 1.3.1 Info and Relationships, Level A
Scenario: The selected state moves with the active tab
When I focus "#tabs-0-tab-2" using the arrow keys
And I inspect "#tabs-0-tab-1" in the DOM
Then it should not have the attribute "aria-selected"
1.3.2 Meaningful Sequence
Rule: 1.3.2 Meaningful Sequence, Level A
Scenario Outline: The order of content in the accessibility tree matches the logical reading order
When I inspect "<element>" in the DOM
Then it is positioned after the "<previous_element>" element in the DOM
Examples:
| element | previous_element |
|---|---|
| #tabs-0-tab-2 | #tabs-0-tab-1 |
| #tabs-0-tab-3 | #tabs-0-tab-2 |
| #tabs-0-panel-1 | tl-tabs .tl-tabs__tablist |
| #tabs-0-panel-2 | #tabs-0-panel-1 |
| #tabs-0-panel-3 | #tabs-0-panel-2 |
2.5.3 Label in Name
Rule: 2.5.3 Label in Name, Level A
Scenario Outline: Each tab has an accessible name which matches or includes the visible label
When I view the rendered "<element>"
Then it should have an accessible name which contains the visible label "<visible_label>"
Examples:
| element | visible_label |
|---|---|
| #tabs-0-tab-1 | Panel 1 |
| #tabs-0-tab-2 | Panel 2 |
| #tabs-0-tab-3 | Panel 3 |
Rule: 2.5.3 Label in Name, Level A
Scenario Outline: Each tabpanel has an accessible name which matches or includes the visible label on the tab that controls it
When I focus "<tab>" using the arrow keys
And I inspect "<panel>" in the DOM
Then it should have an accessible name which contains the visible label "<visible_label>"
Examples:
| tab | panel | visible_label |
|---|---|---|
| #tabs-0-tab-1 | #tabs-0-panel-1 | Panel 1 |
| #tabs-0-tab-2 | #tabs-0-panel-2 | Panel 2 |
| #tabs-0-tab-3 | #tabs-0-panel-3 | Panel 3 |
4.1.2 Name, Role, Value
Rule: 4.1.2 Name, Role, Value, Level A
Scenario Outline: Each tab has an accessible name
When I inspect "<element>" in the DOM
Then it should have an accessible name
And its accessible name should be "<name>"
Examples:
| element | name |
|---|---|
| #tabs-0-tab-1 | Panel 1 |
| #tabs-0-tab-2 | Panel 2 |
| #tabs-0-tab-3 | Panel 3 |
Rule: 4.1.2 Name, Role, Value, Level A
Scenario Outline: Each tabpanel has an accessible name
When I focus "<tab>" using the arrow keys
And I inspect "<panel>" in the DOM
Then it should have an accessible name
And its accessible name should be "<name>"
Examples:
| tab | panel | name |
|---|---|---|
| #tabs-0-tab-1 | #tabs-0-panel-1 | Panel 1 |
| #tabs-0-tab-2 | #tabs-0-panel-2 | Panel 2 |
| #tabs-0-tab-3 | #tabs-0-panel-3 | Panel 3 |
Rule: 4.1.2 Name, Role, Value, Level A
Scenario: The tablist has a role of tablist
When I inspect 'tl-tabs .tl-tabs__tablist' in the DOM
Then it should have an accessible role of "tablist"
Rule: 4.1.2 Name, Role, Value, Level A
Scenario Outline: Each tab has a role of tab and is contained within the tablist
When I inspect "<element>" in the DOM
Then it should have an accessible role of "tab"
And it should be nested within the "tl-tabs .tl-tabs__tablist" element
Examples:
| element |
|---|
| #tabs-0-tab-1 |
| #tabs-0-tab-2 |
| #tabs-0-tab-3 |
Rule: 4.1.2 Name, Role, Value, Level A
Scenario Outline: Each tabpanel has a role of tabpanel
When I inspect "<element>" in the DOM
Then it should have an accessible role of "tabpanel"
Examples:
| element |
|---|
| #tabs-0-panel-1 |
| #tabs-0-panel-2 |
| #tabs-0-panel-3 |
Rule: 4.1.2 Name, Role, Value, Level A
Scenario Outline: Each tab is programmatically associated with the tabpanel it controls
When I inspect "<element>" in the DOM
Then it should have the attribute "aria-controls" with the value "<value>"
Examples:
| element | value |
|---|---|
| #tabs-0-tab-1 | tabs-0-panel-1 |
| #tabs-0-tab-2 | tabs-0-panel-2 |
| #tabs-0-tab-3 | tabs-0-panel-3 |
Rule: 4.1.2 Name, Role, Value, Level A
Scenario Outline: Each tabpanel takes its accessible name from the tab that controls it
When I inspect "<element>" in the DOM
Then it should have the attribute "aria-labelledby" with the value "<value>"
Examples:
| element | value |
|---|---|
| #tabs-0-panel-1 | tabs-0-tab-1 |
| #tabs-0-panel-2 | tabs-0-tab-2 |
| #tabs-0-panel-3 | tabs-0-tab-3 |
Rule: 4.1.2 Name, Role, Value, Level A
Scenario: The orientation of the tablist is exposed so arrow key behaviour is announced correctly
When I inspect 'tl-tabs .tl-tabs__tablist' in the DOM
Then it should have the attribute "aria-orientation" with the value "horizontal"
Recommendations
Rule: Recommendation
Scenario: Markup can be parsed without errors
When I inspect 'tl-tabs' in the DOM
Then it should use valid HTML with no parsing errors
Colour and contrast
View accessibility requirements: Colour and contrast
@tabs @colour-and-contrast Feature: Tabs — 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/tabs/examples/default" # ---------------------------------------------------------------------------- # Perceivable # ---------------------------------------------------------------------------- @1.4.1 @a @automatic Rule: 1.4.1 Use of Color, Level A Scenario Outline: Colour alone is not used to visually identify the active tab When I click on "<element>" And I view the rendered "<element>" Then it should be distinguishable from "<other tab>" without relying on colour alone Examples: | element | other tab | | #tabs-0-tab-1 | #tabs-0-tab-2 | | #tabs-0-tab-2 | #tabs-0-tab-1 | | #tabs-0-tab-3 | #tabs-0-tab-1 | @1.4.3 @aa @automatic Rule: 1.4.3 Contrast (Minimum), Level AA Scenario Outline: All text content within the tabs component has a contrast ratio of 4.5:1 against the background When I view the rendered "<element>" Then its text should have a contrast ratio of '4.5:1' against its background Examples: | element | | #tabs-0-tab-1 | | #tabs-0-tab-2 | | #tabs-0-tab-3 | | #tabs-0-panel-1 | @1.4.3 @aa @automatic @darkmode Rule: 1.4.3 Contrast (Minimum), Level AA Scenario Outline: Darkmode: All text content within the tabs component has a contrast ratio of 4.5:1 against the background When 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 | | #tabs-0-tab-1 | | #tabs-0-tab-2 | | #tabs-0-tab-3 | | #tabs-0-panel-1 | @1.4.11 @aa @automatic Rule: 1.4.11 Non-text Contrast, Level AA Scenario: The colour used to identify the active tab has a contrast ratio of 3:1 against the background When I view the rendered '#tabs-0-tab-1' Then its selected state box-shadow or border 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 colour used to identify the active tab has a contrast ratio of 3:1 against the unselected tabs When I view the rendered '#tabs-0-tab-1' Then its selected state box-shadow or border should have a contrast ratio of '3:1' against the "<element>" element Examples: | element | | #tabs-0-tab-2 | | #tabs-0-tab-3 | @1.4.11 @aa @automatic @darkmode Rule: 1.4.11 Non-text Contrast, Level AA Scenario: Darkmode: The colour used to identify the active tab has a contrast ratio of 3:1 against the background When I view the rendered '#tabs-0-tab-1' And I enable "dark" mode Then its selected state box-shadow or border 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 style has a contrast ratio of 3:1 against the background When I focus "<element>" using the arrow keys 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 | | #tabs-0-tab-1 | | #tabs-0-tab-2 | | #tabs-0-tab-3 | @1.4.6 @aaa @automatic Rule: 1.4.6 Contrast (Enhanced), Level AAA Scenario Outline: All text content within the tabs component has a contrast ratio of 7:1 against the background When I view the rendered "<element>" Then its text should have a contrast ratio of '7:1' against its background Examples: | element | | #tabs-0-tab-1 | | #tabs-0-tab-2 | | #tabs-0-tab-3 | | #tabs-0-panel-1 | @1.4.6 @aaa @automatic @darkmode Rule: 1.4.6 Contrast (Enhanced), Level AAA Scenario Outline: Darkmode: All text content within the tabs component has a contrast ratio of 7:1 against the background When 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 | | #tabs-0-tab-1 | | #tabs-0-tab-2 | | #tabs-0-tab-3 | | #tabs-0-panel-1 |Feature: Tabs — 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/tabs/examples/default.html"
1.4.1 Use of Color
Rule: 1.4.1 Use of Color, Level A
Scenario Outline: Colour alone is not used to visually identify the active tab
When I click on "<element>"
And I view the rendered "<element>"
Then it should be distinguishable from "<other tab>" without relying on colour alone
Examples:
| element | other tab |
|---|---|
| #tabs-0-tab-1 | #tabs-0-tab-2 |
| #tabs-0-tab-2 | #tabs-0-tab-1 |
| #tabs-0-tab-3 | #tabs-0-tab-1 |
1.4.3 Contrast (Minimum)
Rule: 1.4.3 Contrast (Minimum), Level AA
Scenario Outline: All text content within the tabs component has a contrast ratio of 4.5:1 against the background
When I view the rendered "<element>"
Then its text should have a contrast ratio of '4.5:1' against its background
Examples:
| element |
|---|
| #tabs-0-tab-1 |
| #tabs-0-tab-2 |
| #tabs-0-tab-3 |
| #tabs-0-panel-1 |
Rule: 1.4.3 Contrast (Minimum), Level AA
Scenario Outline: Darkmode: All text content within the tabs component has a contrast ratio of 4.5:1 against the background
When 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 |
|---|
| #tabs-0-tab-1 |
| #tabs-0-tab-2 |
| #tabs-0-tab-3 |
| #tabs-0-panel-1 |
1.4.11 Non-text Contrast
Rule: 1.4.11 Non-text Contrast, Level AA
Scenario: The colour used to identify the active tab has a contrast ratio of 3:1 against the background
When I view the rendered '#tabs-0-tab-1'
Then its selected state box-shadow or border should have a contrast ratio of '3:1' against its background
Rule: 1.4.11 Non-text Contrast, Level AA
Scenario Outline: The colour used to identify the active tab has a contrast ratio of 3:1 against the unselected tabs
When I view the rendered '#tabs-0-tab-1'
Then its selected state box-shadow or border should have a contrast ratio of '3:1' against the "<element>" element
Examples:
| element |
|---|
| #tabs-0-tab-2 |
| #tabs-0-tab-3 |
Rule: 1.4.11 Non-text Contrast, Level AA
Scenario: Darkmode: The colour used to identify the active tab has a contrast ratio of 3:1 against the background
When I view the rendered '#tabs-0-tab-1'
And I enable "dark" mode
Then its selected state box-shadow or border 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 style has a contrast ratio of 3:1 against the background
When I focus "<element>" using the arrow keys
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 |
|---|
| #tabs-0-tab-1 |
| #tabs-0-tab-2 |
| #tabs-0-tab-3 |
1.4.6 Contrast (Enhanced)
Rule: 1.4.6 Contrast (Enhanced), Level AAA
Scenario Outline: All text content within the tabs component has a contrast ratio of 7:1 against the background
When I view the rendered "<element>"
Then its text should have a contrast ratio of '7:1' against its background
Examples:
| element |
|---|
| #tabs-0-tab-1 |
| #tabs-0-tab-2 |
| #tabs-0-tab-3 |
| #tabs-0-panel-1 |
Rule: 1.4.6 Contrast (Enhanced), Level AAA
Scenario Outline: Darkmode: All text content within the tabs component has a contrast ratio of 7:1 against the background
When 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 |
|---|
| #tabs-0-tab-1 |
| #tabs-0-tab-2 |
| #tabs-0-tab-3 |
| #tabs-0-panel-1 |
Consistency and predictability
View accessibility requirements: Consistency and predictability
@tabs @consistency-and-predictability Feature: Tabs — 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/tabs/examples/default" # ---------------------------------------------------------------------------- # Understandable # ---------------------------------------------------------------------------- @3.2.1 @a @automatic Rule: 3.2.1 On Focus, Level A Scenario: Receiving focus does not initiate a change of context When I focus "#tabs-0-tab-1" 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 Outline: Moving focus between tabs does not initiate a change of context When I focus "<element>" using the arrow keys Then it should NOT navigate to a new page Examples: | element | | #tabs-0-tab-2 | | #tabs-0-tab-3 | @recommendation @automatic Rule: Recommendation Scenario: In the narrow layout, the chevron icon is inside each toggle, before its label When I set the viewport to 320px wide And I inspect ".tl-tabs__disclosure:nth-of-type(1) > button > svg:first-child" in the DOM Then it should use the tag "svg" And it should be nested within the ".tl-tabs__disclosure:nth-of-type(1) > button" elementFeature: Tabs — 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/tabs/examples/default.html"
3.2.1 On Focus
Rule: 3.2.1 On Focus, Level A
Scenario: Receiving focus does not initiate a change of context
When I focus "#tabs-0-tab-1" using a keyboard
Then it should NOT navigate to a new page
Rule: 3.2.1 On Focus, Level A
Scenario Outline: Moving focus between tabs does not initiate a change of context
When I focus "<element>" using the arrow keys
Then it should NOT navigate to a new page
Examples:
| element |
|---|
| #tabs-0-tab-2 |
| #tabs-0-tab-3 |
Recommendations
Rule: Recommendation
Scenario: In the narrow layout, the chevron icon is inside each toggle, before its label
When I set the viewport to 320px wide
And I inspect ".tl-tabs__disclosure:nth-of-type(1) > button > svg:first-child" in the DOM
Then it should use the tag "svg"
And it should be nested within the ".tl-tabs__disclosure:nth-of-type(1) > button" element
Images and media
View accessibility requirements: Images and media
@tabs @images-and-media Feature: Tabs — 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/tabs/examples/default" # ---------------------------------------------------------------------------- # Perceivable # ---------------------------------------------------------------------------- @1.1.1 @a @automatic Rule: 1.1.1 Non-text Content, Level A Scenario Outline: If a tab uses an icon in place of a visible text label, the icon has a text description When I view the rendered "<element>" Then any icon should have a text description, or be hidden from assistive technologies Examples: | element | | #tabs-0-tab-1 | | #tabs-0-tab-2 | | #tabs-0-tab-3 | @1.1.1 @a @automatic Rule: 1.1.1 Non-text Content, Level A Scenario Outline: Each tab has an accessible name, whether it uses a text label or an icon When I inspect "<element>" in the DOM Then it should have an accessible name Examples: | element | | #tabs-0-tab-1 | | #tabs-0-tab-2 | | #tabs-0-tab-3 | @1.4.5 @aa @automatic Rule: 1.4.5 Images of Text, Level AA Scenario: Real text is used instead of images of text (except essential/logos) When I view the rendered 'tl-tabs' Then it should not contain any images @1.4.9 @aaa @automatic Rule: 1.4.9 Images of Text (No Exception), Level AAA Scenario: No images of text at all When I view the rendered 'tl-tabs' Then it should not contain any imagesFeature: Tabs — 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/tabs/examples/default.html"
1.1.1 Non-text Content
Rule: 1.1.1 Non-text Content, Level A
Scenario Outline: If a tab uses an icon in place of a visible text label, the icon has a text description
When I view the rendered "<element>"
Then any icon should have a text description, or be hidden from assistive technologies
Examples:
| element |
|---|
| #tabs-0-tab-1 |
| #tabs-0-tab-2 |
| #tabs-0-tab-3 |
Rule: 1.1.1 Non-text Content, Level A
Scenario Outline: Each tab has an accessible name, whether it uses a text label or an icon
When I inspect "<element>" in the DOM
Then it should have an accessible name
Examples:
| element |
|---|
| #tabs-0-tab-1 |
| #tabs-0-tab-2 |
| #tabs-0-tab-3 |
1.4.5 Images of Text
Rule: 1.4.5 Images of Text, Level AA
Scenario: Real text is used instead of images of text (except essential/logos)
When I view the rendered 'tl-tabs'
Then it should not contain any images
1.4.9 Images of Text (No Exception)
Rule: 1.4.9 Images of Text (No Exception), Level AAA
Scenario: No images of text at all
When I view the rendered 'tl-tabs'
Then it should not contain any images
Input assistance
View accessibility requirements: Input assistance
@tabs @input-assistance Feature: Tabs — Input assistance Helping people to complete forms, enter data and pass authentication No component-specific requirementsFeature: Tabs — Input assistance
Helping people to complete forms, enter data and pass authentication
No component-specific requirements
Keyboard
View accessibility requirements: Keyboard
@tabs @keyboard Feature: Tabs — 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/tabs/examples/default" # ---------------------------------------------------------------------------- # Operable # ---------------------------------------------------------------------------- @2.1.1 @a @automatic Rule: 2.1.1 Keyboard, Level A Scenario: The active tab can be focused using the Tab key When I focus "#tabs-0-tab-1" using a keyboard Then "#tabs-0-tab-1" should be focused @2.1.1 @a @automatic Rule: 2.1.1 Keyboard, Level A Scenario: The active tab is the only tab in the tab order When I inspect "#tabs-0-tab-1" in the DOM Then it should not have the attribute "tabindex" @2.1.1 @a @automatic Rule: 2.1.1 Keyboard, Level A Scenario Outline: Tabs which are not active are removed from the tab order When I inspect "<element>" in the DOM Then it should have the attribute "tabindex" with the value "-1" Examples: | element | | #tabs-0-tab-2 | | #tabs-0-tab-3 | @2.1.1 @a @automatic Rule: 2.1.1 Keyboard, Level A Scenario Outline: Each tab can be reached using the arrow keys, wrapping around at each end When I focus "<element>" using the arrow keys And I press the "<key>" key once Then "<next element>" should be focused Examples: | element | key | next element | | #tabs-0-tab-1 | RIGHT | #tabs-0-tab-2 | | #tabs-0-tab-2 | RIGHT | #tabs-0-tab-3 | | #tabs-0-tab-3 | RIGHT | #tabs-0-tab-1 | | #tabs-0-tab-1 | LEFT | #tabs-0-tab-3 | | #tabs-0-tab-2 | LEFT | #tabs-0-tab-1 | | #tabs-0-tab-3 | LEFT | #tabs-0-tab-2 | @2.1.1 @a @automatic Rule: 2.1.1 Keyboard, Level A Scenario Outline: Each tab is activated when it receives focus When I focus "<element>" using the arrow keys And I inspect "<element>" in the DOM Then it should have the attribute "aria-selected" with the value "true" Examples: | element | | #tabs-0-tab-1 | | #tabs-0-tab-2 | | #tabs-0-tab-3 | @2.1.1 @a @automatic Rule: 2.1.1 Keyboard, Level A Scenario Outline: Activating a tab reveals the tabpanel it controls When I focus "<tab>" using the arrow keys And I inspect "<panel>" in the DOM Then it should not have the attribute "hidden" Examples: | tab | panel | | #tabs-0-tab-1 | #tabs-0-panel-1 | | #tabs-0-tab-2 | #tabs-0-panel-2 | | #tabs-0-tab-3 | #tabs-0-panel-3 | @2.1.1 @a @automatic Rule: 2.1.1 Keyboard, Level A Scenario Outline: Only the tabpanel controlled by the active tab is visible When I focus "#tabs-0-tab-2" using the arrow keys And I inspect "<element>" in the DOM Then it should have the attribute "hidden" Examples: | element | | #tabs-0-panel-1 | | #tabs-0-panel-3 | @2.1.1 @a @automatic Rule: 2.1.1 Keyboard, Level A Scenario: The active tab can be activated using the Enter key When I focus "#tabs-0-tab-1" using a keyboard And I press the "ENTER" key once And I inspect "#tabs-0-panel-1" in the DOM Then it should not have the attribute "hidden" @2.1.2 @a @automatic Rule: 2.1.2 No Keyboard Trap, Level A Scenario: Focus is not trapped going forwards When I focus '#tabs-0-panel-1 .demo-link' And I press the 'TAB' key once Then the focus should not be on a 'tl-tabs a' element @2.1.2 @a @automatic Rule: 2.1.2 No Keyboard Trap, Level A Scenario: Focus is not trapped going backwards When I focus '#tabs-0-tab-1' And I hold the 'SHIFT' key And I press the 'TAB' key once Then the focus should not be on a 'tl-tabs a' element @2.4.3 @a @automatic Rule: 2.4.3 Focus Order, Level A Scenario: Focus moves from the active tab to the first focusable element in the tabpanel it controls When I focus '#tabs-0-tab-1' And I press the 'TAB' key once Then '#tabs-0-panel-1 .demo-link' should be focused @2.4.3 @a @automatic Rule: 2.4.3 Focus Order, Level A Scenario Outline: The tabpanel itself is not in the tab order When I inspect "<panel>" in the DOM Then it should not have the attribute "tabindex" Examples: | panel | | #tabs-0-panel-1 | | #tabs-0-panel-2 | | #tabs-0-panel-3 | @2.4.3 @a @automatic Rule: 2.4.3 Focus Order, Level A Scenario: Focus cannot be moved into the content of a non-visible tabpanel When I focus "#tabs-0-tab-2" using the arrow keys And I press the 'TAB' key once And I press the 'TAB' key once Then the focus should not be on a '#tabs-0-panel-1 .demo-link' element @2.4.7 @aa @automatic Rule: 2.4.7 Focus Visible, Level AA Scenario Outline: Each tab has a visible focus indicator when it receives keyboard focus When I focus "<element>" using the arrow keys Then it should have a visible focus indicator Examples: | element | | #tabs-0-tab-1 | | #tabs-0-tab-2 | | #tabs-0-tab-3 | @2.4.11 @aa @automatic Rule: 2.4.11 Focus Not Obscured (Minimum), Level AA Scenario Outline: Each tab is not fully hidden by other content when it receives keyboard focus When I focus "<element>" using the arrow keys Then it should have a visible focus indicator And its focus indicator should be at least partially visible Examples: | element | | #tabs-0-tab-1 | | #tabs-0-tab-2 | | #tabs-0-tab-3 | @2.1.3 @aaa @automatic Rule: 2.1.3 Keyboard (No Exception), Level AAA Scenario: The tabs component is accessible by keyboard, with no exceptions When I view the rendered 'tl-tabs' 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: Each tab is fully visible when it receives keyboard focus When I focus "<element>" using the arrow keys Then it should have a visible focus indicator And its focus indicator should be fully visible Examples: | element | | #tabs-0-tab-1 | | #tabs-0-tab-2 | | #tabs-0-tab-3 | @2.4.13 @aaa @automatic Rule: 2.4.13 Focus Appearance, Level AAA Scenario Outline: Each tab has a custom focus style with a solid 2 pixel thick perimeter, or equivalent, and a contrast ratio of at least 3:1 against the background colour When I focus "<element>" using the arrow keys 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 | | #tabs-0-tab-1 | | #tabs-0-tab-2 | | #tabs-0-tab-3 | @recommendation @automatic Rule: Recommendation Scenario Outline: The right and left arrow keys are used to navigate between tabs, with automatic activation When I focus "<element>" using the arrow keys And I press the "<key>" key once And I inspect "<next element>" in the DOM Then it should have the attribute "aria-selected" with the value "true" Examples: | element | key | next element | | #tabs-0-tab-1 | RIGHT | #tabs-0-tab-2 | | #tabs-0-tab-2 | LEFT | #tabs-0-tab-1 | @recommendation @automatic Rule: Recommendation Scenario Outline: The Home and End keys move to the first and last tab When I focus "#tabs-0-tab-2" using the arrow keys And I press the "<key>" key once Then "<next element>" should be focused Examples: | key | next element | | HOME | #tabs-0-tab-1 | | END | #tabs-0-tab-3 | @recommendation @automatic Rule: Recommendation Scenario Outline: A custom focus style is used instead of the browser's default When I focus "<element>" using the arrow keys Then it should have a visible focus indicator And its focus indicator should have a minimum perimiter thickness of 2px Examples: | element | | #tabs-0-tab-1 | | #tabs-0-tab-2 | | #tabs-0-tab-3 |Feature: Tabs — 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/tabs/examples/default.html"
2.1.1 Keyboard
Rule: 2.1.1 Keyboard, Level A
Scenario: The active tab can be focused using the Tab key
When I focus "#tabs-0-tab-1" using a keyboard
Then "#tabs-0-tab-1" should be focused
Rule: 2.1.1 Keyboard, Level A
Scenario: The active tab is the only tab in the tab order
When I inspect "#tabs-0-tab-1" in the DOM
Then it should not have the attribute "tabindex"
Rule: 2.1.1 Keyboard, Level A
Scenario Outline: Tabs which are not active are removed from the tab order
When I inspect "<element>" in the DOM
Then it should have the attribute "tabindex" with the value "-1"
Examples:
| element |
|---|
| #tabs-0-tab-2 |
| #tabs-0-tab-3 |
Rule: 2.1.1 Keyboard, Level A
Scenario Outline: Each tab can be reached using the arrow keys, wrapping around at each end
When I focus "<element>" using the arrow keys
And I press the "<key>" key once
Then "<next element>" should be focused
Examples:
| element | key | next element |
|---|---|---|
| #tabs-0-tab-1 | RIGHT | #tabs-0-tab-2 |
| #tabs-0-tab-2 | RIGHT | #tabs-0-tab-3 |
| #tabs-0-tab-3 | RIGHT | #tabs-0-tab-1 |
| #tabs-0-tab-1 | LEFT | #tabs-0-tab-3 |
| #tabs-0-tab-2 | LEFT | #tabs-0-tab-1 |
| #tabs-0-tab-3 | LEFT | #tabs-0-tab-2 |
Rule: 2.1.1 Keyboard, Level A
Scenario Outline: Each tab is activated when it receives focus
When I focus "<element>" using the arrow keys
And I inspect "<element>" in the DOM
Then it should have the attribute "aria-selected" with the value "true"
Examples:
| element |
|---|
| #tabs-0-tab-1 |
| #tabs-0-tab-2 |
| #tabs-0-tab-3 |
Rule: 2.1.1 Keyboard, Level A
Scenario Outline: Activating a tab reveals the tabpanel it controls
When I focus "<tab>" using the arrow keys
And I inspect "<panel>" in the DOM
Then it should not have the attribute "hidden"
Examples:
| tab | panel |
|---|---|
| #tabs-0-tab-1 | #tabs-0-panel-1 |
| #tabs-0-tab-2 | #tabs-0-panel-2 |
| #tabs-0-tab-3 | #tabs-0-panel-3 |
Rule: 2.1.1 Keyboard, Level A
Scenario Outline: Only the tabpanel controlled by the active tab is visible
When I focus "#tabs-0-tab-2" using the arrow keys
And I inspect "<element>" in the DOM
Then it should have the attribute "hidden"
Examples:
| element |
|---|
| #tabs-0-panel-1 |
| #tabs-0-panel-3 |
Rule: 2.1.1 Keyboard, Level A
Scenario: The active tab can be activated using the Enter key
When I focus "#tabs-0-tab-1" using a keyboard
And I press the "ENTER" key once
And I inspect "#tabs-0-panel-1" in the DOM
Then it should not have the attribute "hidden"
2.1.2 No Keyboard Trap
Rule: 2.1.2 No Keyboard Trap, Level A
Scenario: Focus is not trapped going forwards
When I focus '#tabs-0-panel-1 .demo-link'
And I press the 'TAB' key once
Then the focus should not be on a 'tl-tabs a' element
Rule: 2.1.2 No Keyboard Trap, Level A
Scenario: Focus is not trapped going backwards
When I focus '#tabs-0-tab-1'
And I hold the 'SHIFT' key
And I press the 'TAB' key once
Then the focus should not be on a 'tl-tabs a' element
2.4.3 Focus Order
Rule: 2.4.3 Focus Order, Level A
Scenario: Focus moves from the active tab to the first focusable element in the tabpanel it controls
When I focus '#tabs-0-tab-1'
And I press the 'TAB' key once
Then '#tabs-0-panel-1 .demo-link' should be focused
Rule: 2.4.3 Focus Order, Level A
Scenario Outline: The tabpanel itself is not in the tab order
When I inspect "<panel>" in the DOM
Then it should not have the attribute "tabindex"
Examples:
| panel |
|---|
| #tabs-0-panel-1 |
| #tabs-0-panel-2 |
| #tabs-0-panel-3 |
Rule: 2.4.3 Focus Order, Level A
Scenario: Focus cannot be moved into the content of a non-visible tabpanel
When I focus "#tabs-0-tab-2" using the arrow keys
And I press the 'TAB' key once
And I press the 'TAB' key once
Then the focus should not be on a '#tabs-0-panel-1 .demo-link' element
2.4.7 Focus Visible
Rule: 2.4.7 Focus Visible, Level AA
Scenario Outline: Each tab has a visible focus indicator when it receives keyboard focus
When I focus "<element>" using the arrow keys
Then it should have a visible focus indicator
Examples:
| element |
|---|
| #tabs-0-tab-1 |
| #tabs-0-tab-2 |
| #tabs-0-tab-3 |
2.4.11 Focus Not Obscured (Minimum)
Rule: 2.4.11 Focus Not Obscured (Minimum), Level AA
Scenario Outline: Each tab is not fully hidden by other content when it receives keyboard focus
When I focus "<element>" using the arrow keys
Then it should have a visible focus indicator
And its focus indicator should be at least partially visible
Examples:
| element |
|---|
| #tabs-0-tab-1 |
| #tabs-0-tab-2 |
| #tabs-0-tab-3 |
2.1.3 Keyboard (No Exception)
Rule: 2.1.3 Keyboard (No Exception), Level AAA
Scenario: The tabs component is accessible by keyboard, with no exceptions
When I view the rendered 'tl-tabs'
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: Each tab is fully visible when it receives keyboard focus
When I focus "<element>" using the arrow keys
Then it should have a visible focus indicator
And its focus indicator should be fully visible
Examples:
| element |
|---|
| #tabs-0-tab-1 |
| #tabs-0-tab-2 |
| #tabs-0-tab-3 |
2.4.13 Focus Appearance
Rule: 2.4.13 Focus Appearance, Level AAA
Scenario Outline: Each tab has a custom focus style with a solid 2 pixel thick perimeter, or equivalent, and a contrast ratio of at least 3:1 against the background colour
When I focus "<element>" using the arrow keys
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 |
|---|
| #tabs-0-tab-1 |
| #tabs-0-tab-2 |
| #tabs-0-tab-3 |
Recommendations
Rule: Recommendation
Scenario Outline: The right and left arrow keys are used to navigate between tabs, with automatic activation
When I focus "<element>" using the arrow keys
And I press the "<key>" key once
And I inspect "<next element>" in the DOM
Then it should have the attribute "aria-selected" with the value "true"
Examples:
| element | key | next element |
|---|---|---|
| #tabs-0-tab-1 | RIGHT | #tabs-0-tab-2 |
| #tabs-0-tab-2 | LEFT | #tabs-0-tab-1 |
Rule: Recommendation
Scenario Outline: The Home and End keys move to the first and last tab
When I focus "#tabs-0-tab-2" using the arrow keys
And I press the "<key>" key once
Then "<next element>" should be focused
Examples:
| key | next element |
|---|---|
| HOME | #tabs-0-tab-1 |
| END | #tabs-0-tab-3 |
Rule: Recommendation
Scenario Outline: A custom focus style is used instead of the browser's default
When I focus "<element>" using the arrow keys
Then it should have a visible focus indicator
And its focus indicator should have a minimum perimiter thickness of 2px
Examples:
| element |
|---|
| #tabs-0-tab-1 |
| #tabs-0-tab-2 |
| #tabs-0-tab-3 |
Pointer and touch
View accessibility requirements: Pointer and touch
@tabs @pointer-and-touch Feature: Tabs — 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/tabs/examples/default" # ---------------------------------------------------------------------------- # Operable # ---------------------------------------------------------------------------- @2.5.2 @a @automatic Rule: 2.5.2 Pointer Cancellation, Level A Scenario Outline: Each tab is not activated on the down event When I press the mouse down on "<element>" Then it should not have the attribute "aria-selected" Examples: | element | | #tabs-0-tab-2 | | #tabs-0-tab-3 | @2.5.2 @a @automatic Rule: 2.5.2 Pointer Cancellation, Level A Scenario Outline: Each tab is activated on the up event When I click on "<element>" Then it should have the attribute "aria-selected" with the value "true" Examples: | element | | #tabs-0-tab-1 | | #tabs-0-tab-2 | | #tabs-0-tab-3 | @2.5.2 @a @automatic Rule: 2.5.2 Pointer Cancellation, Level A Scenario: Activating a tab with a pointer does not navigate to a new page When I click on "#tabs-0-tab-2" 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: Each tab has a target area size, or a target area size together with spacing, of at least 24 by 24 pixels When I view the rendered "<element>" Then it should have a width and height of at least 24px Examples: | element | | #tabs-0-tab-1 | | #tabs-0-tab-2 | | #tabs-0-tab-3 | @2.5.5 @aaa @automatic Rule: 2.5.5 Target Size (Enhanced), Level AAA Scenario Outline: Each tab has a target area size of at least 44 by 44 pixels When I view the rendered "<element>" Then it should have a width and height of at least 44px Examples: | element | | #tabs-0-tab-1 | | #tabs-0-tab-2 | | #tabs-0-tab-3 |Feature: Tabs — 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/tabs/examples/default.html"
2.5.2 Pointer Cancellation
Rule: 2.5.2 Pointer Cancellation, Level A
Scenario Outline: Each tab is not activated on the down event
When I press the mouse down on "<element>"
Then it should not have the attribute "aria-selected"
Examples:
| element |
|---|
| #tabs-0-tab-2 |
| #tabs-0-tab-3 |
Rule: 2.5.2 Pointer Cancellation, Level A
Scenario Outline: Each tab is activated on the up event
When I click on "<element>"
Then it should have the attribute "aria-selected" with the value "true"
Examples:
| element |
|---|
| #tabs-0-tab-1 |
| #tabs-0-tab-2 |
| #tabs-0-tab-3 |
Rule: 2.5.2 Pointer Cancellation, Level A
Scenario: Activating a tab with a pointer does not navigate to a new page
When I click on "#tabs-0-tab-2"
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: Each tab has a target area size, or a target area size together with spacing, of at least 24 by 24 pixels
When I view the rendered "<element>"
Then it should have a width and height of at least 24px
Examples:
| element |
|---|
| #tabs-0-tab-1 |
| #tabs-0-tab-2 |
| #tabs-0-tab-3 |
2.5.5 Target Size (Enhanced)
Rule: 2.5.5 Target Size (Enhanced), Level AAA
Scenario Outline: Each tab has a target area size of at least 44 by 44 pixels
When I view the rendered "<element>"
Then it should have a width and height of at least 44px
Examples:
| element |
|---|
| #tabs-0-tab-1 |
| #tabs-0-tab-2 |
| #tabs-0-tab-3 |