Keyboard use for component

[bryanjonker-illinois]

Great component!

However, I am concerned about keyboard accessibility. If someone is restricted to keyboard use only (including screen readers), they cannot interact with the buttons on the screen, and they can fire buttons outside of the dialog box by accident.

See https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal for how the interactions should work.

I ended up tweaking a local copy to meet these guidelines -- let me know if you want to incorporate these changes or handle it yourself. Thanks.

[xaddict]

Agreed.

Tingle misses some Accessibility enhancements.

For example, dialogs/modals/alert pop-ups should trap focus so users can close the modal without having to tab through all the links on the page that opened the modal.

Reading material:
https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/
https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/

https://www.w3.org/WAI/ARIA/apg/patterns/
https://www.w3.org/TR/wai-aria-practices/#dialog_modal
https://www.w3.org/TR/wai-aria-practices/#alertdialog
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_dialog_role

[bryanjonker-illinois]

I ended up doing a modified version, which adds role and aria-modal to alert screen readers that this is a modal dialog, and traps focus. This isn't perfect, but gets it closer to WCAG standards. See "//college of education updates" in the gist below.

https://gist.github.com/bryanjonker-illinois/a25cdd42f3f44b07d20f041d58892b76

[MaxwellKeeble]

@bryanjonker-illinois solution was great - I think it should be merged.

In the meantime you can also add it to a normal tingle via the onOpen.

function trapInput(modal) {
        var modal = document.getElementsByClassName('tingle-modal')[0];
        if (modal.lastElementChild.querySelectorAll('button, [href], input, [tabindex="0"], [tabindex="-1"]').length > 0) {
          modal.lastElementChild.querySelectorAll('button, [href], input, [tabindex="0"], [tabindex="-1"]')[0].focus();
          var lastItem = modal.lastElementChild.querySelectorAll('button, [href], input, [tabindex="0"], [tabindex="-1"]')[modal.lastElementChild.querySelectorAll('button, [href], input, [tabindex="0"], [tabindex="-1"]').length - 1];
          lastItem.addEventListener('keydown', function (e) {
            if (e.code == "Tab" && !e.shiftKey) {
              document.querySelector('.tingle-modal__close').focus();
              event.preventDefault();
              return false;
            }
          })
        }
      }

          onOpen: function () {
            // Sorry for the jQuery below, you could just use setAttribute of course.
            $('.tingle-modal-box').attr('role', 'dialog');
            $('.tingle-modal-box').attr('aria-modal', true);
            trapInput();
          },