fix(a11y): removed redundant a11y code from Dropdown (#771)

* removed interface and prop from examples

* fixed compile error

* also fixed @param

* added example with different language.

* updated the changelog

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 ]------------------------------- -->
 ## [v0.18.0](https://github.com/stardust-ui/react/tree/v0.18.0) (2019-01-24)

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

docs/src/examples/components/Dropdown/Types/DropdownExampleSingleSelection.shorthand.tsx

@@ -15,7 +15,6 @@ const inputItems = [
 
 const DropdownExample = () => (
   <Dropdown
-    getA11yStatusMessage={getA11yStatusMessage}
     getA11ySelectionMessage={{
       onAdd: item => `${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

docs/src/examples/components/Dropdown/Variations/DropdownExampleMultipleSearchFluid.shorthand.tsx

@@ -16,7 +16,6 @@ const DropdownExample = () => (
   <Dropdown
     multiple
     getA11ySelectionMessage={getA11ySelectionMessage}
-    getA11yStatusMessage={getA11yStatusMessage}
     noResultsMessage="We couldn't find any matches."
     search
     fluid
@@ -30,25 +29,4 @@ const getA11ySelectionMessage = {
   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

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 = () => (
+  <Dropdown
+    multiple
+    search
+    getA11yStatusMessage={getA11yStatusMessage}
+    getA11ySelectionMessage={getA11ySelectionMessage}
+    noResultsMessage="N'avons trouvé aucun résultat."
+    placeholder="Commencez à taper un nom"
+    items={inputItems}
+  />
+)
+
+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

docs/src/examples/components/Dropdown/Variations/DropdownExampleMultipleSearchImageAndContent.shorthand.tsx

@@ -52,7 +52,6 @@ const inputItems = [
 const DropdownExample = () => (
   <Dropdown
     multiple
-    getA11yStatusMessage={getA11yStatusMessage}
     search
     getA11ySelectionMessage={getA11ySelectionMessage}
     noResultsMessage="We couldn't find any matches."
@@ -66,25 +65,4 @@ const getA11ySelectionMessage = {
   onRemove: item => `${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

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"
     />
+    <ComponentExample
+      title="Multiple Search Using French Language"
+      description="A multiple search dropdown that uses French to provide information and accessibility."
+      examplePath="components/Dropdown/Variations/DropdownExampleMultipleSearchFrenchLanguage"
+    />
   </ExampleSection>
 )
 

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<Item> extends DownshiftA11yStatusMessageOptions<Item> {
-  highlightedItem: Item
-}
-
 export interface DropdownProps extends UIComponentProps<DropdownProps, DropdownState> {
   /** 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<DropdownProps, DropdownS
 
   /**
    * Callback that creates custom accessability message for dropdown status change. Involves changes in highlighted item in the list, selection, toggle status.
-   * @param {A11yStatusMessageOptions<ShorthandValue>} messageGenerationProps - Object with properties to generate message from. See getA11yStatusMessage from Downshift repo.
+   * @param {DownshiftA11yStatusMessageOptions<ShorthandValue>} messageGenerationProps - Object with properties to generate message from. See getA11yStatusMessage from Downshift repo.
    */
-  getA11yStatusMessage?: (options: A11yStatusMessageOptions<ShorthandValue>) => string
+  getA11yStatusMessage?: (options: DownshiftA11yStatusMessageOptions<ShorthandValue>) => string
 
   /** Array of props for generating list options (Dropdown.Item[]) and selected item labels(Dropdown.SelectedItem[]), if it's a multiple selection. */
   items?: ShorthandValue[]

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'