Keyboard Accessibility Issues

[CarleneCannon-Conner]

Hi there!

We are making use of you lib, react-md-editor. Thank you for all your hard work on this, it is a very useful library!

In an effort to make our application more accessible I have found that I am unable to let the user 'escape' the textarea in your MDEditor component when it gains focus through tabbing. It seems the user is unable to 'escape' this element via the keyboard with the 'Tab' key, so focus can never move on to the next element on the page.

One solution may be to edit the existing handleKeyDown() function in src/components/TextArea/handleKeyDown.tsx Like this:

export default function handleKeyDown(
  e: KeyboardEvent | React.KeyboardEvent<HTMLTextAreaElement>,
  tabSize: number = 2,
  disableTab: boolean = false
) {
  ...
  /**
   * `9` - `Tab`
   */
  if (!disableTab && e.code && e.code.toLowerCase() === 'tab') {
...
}

So that it expects a second parameter with a name like disableTab. This boolean could be set to false by default as not to break existing functionality. If it is set to true, simply don't fall into the existing if statement that highjacks the default 'tab' behaviour. This allows us the option of having the 'Tab' key preform it's default behaviour. I think this param can be passed as a prop the same way that tabSize currently is.

Another option may be to instead, have the existing tab behaviour triggered via a different key or combination of keys. Freeing up the Tab key to do its default behaviour. But this would break existing behaviour for anyone currently using your library.

Please let me know your thoughts on this and if you would like me to create a PR to demonstrate more clearly what I mean.

Cheers

Carlene 😄

[jaywcjlove]

@CarleneCannon-Conner This is very good idea, welcome to submit a PR.

[CarleneCannon-Conner]

Hi @jaywcjlove have created a pull request for you #314. I hope it's suitable 😄

[jaywcjlove]

@CarleneCannon-Conner thx! Upgrade v3.9.0.

[CarleneCannon-Conner]

Great @jaywcjlove! Thanks for the merge 😄 . This resolves the issue I was having.