search

atlassian / react-beautiful-dnd

Beautiful and accessible drag and drop for lists with React
https://react-beautiful-dnd.netlify.app
Other
33.29k stars 2.53k forks source link

Feature Request - expose drag start origin (click vs. keypress) #2283

Open paulchan14 opened 3 years ago

paulchan14 commented 3 years ago

Thanks for the wonderful work y'all are doing.

I have been reading through Alex's guide to see if I need to create a custom keyboard sensor, but I'm also trying to figure if there is another way to accomplish what I'm trying to do.

For the app I'm working on, I want to have some additional styles around the Draggable IF the drag is initiated by keypress for visual keyboard users (a small hint as to how the keyboard controls work, and arrow icons to suggest the user type the arrow up/down key to reorder). For screen-reader / keyboard users, the needed directions are provided, but for visual keyboard users, there isn't currently a hint being displayed out of the box.

If the user is starting the drag via mouse click, I don't need to show this information. I'm looking for a way to determine the origin of the event (click vs keypress) so I can set the keyboard user styles if needed.

I understand that I could build out my own sensor, but I don't believe there a way to capture the origin of the event already.

Originally posted by @paulgpeterson in https://github.com/atlassian/react-beautiful-dnd/issues/40#issuecomment-884495893

aiveeKeiSoriano commented 3 years ago

I agree. I also want to do some changes if drag is coming from mouse down or another sensor. I was using a script as the other sensor.

paulchan14 commented 2 years ago

I wanted to bump this idea. Do we know if there are any plans to implement this kind of functionality? Is there any global state that something like following could be saved as and retrieved from wherever the package is being implemented?

{
     ...
     dragStartOrigin: 'click', // or 'keypress' etc.
}
paulchan14 commented 2 years ago

@danieldelcore are you able to point me in the right direction on this? I'm happy to start experimenting with a way to capture whether the drag is initiated by a keypress or click and exposing that information to the consumers, but I'm not familiar enough with this codebase yet. I'll start digging, but if you have any suggestions for where to look I would appreciate it.