diff --git a/CHANGELOG.md b/CHANGELOG.md index e740eaca2b..55d86f73f5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -38,6 +38,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ### Fixes - Make `headerMedia` visible for screen readers in `ListItem` @layershifter ([#772](https://github.com/stardust-ui/react/pull/772)) +- Cleanup for `Dropdown` examples' accessibility and added localisation example. @silviuavram ([#771](https://github.com/stardust-ui/react/pull/771)) ## [v0.18.0](https://github.com/stardust-ui/react/tree/v0.18.0) (2019-01-24) diff --git a/docs/src/examples/components/Dropdown/Types/DropdownExampleMultipleSearch.shorthand.tsx b/docs/src/examples/components/Dropdown/Types/DropdownExampleMultipleSearch.shorthand.tsx index 6aba57a1d9..6bcf2363cb 100644 --- a/docs/src/examples/components/Dropdown/Types/DropdownExampleMultipleSearch.shorthand.tsx +++ b/docs/src/examples/components/Dropdown/Types/DropdownExampleMultipleSearch.shorthand.tsx @@ -18,7 +18,6 @@ const DropdownExample = () => ( multiple search getA11ySelectionMessage={getA11ySelectionMessage} - getA11yStatusMessage={getA11yStatusMessage} noResultsMessage="We couldn't find any matches." placeholder="Start typing a name" items={inputItems} @@ -29,26 +28,4 @@ const getA11ySelectionMessage = { onAdd: item => `${item} has been selected.`, onRemove: item => `${item} has been removed.`, } - -const getA11yStatusMessage = ({ - isOpen, - itemToString, - previousResultCount, - resultCount, - selectedItem, -}) => { - if (!isOpen) { - return selectedItem ? itemToString(selectedItem) : '' - } - if (!resultCount) { - return 'No results are available.' - } - if (resultCount !== previousResultCount) { - return `${resultCount} result${ - resultCount === 1 ? ' is' : 's are' - } available, use up and down arrow keys to navigate. Press Enter key to select.` - } - return '' -} - export default DropdownExample diff --git a/docs/src/examples/components/Dropdown/Types/DropdownExampleSingleSelection.shorthand.tsx b/docs/src/examples/components/Dropdown/Types/DropdownExampleSingleSelection.shorthand.tsx index c4f046d982..cf208dda39 100644 --- a/docs/src/examples/components/Dropdown/Types/DropdownExampleSingleSelection.shorthand.tsx +++ b/docs/src/examples/components/Dropdown/Types/DropdownExampleSingleSelection.shorthand.tsx @@ -15,7 +15,6 @@ const inputItems = [ const DropdownExample = () => ( `${item} has been selected.`, }} @@ -24,25 +23,4 @@ const DropdownExample = () => ( /> ) -const getA11yStatusMessage = ({ - isOpen, - itemToString, - previousResultCount, - resultCount, - selectedItem, -}) => { - if (!isOpen) { - return selectedItem ? itemToString(selectedItem) : '' - } - if (!resultCount) { - return 'No results are available.' - } - if (resultCount !== previousResultCount) { - return `${resultCount} result${ - resultCount === 1 ? ' is' : 's are' - } available, use up and down arrow keys to navigate. Press Enter key to select.` - } - return '' -} - export default DropdownExample diff --git a/docs/src/examples/components/Dropdown/Variations/DropdownExampleMultipleSearchFluid.shorthand.tsx b/docs/src/examples/components/Dropdown/Variations/DropdownExampleMultipleSearchFluid.shorthand.tsx index 5d1de96419..2ebb415de7 100644 --- a/docs/src/examples/components/Dropdown/Variations/DropdownExampleMultipleSearchFluid.shorthand.tsx +++ b/docs/src/examples/components/Dropdown/Variations/DropdownExampleMultipleSearchFluid.shorthand.tsx @@ -16,7 +16,6 @@ const DropdownExample = () => ( `${item} has been removed.`, } -const getA11yStatusMessage = ({ - isOpen, - itemToString, - previousResultCount, - resultCount, - selectedItem, -}) => { - if (!isOpen) { - return selectedItem ? itemToString(selectedItem) : '' - } - if (!resultCount) { - return 'No results are available.' - } - if (resultCount !== previousResultCount) { - return `${resultCount} result${ - resultCount === 1 ? ' is' : 's are' - } available, use up and down arrow keys to navigate. Press Enter key to select.` - } - return '' -} - export default DropdownExample diff --git a/docs/src/examples/components/Dropdown/Variations/DropdownExampleMultipleSearchFrenchLanguage.shorthand.tsx b/docs/src/examples/components/Dropdown/Variations/DropdownExampleMultipleSearchFrenchLanguage.shorthand.tsx new file mode 100644 index 0000000000..41f971a84c --- /dev/null +++ b/docs/src/examples/components/Dropdown/Variations/DropdownExampleMultipleSearchFrenchLanguage.shorthand.tsx @@ -0,0 +1,59 @@ +import * as React from 'react' +import { Dropdown } from '@stardust-ui/react' + +const inputItems = [ + { header: 'Louis Vuitton' }, + { header: 'Coco Chanel' }, + { header: 'Napoleon Bonaparte' }, + { header: 'Zinedine Zidane' }, + { header: `Jeanne d'Arc` }, + { header: 'Honoré de Balzac' }, + { header: 'Louis XIV' }, + { header: 'Brigitte Bardot' }, + { header: 'Marion Cotillard' }, +].map(item => ({ + ...item, + icon: { + name: 'close', + 'aria-label': `Éliminer ${item.header} de la sélection.`, + }, +})) + +const DropdownExample = () => ( + +) + +const getA11yStatusMessage = ({ + isOpen, + itemToString, + previousResultCount, + resultCount, + selectedItem, +}) => { + if (!isOpen) { + return selectedItem ? itemToString(selectedItem) : '' + } + if (!resultCount) { + return `Aucun résultat trouvé.` + } + if (resultCount !== previousResultCount) { + return `${resultCount} résultat${ + resultCount === 1 ? ' est disponible' : 's sont disponibles' + }, touches fléchées ascendante et descendante pour naviguer. Appuyez sur la touche Entrée pour sélectionner.` + } + return '' +} + +const getA11ySelectionMessage = { + onAdd: item => `${item.header} a été choisi.`, + onRemove: item => `${item.header} a été éliminé.`, +} +export default DropdownExample diff --git a/docs/src/examples/components/Dropdown/Variations/DropdownExampleMultipleSearchImageAndContent.shorthand.tsx b/docs/src/examples/components/Dropdown/Variations/DropdownExampleMultipleSearchImageAndContent.shorthand.tsx index 248055b67a..1c0cf16bed 100644 --- a/docs/src/examples/components/Dropdown/Variations/DropdownExampleMultipleSearchImageAndContent.shorthand.tsx +++ b/docs/src/examples/components/Dropdown/Variations/DropdownExampleMultipleSearchImageAndContent.shorthand.tsx @@ -52,7 +52,6 @@ const inputItems = [ const DropdownExample = () => ( `${item.header} has been removed.`, } -const getA11yStatusMessage = ({ - isOpen, - itemToString, - previousResultCount, - resultCount, - selectedItem, -}) => { - if (!isOpen) { - return selectedItem ? itemToString(selectedItem) : '' - } - if (!resultCount) { - return 'No results are available.' - } - if (resultCount !== previousResultCount) { - return `${resultCount} result${ - resultCount === 1 ? ' is' : 's are' - } available, use up and down arrow keys to navigate. Press Enter key to select.` - } - return '' -} - export default DropdownExample diff --git a/docs/src/examples/components/Dropdown/Variations/index.tsx b/docs/src/examples/components/Dropdown/Variations/index.tsx index d750fec0bd..daa0798bfc 100644 --- a/docs/src/examples/components/Dropdown/Variations/index.tsx +++ b/docs/src/examples/components/Dropdown/Variations/index.tsx @@ -14,6 +14,11 @@ const Variations = () => ( description="A multiple search dropdown that fits the width of the container." examplePath="components/Dropdown/Variations/DropdownExampleMultipleSearchFluid" /> + ) diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx index ceb7954157..0017a6d5f3 100644 --- a/src/components/Dropdown/Dropdown.tsx +++ b/src/components/Dropdown/Dropdown.tsx @@ -38,11 +38,6 @@ import Button from '../Button/Button' import { screenReaderContainerStyles } from '../../lib/accessibility/Styles/accessibilityStyles' import ListItem from '../List/ListItem' -// TODO: To be replaced when Downshift will add highlightedItem in their interface. -export interface A11yStatusMessageOptions extends DownshiftA11yStatusMessageOptions { - highlightedItem: Item -} - export interface DropdownProps extends UIComponentProps { /** The initial value for the search query, if the dropdown is also a search. */ defaultSearchQuery?: string @@ -69,9 +64,9 @@ export interface DropdownProps extends UIComponentProps} messageGenerationProps - Object with properties to generate message from. See getA11yStatusMessage from Downshift repo. + * @param {DownshiftA11yStatusMessageOptions} messageGenerationProps - Object with properties to generate message from. See getA11yStatusMessage from Downshift repo. */ - getA11yStatusMessage?: (options: A11yStatusMessageOptions) => string + getA11yStatusMessage?: (options: DownshiftA11yStatusMessageOptions) => string /** Array of props for generating list options (Dropdown.Item[]) and selected item labels(Dropdown.SelectedItem[]), if it's a multiple selection. */ items?: ShorthandValue[] diff --git a/src/index.ts b/src/index.ts index 9ba83d12f8..13db25101f 100644 --- a/src/index.ts +++ b/src/index.ts @@ -35,11 +35,7 @@ export { DividerPropsWithDefaults, } from './components/Divider/Divider' -export { - default as Dropdown, - DropdownProps, - A11yStatusMessageOptions, -} from './components/Dropdown/Dropdown' +export { default as Dropdown, DropdownProps } from './components/Dropdown/Dropdown' export { default as DropdownItem, DropdownItemProps } from './components/Dropdown/DropdownItem'