Comments (11)
svinkle
commented on May 6, 2024
As mentioned over in a11yproject/a11yproject.com#513 (comment), here are a few instructions/audible cues that would be beneficial for people who rely on screen readers:
- How to pick up and put down items
- Which order items are now in after dropping
- How many items there are in total
- Semantic meaning for each item (currently announced as, "link")
I just did a quick pass to check things over with Chrome + VoiceOver on maxOS. This needs to be tested with other browser/screen reader combinations as well.
Time permitting, I'd like to jump in and conduct more testing and dive into the code to see where these types of announcements and semantics could be added.
All that said, the keyboard support is really fantastic! 👍
from react-beautiful-dnd.
alexreardon
commented on May 6, 2024
Thanks for looking into this @svinkle !!
from react-beautiful-dnd.
alexreardon
commented on May 6, 2024
Super relevant: https://medium.com/salesforce-ux/4-major-patterns-for-accessible-drag-and-drop-1d43f64ebf09
from react-beautiful-dnd.
alexreardon
commented on May 6, 2024
Thanks @seancurtis for the link!
from react-beautiful-dnd.
alexreardon
commented on May 6, 2024
Another good article: https://www.smashingmagazine.com/2018/01/dragon-drop-accessible-list-reordering
from react-beautiful-dnd.
alexreardon
commented on May 6, 2024
I am looking into api options for this. Currently:
onDragStart(start: DragStart, {announce: (message) => void})
where you call announce with your message. If you do not call it then we use a default message
or
onDragStart(start: DragStart): string
We use the string you return from the handler as the message. If not is returned then we use a default. This is clean, but it might be a bit confusing to return a string from an event handler
from react-beautiful-dnd.
alexreardon
commented on May 6, 2024
@svinkle this will be shipping in v5 👍
from react-beautiful-dnd.
svinkle
commented on May 6, 2024
@alexreardon Awesome! Any method available where I could test the work being done so far?
from react-beautiful-dnd.
alexreardon
commented on May 6, 2024
We are publishing to npm tomorrow
…On Thu, 22 Feb 2018 at 7:29 pm, Scott Vinkle ***@***.***> wrote:
@alexreardon <https://github.com/alexreardon> Awesome! Any method
available where I could test the work being done so far?
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#7 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/ACFN7fL-1EIrKru5j1FhpeRNsFGkBNhtks5tXSWDgaJpZM4Oy8QC>
.
from react-beautiful-dnd.
alexreardon
commented on May 6, 2024
But the example storybook website has it now
…On Thu, 22 Feb 2018 at 8:04 pm, Alex Reardon ***@***.***> wrote:
We are publishing to npm tomorrow
On Thu, 22 Feb 2018 at 7:29 pm, Scott Vinkle ***@***.***>
wrote:
> @alexreardon <https://github.com/alexreardon> Awesome! Any method
> available where I could test the work being done so far?
>
> —
> You are receiving this because you were mentioned.
>
>
> Reply to this email directly, view it on GitHub
> <#7 (comment)>,
> or mute the thread
> <https://github.com/notifications/unsubscribe-auth/ACFN7fL-1EIrKru5j1FhpeRNsFGkBNhtks5tXSWDgaJpZM4Oy8QC>
> .
>
from react-beautiful-dnd.
alexreardon
commented on May 6, 2024
This has been completed as a part of #321
It feels (and sounds) great!
from react-beautiful-dnd.
Related Issues (20)
- Inplace placeholder HOT 3
- Doesent work on nextjs 14 HOT 3
- react-redux.min.js:1 Uncaught TypeError: Cannot read properties of undefined (reading 'bindActionCreators')
- Excellent effect
- Trouble with Antd Menu HOT 2
- What is the use of mode virtual
- Cards overlapping when I drag react-beautiful-dnd HOT 3
- Change the position of the Session Card that is being dragged to the right of the mouse
- When dragging the item, the element's size and the drop area are not being recognized at their respective sizes. HOT 2
- Cannot scroll to the bottom of the list when working with react-window VariableSizeList
- Connect(Droppable): Support for defaultProps will be removed from memo components in a future major release. Use JavaScript default parameters instead.
- Nested horizontal dropzone doesn't work correctly
- where is the demo code and API? HOT 1
- The ui gets distorted when I drag and drop.
- Want to disable nesting tree for some nodes
- Drag and drop not working new window created through createPortal
- Tasks go on top of column title after dragging
- Setting position issue -- When the page is scroll with position: Sticky, The drag component is not positioning properly.
- Droppable should only accept Draggables of same type ... but it doesn't work HOT 1
- Dragging Item while scrolling is not staying in the position with Tailwind CSS
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-beautiful-dnd.