Mokka uses interactive UI elements, often referred to as 'chips' or 'tags,' to display and manage information efficiently. These elements are designed to be intuitive, accessible, and responsive to data changes within the platform.

Display Logic and Visuals

Visual Ordering

Chips and tags are displayed in a logical, left-to-right order within their respective containers. This ordering is typically based on the sequence in which the data is added or processed, ensuring a consistent and predictable layout for users.

Text Truncation and Tooltips

To maintain a clean and readable interface, especially when dealing with lengthy text labels, Mokka implements text truncation for chips and tags. If the text content of a chip or tag exceeds its available display width, the text will be shortened, and an ellipsis (...) will indicate the truncation.

To view the full, untruncated text, simply hover your mouse cursor over the chip or tag. A tooltip will appear, displaying the complete text label.

Interaction and Accessibility

Click/Tap Behavior

Chips and tags are interactive. Clicking or tapping on them typically triggers an action relevant to the data they represent. This could include:

  • Filtering: Applying or removing a filter based on the tag's value.
  • Selection: Selecting or deselecting an item.
  • Navigation: Opening a detailed view or related section.

Keyboard Activation (Space Key)

For enhanced accessibility, Mokka supports keyboard navigation and activation of interactive UI elements. When a chip or tag is in focus (e.g., navigated to using the Tab key), pressing the Space key will activate it. This action is equivalent to a mouse click or tap, ensuring users can interact with these elements without a pointing device.

Data-Driven Visibility

The presence and visibility of chips and tags are dynamically controlled by the underlying data. They are shown or hidden based on specific conditions to ensure that only relevant information is displayed at any given time.

Common conditions for showing/hiding include:

  • Data Availability: A chip or tag will only appear if there is associated data to display. For example, a 'Skills' tag will only show if skills have been added to a candidate profile.
  • Filter Status: Chips representing active filters will appear when those filters are applied and disappear when the filters are removed.
  • Status Changes: Tags indicating a status (e.g., 'Pending Review', 'Interview Scheduled') will update or disappear as the associated item's status changes.
  • User Permissions: In some cases, certain tags or chips may only be visible to users with specific permissions.