path

About Path

Accessibility

This component importantly changes role depending on what state it is in. If a Path comes with Stage Coaching information, this pattern lends itself perfectly to being a traditional Tab Set. As you navigate the Path Stages, it's associated content changes with it.

On the other hand, if a Path doesn't have Path Stage Coaching information, we can no longer use the Tab Set role, as we would effectively be misleading our users because each Tab has no associated content. This may lead to users trying to find absent content. In this situation, this component is much more suited to being a Listbox component.

The markup structure is identical, just some attributes change their values.

Without Coaching

• aria-orientation="horizontal" should be applied to the slds-path__nav element to indicate to the screen reader to use horizontal navigation
• aria-selected="true" should be applied to the selected Stage of the Path as you navigate through the Stages

With Coaching

• When the Path Stage Coaching is not visible, aria-expanded="false" should be set on each slds-path__link Tab
• When the Path Stage Coaching is visible, aria-expanded should be set to true
• aria-selected="true" is used to describe the currently active slds-path__link Tab, not the Stage the Path is currently set to

Keyboard Navigation

• For both with and without Path Stage Coaching variants, the following keyboard navigation applies
• left and right arrow keys move focus and selection, with aria-selected="true"

Mobile

On mobile devices, such as phones and other devices that have touch as the primary method of interaction, elements of path will have an increased size to accommodate tapping with a finger instead of the more precise mouse cursor.

Below is a live example of what to expect in that context. No code changes are needed in the Salesforce platform context as this change occurs automatically in the appropriate context. For those users not on the Salesforce platform, these modifications will occur automatically when the secondary touch stylesheet is loaded and the device has touch as the primary method of interaction.

Examples

Base

<div class="slds-path">
  <div class="slds-grid slds-path__track">
    <div class="slds-grid slds-path__scroller-container">

In a later stage

<div class="slds-path">
  <div class="slds-grid slds-path__track">
    <div class="slds-grid slds-path__scroller-container">

With different stage selected

<div class="slds-path">
  <div class="slds-grid slds-path__track">
    <div class="slds-grid slds-path__scroller-container">

With visible tooltip

<div class="slds-path">
  <div class="slds-grid slds-path__track">
    <div class="slds-grid slds-path__scroller-container">

With coaching available

<div class="slds-path slds-path_has-coaching">
  <div class="slds-grid slds-path__track">
    <div class="slds-grid slds-path__scroller-container">

With different stage selected - with coaching

<div class="slds-path slds-path_has-coaching slds-is-expanded">
  <div class="slds-grid slds-path__track">
    <div class="slds-grid slds-path__scroller-container">

Lost

<div class="slds-path">
  <div class="slds-grid slds-path__track">
    <div class="slds-grid slds-path__scroller-container">

Won

<div class="slds-path">
  <div class="slds-grid slds-path__track">
    <div class="slds-grid slds-path__scroller-container">

Path with overflow

<div class="slds-path">
  <div class="slds-grid slds-path__track slds-has-overflow">
    <div class="slds-grid slds-path__scroller-container">

Layout overrides

When the Path needs to be placed in a more narrow column on desktop (between 360px and 564px) the class .slds-region_small should be placed on the container so it can adapt. If the container is between 565px and 1280px, the class .slds-region_medium should be applied.

Medium layout

With the class .slds-region_medium applied to the container.

<div class="slds-region_medium" style="width:700px">
  <div class="slds-path">
    <div class="slds-grid slds-path__track">

Medium layout with coaching

With the class .slds-region_medium applied to the container.

<div class="slds-region_medium" style="width:700px">
  <div class="slds-path slds-path_has-coaching slds-is-expanded">
    <div class="slds-grid slds-path__track slds-has-overflow">

Small layout

With the class .slds-region_small applied to the container.

<div class="slds-region_small" style="width:360px">
  <div class="slds-path slds-path_has-coaching slds-is-expanded">
    <div class="slds-grid slds-path__track slds-has-overflow">