a11y and i18n: Simpler API for customising/translating screen reader instructions

[diondiondion]

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.

[sandroLT]

+1 for this.