Feature Wiki

Information about planned and released features

Tabs

KS-Entry: Dropdown

Page Overview

[Hide]

1 Guideline

  • DOM, LESS, JS / Screenshot*: Abstract
  • PHP Class: ilAdvancedSelectionListGUI
  • PHP Example:
  • External Library: Bootstrap Dropdown
  • Status of Entry*: to be revised
  • Status of Implementation*: to be implemented
  • Description*:
    • Purpose: Dropdowns display a list of textual entries. Entries might be preceeded by icons. Dropdowns are used to initiate actions or navigation.
    • Composition: The content of Dropdowns  is a flat list of Links, textual entries, icons and Dividers.
    • Effect: The Dropdown is opened by clicking on an Action Trigger like a Link or Button containing a Caret on the rightmost side. It automatically closes if one of it’s items is selected or any other object on the current screen is clicked.
    • Rival Elements:
      1. Popovers: Popovers are in general not automatically closed if some selection is made and their content might change on input. Dropdowns always display a list of things while Popovers are much more flexible in the things they can display.
  • Background:
  • Context*:
  • Rules:
    • Style:
      1. Dropdowns MUST NOT contain any Input Elements other than Links, Dividers and textual entries.
    • Interaction:
      1. Dropdowns MUST be closed if one of it’s items is selected.
      2. The content of Dropdowns MUST NOT change on user interaction.
    • Accessability:
      1. Triggers of Dropdowns MUST indicate their effect by the aria-haspopup attribute set to true.
      2. Triggers of Dropdowns MUST indicate the current state of the Dropdown by the aria-expanded label.
      3. Dropdowns MUST be accessible by keyboard by focusing the trigger element and clicking the return key.
      4. Entries in a Dropdown MUST be accessible by the tab-key if opened.
      5. The focus MAY leave the Dropdown if tab is pressed while focusing the last element. This differs from the behaviour in Interaction Popovers and Modals.
  • Relations

2 Status

  • Effective from release: { not approved yet | x.y }
  • Approved by Jour Fixe at: { link to Jour Fixe agenda }
  • Implementation status: { implemented completely | partly implemented | needs implementation }
  • Funding for streamlining existing features: { name of organisation }
  • Implementation of guideline: { all developers | name of responsible developer }

3 Components that are not compliant with the Guideline

  • …

4 Discussion

...

Last edited: 16. Feb 2016, 17:21, Tödt, Alexandra [atoedt]