Breadcrumbs test scenarios

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

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

Scenario Outline: If text characters are used as visual separators between breadcrumb items to indicate hierarchy, they are not conveyed to screen readers

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

And it has the pseudo element "::before"

Then its accessible name and visible text should be identical

Scenario Outline: The order of content in the HTML matches the reading order

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 view the rendered "<element>"

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 DOM

Then it should have an accessible name

And its accessible name should be "<name>"

Scenario Outline: Each link has the correct accessible role

When I inspect "<element>" in the DOM

Then it should have an accessible role of "<role>"

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

When I inspect "<element>" in the DOM

Then it should use the tag "a"

And it should have the attribute "<attribute>" with the value "<value>"

Scenario Outline: An ordered list is used to provide structure for the breadcrumb items

When I inspect "<element>" in the DOM

Then it should use the tag "<tag>"

Scenario Outline: Links are identifiable without relying on colour alone

When I view the rendered "<element>"

Then it should be visually identifiable as a link without relying on colour alone

Scenario Outline: Each link 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

Scenario Outline: Darkmode: Each link 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

Scenario Outline: Visual separators between breadcrumb items have a minimum contrast ratio of 3:1 against the background

When I view the rendered "<element>"

And it has the pseudo element "::before"

Then its pseudo element should have a contrast ratio of '3:1' against its background

Scenario Outline: Darkmode: Visual separators between breadcrumb items have a minimum contrast ratio of 3:1 against the background

When I view the rendered "<element>"

And I enable "dark" mode

And it has the pseudo element "::before"

Then its pseudo element should have a contrast ratio of '3:1' against its background

Scenario Outline: Each link has a contrast ratio of least 7:1

When I view the rendered "<element>"

Then its text should have a contrast ratio of '7:1' against its background

Scenario Outline: Darkmode: Each link has a contrast ratio of 7:1

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

Scenario Outline: Receiving focus does not initiate a change of context

When I focus "<element>" using a keyboard

Then it should NOT navigate to a new page

Scenario Outline: Each link is focusable using the Tab key

When I focus "<element>"

And I press the 'TAB' key once

Then "<next element>" should be focused

Scenario Outline: Each link is clickable using the Enter key

When I focus "<element>"

And I press the 'ENTER' key once

Then it should navigate to a new page

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: Keyboard focus indicator is visible and discernible

When I focus "<element>" using a keyboard

Then it should have a visible focus indicator

Scenario Outline: Each link 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: Focus 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: Each link 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 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: Each link is underlined so it looks like a typical link, apart from the last item if it represents the current page

When I view the rendered "<element>"

Then it should be visually identifiable as a link without relying on colour alone

Scenario Outline: Visual separators are used between breadcrumb items to indicate hierarchy

When I inspect "<element>" in the DOM

Then it should have a visible separator between elements using a '::before' element

Scenario Outline: The breadcrumb links are displayed in a row below the primary navigation, left-aligned, and with the current page the last element in the list

When I inspect "<element>" in the DOM

Then it is "<aligned>" aligned visually to the "<previous>" element

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