I've implemented drop-down components for settings with using modal dialog.
However, there are some parts which need to use drop-down stuff on html5-client, so I changed drop-down to be reusable component.
My Component Structure :
<Dropdown>
-<DropdownTrigger>
-<DropdownContent>
<DropdownTrigger> can be a trigger which open the drop-down menu like button.
<DropdownContent> can be lists of the menu.
In case of the settings menu, the horizontal three dots is <DropdownTrigger> and the three menus are <DropdownContent>.
<Dropdown> Component :
This component controls that the menu is opened(showed) or closed(disappeared) by using clicking button or key-down event.
It also close the drop-down menu automatically when user click outside of the menu.
For key-down event, drop-down menu is only allowed to use enter key, space bar and down arrow key.
<DropdownTrigger> Component :
In this component, button is used as a trigger. So, a developer can pass icon name or label of button as a property.
<DropdownContent> Component :
With this component, the menu list is just shown when user click the button(trigger).
<SettingsDropdown> Component:
This component includes the specific information about the menu such as the title, icon, tab-index for keyboard control, and others.
There are a function related to keyboard control in this component.
In this component, a developer can import <Dropdown>, <DropdownTrigger> and <DropdownContent>.
<Accessibility>
This component controls that the menu is opened(showed) or closed(disappeared) by using clicking button or key-down event.
It also close the drop-down menu automatically when user click outside of the menu.
For key-down event, drop-down menu is only allowed to use enter key, space bar and down arrow key.
<DropdownTrigger> Component :
In this component, button is used as a trigger. So, a developer can pass icon name or label of button as a property.
<DropdownContent> Component :
With this component, the menu list is just shown when user click the button(trigger).
<SettingsDropdown> Component:
This component includes the specific information about the menu such as the title, icon, tab-index for keyboard control, and others.
There are a function related to keyboard control in this component.
In this component, a developer can import <Dropdown>, <DropdownTrigger> and <DropdownContent>.
<Accessibility>
Drop-down menu also includes accessibility stuff for button and the list. Button has aria-haspopup, aria-labelledby and aria-describedby.
* aria-haspopup : Indicates that the element has a popup context menu or sub-level menu.
* aria-labelledby : Identifies the element that labels the current element. It provides the user with a recognizable name of the object
It provides the user with a recognizable name of the object. It provides the user with a recognizable name of the object. It provides the user with a recognizable name of the object.
* aria-describedby : Identifies the element (or elements) that describes the object
For menu list, each menu also has aria-labelledby and aria-describedby. It has paragraph tag for label/description of the menu.
A developer can use <FormattedMessage> component to be read by screen reader. So, description is message for developer, and defaultMessage is for screen reader. This message is also declared at en.json which is English version string.
