Add a11y/test labels to drop zones in the preview

Created on 12 August 2025, 4 days ago

Overview

It's hard to write tests for drag and drop because the drop zones don't have stable classNames nor any kind of label to select them by.

Proposed resolution

On dropzones add user friendly labels describing the position of items dropped into them

User interface changes

πŸ“Œ Task
Status

Active

Version

1.0

Component

User interface

Created by

πŸ‡¬πŸ‡§United Kingdom jessebaker

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @jessebaker
  • @jessebaker opened merge request.
  • πŸ‡¬πŸ‡§United Kingdom jessebaker
  • πŸ‡¬πŸ‡§United Kingdom jessebaker
  • πŸ‡ΊπŸ‡ΈUnited States bnjmnm Ann Arbor, MI

    This approach doesn't seem ideal for screenreader users, as each component being conveyed will now begins/ends with drop zone labels in all situations - not just when they are adding/moving components in the layout

    The Github blog has a good writeup on how they approached Drag and Drop. It's not something we'd need to follow exactly, but it showcases several things we should consider.

    One part that stands out is the form used to add/move items without drag and drop:

    XB probably needs something like this as an accessible alternative for users unable to Drag and Drop. Although that should be done in another issue, it's implementation would likely require drop targets to have attributes with information similar to what was suggested here.
    That's a long way of saying:
    Lets not overwhelm users by using aria-label, but instead use custom attributes, and perhaps have dedicated before and after attributes that can be used by a future "position this component in layout" form

Production build 0.71.5 2024