atlassian
a11y and i18n: Simpler API for customising/translating screen reader instructions
Description
Customising the library's screen reader instructions is pretty complex and requires a detailed understanding of the library's API and inner workings (see screen reader guide). It also requires hooking into the onDrag[Start|Update|End] callbacks which can easily get messy, and requires re-implementing existing functionality (a hidden text container for the item descriptions).
It would be nice if it was possible to:
- easily review all built-in screen reader instructions
- and more importantly, easily replace them with customised/localised ones.
E.g., the DragDropContext component could have a a11yMessages prop which could be an object of functions that each return a specific screen reader message:
<DragDropContext
a11yMessages={{
itemDescription: () => 'Press space bar to start a drag. [...]',
dragStart: ({startPosition}) => `You have lifted an item in position ${startPosition}.`,
dragUpdateSuccess: ({startPosition, endPosition}) => `You have moved the item from position ${startPosition} to position ${endPosition}`,
dragUpdateNoTarget: () => `You are currently not dragging over a droppable area`,
// ...
}}
/>
To make this even easier, the information passed to each message function could be tailored to what's needed for UI copy, e.g. the index could be passed as a position instead of a 0-based index.
