Option to disable popup and show error inline

[swashbuck]

Subject of the enhancement

It would be useful to have an alternate way to present the instruction error. Instead of a Notify popup, the instruction text could be highlighted with an icon / color and an assertive aria-live announcement could be made. An option like _showErrorInline or _disablePopup could handle this.

Interestingly, there is already an .icon element inside of .component__instruction that could be used to show an error icon.

Your environment

• FW 5.41.3
• Instruction Error 2.0.3

Screenshots

[oliverfoster]

Can you explain how you expect the reading and focus order to run?

[swashbuck]

Can you explain how you expect the reading and focus order to run?

One idea would be to keep the focus on the button that's announced as dimmed/disabled. Then, have the aria-live region read the instruction text? That way, the user doesn't lose their place in the flow.

[oliverfoster]

Could you mock it up and give it to Kirsty to test and critique?

Personally, I think going back to the proposed style, which is what we had before the button was disabled permanently, is really not a great idea. Why do you think it would be a good idea?

Concerns:
I imagine you'll need to know how aria-live regions work when initially injected and then updated or when subsequently added to an existing element.

Red will not be enough for the instruction text, it will also need to be emboldened I imagine. You'll need to think about the pros and cons for each user group, sighted users will not see off screen instruction text for a long question component on a short screen, etc etc

You'll need to think about how to update the styling and icon without editing the DOM directly but instead using the model and react template.

It should probably be part of instructionError rather than a core change so that we can test it out properly.

[github-actions]

🎉 This issue has been resolved in version 2.1.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀