Skip to content
This repository was archived by the owner on Mar 4, 2020. It is now read-only.

chore(Dropdown): Add additional description for Left/Right arrow navigation #1441

Merged
merged 2 commits into from
Jun 5, 2019
Merged

chore(Dropdown): Add additional description for Left/Right arrow navigation #1441

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
618c309
changed descriptions and example
silviuaavram Jun 3, 2019
00c467d
Merge branch 'master' into fix-dropdown-multiple-a11y-status
silviuaavram Jun 5, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .../components/Dropdown/Variations/DropdownExampleSearchMultipleFrenchLanguage.shorthand.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ const getA11yStatusMessage = ({
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.`
}, touches fléchées ascendante et descendante pour naviguer. Appuyez sur la touche Entrée pour sélectionner. Appuyez sur les touches fléchées gauche et droite pour parcourir les options sélectionnées.`
}
return ''
}
Expand Down
2 changes: 1 addition & 1 deletion docs/src/examples/components/Dropdown/Variations/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const Variations = () => (
/>
<ComponentExample
title="Multiple Search Using French Language"
description="A multiple search dropdown that uses French to provide information and accessibility."
description="A multiple search dropdown that overrides visual and accessibility texts with French equivalents."
examplePath="components/Dropdown/Variations/DropdownExampleSearchMultipleFrenchLanguage"
/>
<ComponentExample
Expand Down
3 changes: 2 additions & 1 deletion packages/react/src/components/Dropdown/Dropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ export interface DropdownProps
}

/**
* Callback that creates custom accessability message for dropdown status change. Involves changes in highlighted item in the list, selection, toggle status.
* Callback that provides status announcement message with number of items in the list, using Arrow Up/Down keys to navigate through them and, if multiple, using Arrow Left/Right to navigate through selected items.
* @param {DownshiftA11yStatusMessageOptions<ShorthandValue>} messageGenerationProps - Object with properties to generate message from. See getA11yStatusMessage from Downshift repo.
*/
getA11yStatusMessage?: (options: DownshiftA11yStatusMessageOptions<ShorthandValue>) => string
Expand Down Expand Up @@ -1323,5 +1323,6 @@ Dropdown.slotClassNames = {
* Implements [ARIA Combo Box](https://www.w3.org/TR/wai-aria-practices-1.1/#combobox) design pattern, uses aria-live to announce state changes.
* Do provide getA11ySelectionMessage, getA11yStatusMessage, noResultsMessage and loadingMessage props to announce state changes correctly.
* Do provide aria-label to triggerButton slot for non-searchable variants if the placeholder prop is not used.
*
*/
export default withSafeTypeForAs<typeof Dropdown, DropdownProps>(Dropdown)