Pagination test scenarios

Scenario Outline: A correct reading sequence can be programmatically determined

When I inspect "<element>" in the DOM

Then it is positioned after the "<previous_element>" element in the DOM

Scenario Outline: Each link has an accessible name that matches or includes the visible label

When I inspect "<element>" in the Accessibility Tree

Then it should have an accessible name which contains the visible label "<visible_label>"

Scenario Outline: Each link has an accessible name

When I inspect "<element>" in the Accessibility Tree

Then it should have an accessible name

Scenario Outline: Each link has a role of link

When I inspect "<element>" in the Accessibility Tree

Then it should have an accessible role of "link"

Scenario Outline: Each link is implemented as an <a> element with a href attribute

When I inspect "<element>" in the DOM

Then it should use the tag "a"

And it should have the attribute "href"

Scenario Outline: Colour is not the only visual means of conveying information

When I view the rendered "<element>"

Then it should have the CSS property "text-decoration-line" with the value "underline"

Scenario Outline: The text for each link has a contrast ratio of at least 4.5:1 against the background colour

When I view the rendered "<element>"

Then its text should have a contrast ratio of "4.5" against its background

Scenario Outline: Darkmode: The text for each link has a contrast ratio of at least 4.5:1 against the background colour

When I view the rendered "<element>"

And I enable "dark" mode

Then its text should have a contrast ratio of "4.5" against its background

Scenario Outline: Icons used such as arrows for "previous" and "next" have a contrast ratio of at least 3:1 against the background colour

When I view the rendered "<element>"

Then its text should have a contrast ratio of "3" against its background

Scenario Outline: If the links have a custom focus style that uses colour alone, the focus style has a contrast ratio of at least 3:1 against the background colour

When I focus "<element>" using a keyboard

Then it should have a visible focus indicator

And the focus indicator should have a contrast ratio of 3:1 against its background

Scenario Outline: The text for each link has a contrast ratio of at least 7:1 against the background colour

When I view the rendered "<element>"

Then its text should have a contrast ratio of "7" against its background

Scenario Outline: Darkmode: The text for each link has a contrast ratio of at least 7:1 against the background colour

When I view the rendered "<element>"

And I enable "dark" mode

Then its text should have a contrast ratio of "7" against its background

Scenario Outline: Each link does not result in a change of context when focused

When I focus "<element>" using a keyboard

Then it should NOT navigate to a new page

Scenario Outline: Each link has the same accessible name on different pages

Given I load the sample "<sample>"

When I inspect "<element>" in the Accessibility Tree

Then its accessible name should be "<name>"

Scenario Outline: Each link has a visual style that makes it look like a link, such as an underline or background colour

When I view the rendered "<element>"

Then it should have the CSS property "text-decoration-line" with the value "underline"

Scenario Outline: Arrows in "Next" and "Previous" links are hidden from screen readers

When I inspect "<element>" in the Accessibility Tree

Then its accessible name should be "<name>"

Scenario Outline: Each ellipsis character is hidden from screen readers, and visually hidden text alongside it reads "Ellipsis"

Given I load the sample "<sample>"

When I inspect "<item> span[aria-hidden]" in the DOM

Then it should have the attribute "aria-hidden" with the value "true"

When I inspect "<item> .visually-hidden" in the DOM

Then it should contain the text "Ellipsis"

Scenario Outline: Real text is used instead of images for links where possible

When I inspect "<element>" in the Accessibility Tree

Then it should contain static text, not an image

Scenario Outline: No images of text at all

When I inspect "<element>" in the Accessibility Tree

Then it should contain static text, not an image

Scenario Outline: Each link is focusable using the "Tab" key

When I focus "<element>" using a keyboard

Then "<element>" should be focused

Scenario Outline: Each link can be activated by pressing the "Enter" key

When I focus "<element>"

And I press the "Enter" key once

Then the URL should change

Scenario Outline: Each link does not trap focus going forwards

When I focus "<element>"

And I press the "TAB" key once

Then the focus should not be on a "<element>" element

Scenario Outline: Each link does not trap focus going backwards

When I focus "<element>"

And I hold the "SHIFT" key

And I press the "TAB" key once

Then the focus should not be on a "<element>" element

Scenario Outline: Each link receives focus in logical order

When I focus "<element>"

And I press the "TAB" key once

Then "<next_element>" should be focused

Scenario Outline: Each link has a focus indicator when it receives keyboard focus

When I focus "<element>" using a keyboard

Then it should have a visible focus indicator

Scenario Outline: Each link has a focus indicator which is not fully hidden by other content when it receives keyboard focus

When I focus "<element>" using a keyboard

Then it should have a visible focus indicator

And its focus indicator should be at least partially visible

Scenario Outline: Each link is focusable using the "Tab" key

When I focus "<element>" using a keyboard

Then "<element>" should be focused

Scenario Outline: Each link can be activated by pressing the "Enter" key

When I focus "<element>"

And I press the "Enter" key once

Then the URL should change

Scenario Outline: Each link has a focus indicator which is not even partially hidden by other content

When I focus "<element>" using a keyboard

Then it should have a visible focus indicator

And its focus indicator should be fully visible

Scenario Outline: The focus indicator is at least 2px larger than the component boundary and has a contrast ratio of 3:1 or higher

When I focus "<element>" using a keyboard

Then it should have a visible focus indicator

And the focus indicator should have a contrast ratio of 3:1 against its background

And its focus indicator should have a minimum perimiter thickness of 2px

Scenario Outline: The purpose of each link is clear from the link text, or the link text and its surrounding context

When I view the rendered "<element>"

Then it should be easy to understand the purpose of each link from its text and surrounding context

Scenario Outline: The purpose of each link is clear from the link text alone

When I view the rendered "<element>"

Then it should be easy to understand the purpose of each link from its text alone

Scenario Outline: The "Previous" and "Next" links include the term "page" in their accessible name

When I inspect "<element>" in the Accessibility Tree

Then its accessible name should be "<name>"

Scenario Outline: Each link is activated on the "up" event, not on the "down" event

When I press the mouse down on "<element>"

Then it should NOT navigate to a new page

Scenario Outline: Each link has a target area size and 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

Scenario Outline: Each link has a target area size and spacing 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