Skip to content

Conversation

@SimonBrazell
Copy link

@SimonBrazell SimonBrazell commented Apr 22, 2025

This change adds a new option - keyboardAccessible, which makes the editor buttons respond to keyboard inputs (e.g. tab, enter), helping it to comply with accessibility requirements.

This change addresses the following issues:

  • Keyboard focus could not be moved to the editor buttons as each button contained the attribute tabindex="-1".

100

  • The tab order of the dropdown menu items was incorrect, for example focus was not moved to the dropdown menu items after the user activates the associated button and then hit tab, it would instead focus the next button along (ordered list in the example below) and not hit the dropdown until later. This was caused by the markup for the dropdown not being placed immediately after the associated button.

101

Note - I didn't adjust the project's styles in this PR, but did notice that there is no visible change to the dropdown items when they are focused, I addressed this in our own styles but wasn't sure how you'd like to style it (colours etc.) so left it as is for now. For reference we did something like this in our own styles:

  .trumbowyg-dropdown
    // ...

    button:not(.trumbowyg-disable)
      &:focus
        outline: -webkit-focus-ring-color auto 1px
        background: $light-color

      &:hover
        background: $light-color

To test simply create an editor instance with the keyboardAccessible option passed in and then see that the buttons behave correctly when using the tab and enter keys.

$('#trumbowyg-demo').trumbowyg({ keyboardAccessible: true });

Addresses #1280 and #1101.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant