fix(#2408): form-stepper incomplete rendered as partially complete

[syedszeeshan]

Docs PR: GovAlta/ui-components-docs#362

Before (the change)

After (the change)

Make sure that you've checked the boxes below before you submit the PR

• I have read and followed the setup steps
• I have created necessary unit tests
• I have tested the functionality in both React and Angular.

Steps needed to test

[vanessatran-ddi]

#2408 (comment)
QA passed.

[vanessatran-ddi]

Hello @syedszeeshan can you add unit test or browser test for status not-started and the label has been changed for incomplete from Partially Complete to Incomplete which I think we should add a test to cover that.

[syedszeeshan]

@vanessatran-ddi
I have added tests as requested.

[ArakTaiRoth]

Getting some weird things happening in NVDA.
Are these things being said with VoiceOver @vanessatran-ddi @twjeffery ?

The main issues are:

• check box not checked - after every single step click
• It also seems to repeat the step name, but for step 3 and step 4 it added something, "incomplete" and "4", no idea why
• If I click the Previous and/or Next button nothing about the statuses is read (is this okay @twjeffery?)

[vanessatran-ddi]

Getting some weird things happening in NVDA. Are these things being said with VoiceOver @vanessatran-ddi @twjeffery ?

The main issues are:

• check box not checked - after every single step click
• It also seems to repeat the step name, but for step 3 and step 4 it added something, "incomplete" and "4", no idea why
• If I click the Previous and/or Next button nothing about the statuses is read (is this okay @twjeffery?)

@ArakTaiRoth Yes for VoiceOver it is similar to NVDA

It is a good catch! I didn't notice it when I tested. However, on our production (design system website) it is behaving like that too

Included the "check box not checked" and "click the Previous and/or Next button" so I don't know if it is in the scope of this ticket.

[twjeffery]

@syedszeeshan Preferred text read out:

Step 2 of 4, Step name: Employment history, Status: Complete

[syedszeeshan]

I have tried following, in FormStep.svelte

For input
-role=presentation OR aria-hidden=true
-aria-disabled = true (hardcoded)
-move aria-label from label to input

For label
-removed for=text
-removed tabindex
-move aria-label from label to input

and a few combinations of above.

No matter what, the part "checkbox checked/not checked" is always pronounced by the screen reader...probably b/c of the type checkbox

UPDATE:
After discussion with Chris, replacing input type="checkbox" with button and adjust the rest of the code to keep the same behavior, and adjust the tests also.

[syedszeeshan]

[vanessatran-ddi]

QA on 27th May 2025:
There is 1 case for Next/Previous button, not work for NVDA and VoiceOver.

• Focus on the Next button using a keyboard
• Press Enter
• Step is changed but no screen reader announcing
• Focus on the Previous button by pressing Shift + Tab
• Enter
• Screen reader announce for the previous button
  Sometimes it announces by using a keyboard and sometimes it doesn't, especially when the button just newly focus and first time press enter.

[ArakTaiRoth]

@chrisolsen This PR is ready to be merged

[tzuge]

🎉 This PR is included in version 1.5.0-alpha.4 🎉

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[tzuge]

🎉 This PR is included in version 4.5.0-alpha.4 🎉

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[tzuge]

🎉 This PR is included in version 1.35.0-alpha.2 🎉

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[tzuge]

🎉 This PR is included in version 6.5.0-alpha.4 🎉

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[tzuge]

🎉 This PR is included in version 1.5.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[tzuge]

🎉 This PR is included in version 1.35.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[tzuge]

🎉 This PR is included in version 4.5.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[tzuge]

🎉 This PR is included in version 6.5.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀