Introducing accessibility support

[ygongdev]

Hi @jgwhite and other contributors,

We're currently using ember-sortable at my company. As you may know, ember-sortable does not provide an adequate amount of built-in a11y support. Because of this, I prototyped a drag-drop MVP with similar API as ember-sortable that comes with built-in a11y support. The main goals achieved here was to:

• Minimize the need for consumer to implement a11y for the addon on their own, e.g keyboard navigation, screen reader announcement, ability to cancel/submit selections via keyboard, focus management, etc.
• Provide a cleaner API interface and component architecture, e.g yielding a handle instead of passing of as selector
• Adoption of the modern ember test framework, e.g qunit , assert.dom, @ember/test-helpers, etc.

I would love to incorporate these ideas into ember-sortable. If interested, I will be more than happy to share my architecture and the proposed a11y solution. Just let me know!

[jgwhite]

Hi @ygongdev. I think I speak for everyone when I say this is super exciting and we definitely want to incorporate your ideas.

The challenge, as ever, will be adding these changes in incrementally and preserving backwards compatibility where possible.

@H1D has also been doing some great work in this area, starting with #238. We realized after merging #238 that any changes to the interface that we yield as going to be a breaking change but that maybe now is a good time for a v2. Unfortunately, I haven’t been able to dedicate the time required to steward the various changes required for v2 (sorry @H1D!). However, may this will prove to be a blessing in disguise as we can incorporate ideas from both sides into the v2 API.

I think the best next step might be to arrange a call to demo the proposed changes and write down a solid plan for v2.

@ygongdev, @H1D if this sounds good, please let me know your respective timezones and preferred time of day for such calls.

@fivetanley I’m probably gonna need your help to make this happen 🙏

[H1D]

Hi! My Timezone is GMT +3 Probably fastest way to agree on time is to use https://doodle.com?

[ygongdev]

@jgwhite, @H1D Awesome, I'm looking forward to this! My timezone is GMT -7. I'm ok with doodle.

238 looks awesome and looks like the architecture that I have in mind as well :)

Here's some additional details to demonstrate what I want to bring to you guys, which we can dive into more details in our meeting.

Here's a vanilla JS codepen demo of what kind of a11y support I'm expecting to bring into. Shoutout to the awesome owner, Andrew Lee. https://codepen.io/drewlee/project/full/XWNLeE

In essence, I implemented an Ember prototype embracing all of its a11y features. Sample demo:

Sample component invocation:

      {{#drag-drop::draggable-group
        onSubmit=(action onSubmit)
        modelGroup=modelGroup
        onDragStart=(action onDragStart)
        onDragEnd=(action onDragEnd)
        itemName=itemName
        as |group|
      }}
        {{#each group.modelGroup as |singleModel index|}}
          {{#group.item
            model=singleModel
            index=index
            as |item|
          }
            {{#item.handle}}
              Handle
            {{/item.handle}}
          {{/group.item}}
        {{/each}}
      {{/drag-drop::draggable-group}}

[jgwhite]

@ygongdev I just had a play with the codepen. The keyboard control is awesome and the feedback you get via VoiceOver is absolutely amazing.

[jgwhite]

I’ve created a Doodle poll: https://doodle.com/poll/b8yuzdy29qh8kp2x

Hopefully we can find a slot that works.

[jgwhite]

Thanks for voting. Just sent out a calendar invite.

[ygongdev]

All the a11y support has been added. Will be working on chores, upgrades, updating documentation and creating migration doc to get ready for the new release!