Make the droppable element accesible

[lifenautjoe]

As pointed out here , the droppable element is not made "accesible".

While it could be argued that this should be the responsibility of the developer using the library to add the necessary HTML attributes to the element as to make it accesible, it's always nice to save people some time.

[lifenautjoe]

Having read the ARIA Specification for buttons I have concluded that this indeed should be an effort from the developer as it involves attributes which require values dependent on the application like aria-label and aria-describedby.

The library adding some of the tags required for accessibility such as tabindex and role would cause more harm to users by making them believe it's everything that is required to make the item accesible.

To balance this decision, I will create a section on the README explaining how to make the droppable elements accesible.

[lifenautjoe]

As pointed out by another user, might be a good idea to have the basic behaviour of focus + enter opening the file selector. Will look into how can this be done.

Edit: This means having role=button, tabindex=0, and an onkeydown event handler.

[lifenautjoe]

I have prototyped the following code to make sure the keydown event doesn't interfere with the events of the items inside the droppable zone.

function onKeyDown(e) {
    console.log('Key pressed with code' + e.keyCode);
    if (e.keyCode === 13) {
        console.log('Should open file picker');
    }
}

droppableItem.addEventListener('focus', () => {
    console.log('Adding onkeydown event');
    droppableItem.addEventListener('keydown', onKeyDown);
});

droppableItem.addEventListener('focusout', () => {
    console.log('Removing onkeydown event');
    droppableItem.removeEventListener('keydown', onKeyDown);
});

This together with the previously mentioned attributes work like a charm.

[lifenautjoe]

The progress of this story can be tracked on this branch

[lifenautjoe]

Fixed with #7 and released on #8

[third774]

What are your thoughts on encouraging consumers of this library to supply the appropriate aria-label and aria-describedby attributes by throwing in some warnings if they do not provide them?

[lifenautjoe]

Hi Kevin! (@third774) I'm all up for encouraging building a more accesible web 🎉!

My only concern would be having to add some extra code in there to allow people to disable the warnings (if they really don't care about it).

I'll give it some thought and meanwhile let's see if we can get some other thoughts on the matter here too!

What I can do for now is add it on the readme as an accessibility recommendation.

Cheers and thanks for the comment!