Research request: Tags

[armenos]

Research request: Tags

Has anyone time to review this code about tags
@dgt41 needs requirements for this functionality
Can we do a research on this?

https://codepen.io/dgt41/pen/YxdNpw?editors=0010

When we have tested en have done research we can make a documentation.

[zwiastunsw]

1. Add a tag only with the keyboard - OK
2. Announcing the task of creating a tag by the screen reader - OK.
3. Unfortunately, I have not found a way to remove unnecessary tags just by using the keyboard.
   In conclusion: At this moment the Tags custom-element does not meet accessibility requirements.

[dgrammatiko]

@zwiastunsw Thanks for the review, I know its not there from accessibility point of view, but that is the reason I ask you to help.
What I need in more detail is:

• this new tags element needs a way to remove tags through keyboard, what will be a good workflow for that (e.g. tab through and press delete on the selected tag?)
• There is another feature: you can drag and drop to rearrange the order of the tags (with mouse). How can this be implemented for keyboard users (I have no idea how to make drag and drop keyboard accessible, so this team needs to guide me)

Also there will be a drop down for the possible tags that are already stored in the database, but for that we will have another issue, after we finished this first part...

[zwiastunsw]

I'll try to say something tomorrow.

[zwiastunsw]

Regarding Drag and Drop you probably know these articles

• Keyboard Accessible Drag & Drop Example
• Accessible Drag and Drop Using WAI-ARIA
• Accessible Drag and Drop - why foolprof scripting is critical when using ARIA
• Sitepoint. Extend the capabilities of HTML5 drag and drop (code)
• Sitepoint. Extend the capabilities of HTML5 drag and drop (tutorial)
• AccDC Technical Style Guide - description (Drag and Drop panel)
• AccDC Technical Style Guide - demo

[dgrammatiko]

@zwiastunsw https://codepen.io/dgt41/pen/KvbbdE this is closer to what we need (keyboard support except drag and drop)

[zwiastunsw]

Yes! It is much better. Now we need to:

1. The screen reader announced the focus tag.
2. The screen reader announced the removal of the tag
3. The way to change the order of tags using the keyboard

[dgrammatiko]

@zwiastunsw any idea of what aria html markup we should to get the reader announcements?

[zwiastunsw]

I have no idea.
I have found such a rich development that can help solve problems:

• Beautiful, accessible drag and drop for lists with React.js