Accessibility!

[ebidel]

Found this awesome library from the Frontend Focus newsletter. Since it's going to get a lot of attention, I'd love to see driver.js promote a11y best practices!

Currently, the demos on https://driverjs.com/ do not follow screen reader best practices. Namely, some of the issues I saw:

• "modal" content is not announced when the product tour elements appear
• screen reader shouuld announce the content as a new new step is highlighted
• keyboard/screen reader focus is not trapped within the tour container. e.g. users can still tab behind the page.

Some modern web apis that can help:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert

[kamranahmedse]

Thank you @ebidel I have implemented the focus trapping and ARIA attributes in 1.1.0. Update deployed at driverjs.com.

PS, I still need to improve the website CSS to better highlight the focus/hover and relevant states. But the library should be fine now. Let me know if you have any further feedback! 🙏