Skip to content

DropDown Specification

Stanka Bozalieva edited this page Feb 14, 2018 · 66 revisions

DropDown

Allows the user to choose a single option from a list. The list itself can be anything.

The dropdown element uses the Toggle box properties.

As an user I want to

  • select a value from a list.

  • know the current state of the dropdown is active, disabled, readonly or in focus.

  • have an indicator that points that I can select a value from a list.

  • have a default selection already made.(empty one, a default one, or the first one in the list)

  • change the selected values indefinitely.

  • have to access the dropdown using just keyboard.

  • be able to choose values from the dropdown using keyboard and loop selection. e.g. Based on the alphabetical order of items a B keypress selects the first item that starts with a B.

On following B keypresses after reaching the last item that starts with a B, the selection loops back to the first

  • when opened, attempt to vertically align the currently selected menu item with the list item. The currently selected menu item is highlighted. Positions:

/Users/sbozalieva/Desktop/Screen Shot 2018-02-08 at 12.48.15.png

Dev.

Keyboard Navigation

Down Arrow: Focus next option

Up Arrow: Focus previous option

Enter or Space: Select focused item

Accessibility

https://www.w3.org/TR/wai-aria-1.1/#aria-selected

Limitations

API

The width is defined by the width of the target element. The Hight of the element can be programatically set. Default : X

https://material-components-web.appspot.com/select.html https://material.angular.io/components/select/overview

Clone this wiki locally