WAI-ARIA / Keyboard support

[pimboden]

Hello.
Is there any plans for adding keyboard and/ or WAI-ARIA support for this wizard?
Or is there a way I can already add them via some template I don't know yet?

[cristijora]

Hi @pimboden For what exactly do you need keyboard support ?
Regarding your question: Yes, I would like to do it soon (in the next upcoming weeks)

[pimboden]

Hi @cristijora
Well just basic support , like back and next button click.

[cristijora]

@pimboden Some parts should be possible to make with a bit of styling.
https://jsfiddle.net/bt5dhqtf/1166/
Press tab and the buttons will focus. Then you can press enter to trigger them

I have to read a bit more about aria support. If you can provide any help, it would be great :)

[pimboden]

Well I would keep it simple...
I added some aria-tags and some roles that would make sense for me...

<div class="wizard-header">
	<h4 class="wizard-title">Awesome Wizard</h4> <p class="category">Split a complicated flow in multiple steps</p>
</div>
<div class="wizard-navigation">
	<div class="wizard-progress-with-circle">
		<div class="wizard-progress-bar" style="background-color: rgb(52, 152, 219); color: rgb(52, 152, 219); width: 50%;"></div>
	</div>
	<ul class="wizard-nav wizard-nav-pills" **role="tablist"**>
		<li id="step1" class="" **role="tab"** step-size="md" **aria-labelledby="stepTile1" aria-selected="false" aria-disabled="false"**>
			<a>
				<div class="wizard-icon-circle md checked square_shape" style="border-color: rgb(52, 152, 219);">
					<i class="wizard-icon ti-user"></i>
				</div>
				<span  **id="stepTile1"** class="stepTitle" style="">
        Personal details
				</span>
			</a>
		</li>
		<li id="step2" **role="tab"** class="active" step-size="md" **aria-labelledby="stepTile2" aria-selected="true"  aria-disabled="false"**>
			<a>
				<div class="wizard-icon-circle md checked square_shape" style="border-color: rgb(52, 152, 219);">
					<div class="wizard-icon-container square_shape" style="background-color: rgb(52, 152, 219);">
						<i class="wizard-icon ti-settings"></i>
					</div>
				</div>
				<span **id="stepTile2"** class="stepTitle active" style="color: rgb(52, 152, 219);">
        Additional Info
				</span>
			</a>
		</li>
		<li id="step3" **role="tab"** class="" step-size="md"  **aria-labelledby="stepTile3" aria-selected="false" aria-disabled="true"**>
			<a>
				<div class="wizard-icon-circle md square_shape">
					<i class="wizard-icon ti-check"></i>
				</div>
				<span  **id="stepTile3"** class="stepTitle">
        Last step
				</span>
			</a>
		</li>
	</ul>
	<div class="wizard-tab-content">
		<div class="wizard-tab-container" style="display: none;" **role="tabpanel" aria-hidden="true" aria-labelledby="stepTile1"**>
          My first tab content
		</div>
		<div class="wizard-tab-container" style="" **role="tabpanel" aria-hidden="false" aria-labelledby="stepTile2"**>
          My second tab content
		</div>
		<div class="wizard-tab-container" style="display: none;" **role="tabpanel" aria-hidden="true" aria-labelledby="stepTile3"**>
          Yuhuuu! This seems pretty damn simple
		</div>
	</div>
</div>
<div class="wizard-card-footer clearfix">
	<div class="wizard-footer-left">
		<span>
			<button type="button" class="wizard-btn btn-fill wizard-btn-wd" style="background-color: rgb(52, 152, 219); border-color: rgb(52, 152, 219); color: white;">
          Back
			</button>
		</span>
	</div>
	<div class="wizard-footer-right">
		<span>
			<button type="button" class="wizard-btn btn-fill wizard-btn-wd" style="background-color: rgb(52, 152, 219); border-color: rgb(52, 152, 219); color: white;">
        Next
			</button>
		</span>
	</div>
</div>

I added ** where I would put some aria- tags.. let me know

[cristijora]

@pimboden This is pretty much done. You can check it on this example
https://jsfiddle.net/CristiJ/bt5dhqtf/286/

You should be able to navigate between steps with Tab and arrow keys. Pressing enter on one of the steps will try to navigate to the corresponding step and validate it before. I also added focus support for the buttons (prev, next, finish)

This is not published on npm yet. Let me know if I missed something.

[pimboden]

Hello @cristijora . Looking good..

The only "problem" I see is the aria-labelledby, as far as I know It should have the Id of the Label or element that has its title . That's why in my sample I introduced Id's id="stepTilex" to the spans.
I see you introduced the Id in the tabPanel itself, but I see 2 problems there: The id with spaces is not correct html and this is not really the element that has the title.

Are you planing in some future extend this a bit more with aria-selected="true" aria-disabled="false" props on the tabs? and aria-hidden="true" in the tabpanels?

I know I sound a bit greedy.. sorry. ;-)
Thanks a lot for doing it so fast!

[cristijora]

Thanks for the feedback.
Regarding your last question, tab panels already have aria hidden attributes.
Tabs already have aria-selected="true" for the current selected tab but the aria-disabled property is not fully working.

Regarding your first question, I will re-check it. When it comes to id's, I use the tab title. Will have to trim spaces.

PS: It's not greedy since I'm not the most familiar with this accessibility part and if it's done, it should be done right so it's ok.

[pimboden]

Please let me know when you're done so I'll give it a try with the screen reader.

[cristijora]

@pimboden As a side question, I'm thinking of disabling the possibility to navigate to a not visited step.
Currently if you start a new wizard, you can't really click the steps until they are visited through next button.
I allowed doing this in the current implementation to support navigation through steps but this will have some side effects/inconsistencies and I'm thinking to leave the behavior as it was which means.

1. Steps can be focused/navigable only if you visited them at least once.
2. You can go to the next step only be clicking/press enter on the next button.

Let me know if that's a big issue for you.

[pimboden]

Hello @cristijora .
I actually am happy with that behavior (not being able to navigate to a not visited step). I mean, It is a Wizard... for the behavior of supporting navigation through steps , I would rather use tabs (I saw you also have a tab component :) ... haven't used it though)

[Donaldini]

I've found an 'issue' that might be related, if not I can create a separate issue.

The wizard navigation links have a css class that put a pointer cursor on it when hovered.
However this is default behaviour for the <a> tag IF used properly.

.vue-form-wizard .wizard-nav-pills>li>a:focus,
.vue-form-wizard .wizard-nav-pills>li>a:hover {
    outline: 0 !important;
    background-color: transparent;
    cursor: pointer;      <-------
    color: rgba(0, 0, 0, .2);
}

The reason I found this is because the pointer cursor is also being shown on the items that are not clickable. Therefore they shouldn't have this cursor.

I saw that the <a> tags are being used without an href. This causes the cursor to change to a default cursor instead of a pointer. I guess this is the reason the css was added?

So it might be better to add an href="#STEPNAME" and then escape the behaviour through javascript (to prevent the page from scrolling up). I suppose the actual onClicks are being handled through javascript?

This way your html is more valid, you don't need to explicitly change the cursor property AND users don't get the feeling the should be able to click on the nav items that are not active.