Skip to content

[Accessibility] StepList should include interactive example with links #215

@majornista

Description

@majornista

Expected Behavior

StepList should provide an example that follows WAI tutorial recommendation for Using a Step by Step indicator.

Actual Behavior

StepList only shows static examples.
Does not have example where current step receives keyboard focus :focus-within or .is-focused on a descendant link.
Tooltip will not display on focus.

Browser name/version/os (ie Chrome Version 62.0.3202.94 (Official Build) (64-bit) MacOS)

Google Chrome Version 75.0.3770.100 (Official Build) (64-bit)

Spectrum-CSS version

v 2.13.0

Sample Code that illustrates the problem

  /* Interactivity Styles */
  &.spectrum-Steplist--interactive {
    .spectrum-Steplist-item {
      /* Step Focused */
      &:focus {
        .spectrum-Steplist-marker {
          background-color: var(--spectrum-steplist-current-marker-color-key-focus)
        }
      }
    }
  }

Should be:

  /* Interactivity Styles */
  &.spectrum-Steplist--interactive {
    .spectrum-Steplist-item {
      /* Step Focused */
      &:focus,
      &:focus-within,
      &.is-focused {
        .spectrum-Steplist-marker {
          background-color: var(--spectrum-steplist-current-marker-color-key-focus)
        }
      }
    }
  }

Metadata

Metadata

Assignees

No one assigned

    Labels

    documentationBecause documentation is important and shouldn't be broken

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions