1 - Include the latest release in your project:
<script src="https://www.joshica.dev/releases/latest/joshica.js"></script>
2 - Apply experiences to your app by adding the ux attribute to HTML elements:
<div id="learnMoreModal" ux="modalBehavior">Modal Content</div>
3 - Refresh the user experience:
ux.refresh();
Contains logic to check the HTML Element for proper aria-label or aria-labeled-by. This experience will produce a console warning when an aria-label is missing. Use when you want to ensure aria-labels are correctly placed.
Contains logic to capture and trap keyboard focus. Mostly used with modals and dialog boxes. This experience will trap keyboard focus so that the focus cannot be moved out side of the experience.
Contains all of the functionality needed to implement a control button. Use this when you want the behavior of a button but you already have your own button styles.
Imports:
Contains all of the functionality of a "buttonBehavior" experience, but includes a button UI.
Imports:
This experience is used to register keyboard event actions.
This experience is used to register mouse event actions.
Contains all of the functionality for a standard modal. Use this when you want a container to behave like a modal and you want to style it yourself. If you would like a fully implemented modal with a UI use the "modalWidget" experience instead.
Imports:
Contains all functionality of the "modalBehavior" experience but implements a UI on top of that. If you have built your own modal and would just like to implement the functionality, use the "modalBehavior" experience.
Imports: