Demo

Initial setup

Create any div or section with a specific ID or class. Then mention the element to the wrapper class. For an example check below code snippet. 

    
    
    <div class='progress_container'></div>

Configuration

All sort of customization need to be passed as an Object. Following are the available settings which can be customized

Key name Type Value
data Array of objects This key expects an object as item of array. That object contains following keys
  • name - This is a required key and accept string only. This field determines the display name of step
  • status - This is a required key and accept string only. Available status are
    • active - To show active or current step
    • error - To show errorneous step
    • success - To show successfully completed step
  • link - This key is optional and accept string or URL to another page. Step name will only appear as link if this key is declared inside configuration object and valid string is passed.
SRText Object This object collects content for screen reader. All the keys inside the object are required and accept string only
  • currentStepInfo - Reads the current step description
  • error - Read more about error step
  • success - Read more about completed step
  • active - Read about active step

How to use Progress stepper component multiple times

Progress stepper can be positioned in multiple places while initiating the library. Also, multiple stepper can have different configurations as well. Below two ways, stepper can be called several times.

  • Using multiple ID

    Call wrapper class multiple times for each distinctive ID. 

        
    
    var progressOption1 = {...},
        progressOption2 = {...},

    window.addEventListener('load', function () {
        window.A11yWrapper('#progress_container1').progress(progressOption1);
        window.A11yWrapper('#progress_container2').progress(progressOption2);
    });

  • Using same class for multiple elements.

    In below example, configuration object will be assigned sequentially. First object will be assigned to first Stepper and second object will be assigned to the second Stepper. If only one configuration object is passed then both Stepper will be built upon that single configuration object. 

        
    
    var progressOption1 = {...},
        progressOption2 = {...},

    window.addEventListener('load', function () {
        window.A11yWrapper('.multiple-progress').progress(progressOption1, progressOption2);
    });

Accessibility support

Keyboard interaction

  • ESC - ESC key press will close the suggestion box and Input box will gain focus
  • TAB - Press TAB to focus the input box. Pressing TAB again would move focus to Cross (X) icon
  • RETURN/ ENTER - Pressing Enter will select the item from suggeion list
  • UP or DOWN arrow - Use these keys to navigate between suggestion list items