From 799760440e069ecd1be8d1a7cbaccaa73442f97c Mon Sep 17 00:00:00 2001
From: Hajime Yamasaki Vukelic <hi@devi.us>
Date: Mon, 21 Aug 2023 15:01:38 +0200
Subject: [PATCH] Make the header toolbar dropdown menu accessible

- Correctly indicate the roles and states of the dropdown menu
- Use a vanilla JavaScript implementation of the dropdown
- Introduce new folders `client/{js,styles}/custom-elements`
- Improve accessibility of the tooltips for the #create-* buttons
---
 CHANGES.rst                                   |   4 +
 .../web/client/js/custom_elements/TipBase.js  | 123 ++++++++++++++++
 .../custom_elements/ind_bypass_block_links.js |   3 +-
 .../web/client/js/custom_elements/ind_menu.js |  57 +++++++
 .../client/js/custom_elements/ind_menu.scss   |  49 ++++++
 .../js/custom_elements/ind_with_toggletip.js  |  54 +++++++
 .../js/custom_elements/ind_with_tooltip.js    |  50 +++++++
 .../web/client/js/custom_elements/tips.scss   |  95 ++++++++++++
 indico/web/client/js/index.js                 |   2 +
 indico/web/client/js/utils/domstate.js        |  14 ++
 indico/web/client/js/widgets/dynamic-tips.js  |  23 +++
 indico/web/client/styles/base/_reset.scss     |  23 ++-
 .../client/styles/design_system/_button.scss  |  65 +++++---
 .../styles/design_system/_button_group.scss   |   8 +-
 .../client/styles/design_system/_dialog.scss  |  80 ++++++++++
 .../styles/design_system/_form_controls.scss  |   5 +-
 .../styles/design_system/_headings.scss       |  27 ++++
 .../client/styles/design_system/_index.scss   |   5 +
 .../client/styles/design_system/_layout.scss  |  69 ++++++++-
 .../client/styles/design_system/_link.scss    |  34 ++++-
 .../client/styles/design_system/_popup.scss   |   1 +
 .../client/styles/design_system/_regions.scss |  21 +++
 .../client/styles/design_system/_tags.scss    |  22 +++
 .../client/styles/design_system/_text.scss    | 139 ++++++++++++++++++
 .../client/styles/design_system/_utils.scss   |   4 +
 .../styles/design_system/variables.scss       |  57 ++++++-
 indico/web/client/styles/partials/_main.scss  |  58 ++++++--
 indico/web/templates/header.html              | 133 +++++++++--------
 28 files changed, 1098 insertions(+), 127 deletions(-)
 create mode 100644 indico/web/client/js/custom_elements/TipBase.js
 create mode 100644 indico/web/client/js/custom_elements/ind_menu.js
 create mode 100644 indico/web/client/js/custom_elements/ind_menu.scss
 create mode 100644 indico/web/client/js/custom_elements/ind_with_toggletip.js
 create mode 100644 indico/web/client/js/custom_elements/ind_with_tooltip.js
 create mode 100644 indico/web/client/js/custom_elements/tips.scss
 create mode 100644 indico/web/client/js/utils/domstate.js
 create mode 100644 indico/web/client/js/widgets/dynamic-tips.js
 create mode 100644 indico/web/client/styles/design_system/_dialog.scss
 create mode 100644 indico/web/client/styles/design_system/_headings.scss
 create mode 100644 indico/web/client/styles/design_system/_regions.scss
 create mode 100644 indico/web/client/styles/design_system/_tags.scss
 create mode 100644 indico/web/client/styles/design_system/_text.scss

diff --git a/CHANGES.rst b/CHANGES.rst
index 396ff9ea82c..1fb0a610f8c 100644
--- a/CHANGES.rst
+++ b/CHANGES.rst
@@ -48,6 +48,8 @@ Improvements
   :user:`kewisch`)
 - Allow editors to edit their review comments on editables (:pr:`6008`)
 - Auto-linking of patterns in minutes (e.g. issue trackers, Github repos...) (:pr:`5998`)
+- Allow event managers to delete editables from contributions (:pr:`5778`)
+- Support custom user-defined stylesheets with text metric overrides (:pr:`5895`)
 
 Bugfixes
 ^^^^^^^^
@@ -75,6 +77,7 @@ Accessibility
   thanks :user:`foxbunny`)
 - Prevent icons from being announced to screen readers as random characters (:issue:`5985`,
   :pr:`5986`, thanks :user:`foxbunny`)
+- Make dropdown menu fully accessible (:issue:`5896`, :pr:`5897`, thanks :user:`foxbunny`)
 
 Internal Changes
 ^^^^^^^^^^^^^^^^
@@ -90,6 +93,7 @@ Internal Changes
   the removal of registration form fields (:pr:`5924`)
 - Add a tool ``bin/managemnent/icons_generate.py`` to generate CSS for icomoon icons based
   on ``selection.json`` (:pr:`5986`, thanks :user:`foxbunny`)
+- Add ``<ind-menu>`` custom element for managing drop-down menus (:issue:`5896`, :pr:`5897`, thanks :user:`foxbunny`)
 
 
 ----
diff --git a/indico/web/client/js/custom_elements/TipBase.js b/indico/web/client/js/custom_elements/TipBase.js
new file mode 100644
index 00000000000..17d5e2333b7
--- /dev/null
+++ b/indico/web/client/js/custom_elements/TipBase.js
@@ -0,0 +1,123 @@
+// This file is part of Indico.
+// Copyright (C) 2002 - 2023 CERN
+//
+// Indico is free software; you can redistribute it and/or
+// modify it under the terms of the MIT License; see the
+// LICENSE file for more details.
+
+import {domReady} from 'indico/utils/domstate';
+import './tips.scss';
+
+let viewportWidth = document.documentElement.clientWidth;
+let viewportHeight = document.documentElement.clientHeight;
+
+window.addEventListener('DOMContentLoaded', () => requestIdleCallback(updateClientGeometry));
+window.addEventListener('resize', updateClientGeometry);
+window.addEventListener('orientationchange', updateClientGeometry);
+
+function updateClientGeometry() {
+  viewportWidth = document.documentElement.clientWidth;
+  viewportHeight = document.documentElement.clientHeight;
+}
+
+export class TipBase extends HTMLElement {
+  constructor() {
+    super();
+    this.updatePosition = this.updatePosition.bind(this);
+    this.show = this.show.bind(this);
+    this.hide = this.hide.bind(this);
+    this.dismiss = this.dismiss.bind(this);
+  }
+
+  connectedCallback() {
+    domReady.then(() => {
+      this.$tip = this.querySelector('[data-tip-content]');
+      console.assert(!!this.$tip, 'Must contain a *[data-tip-content] element');
+      this.setup();
+    });
+  }
+
+  disconnectedCallback() {
+    window.removeEventListener('keydown', this.dismiss);
+  }
+
+  get shown() {
+    return this.hasAttribute('shown');
+  }
+
+  set shown(isShown) {
+    if (this.shown === isShown) {
+      return;
+    }
+    this.toggleAttribute('shown', isShown);
+    this.dispatchEvent(new Event('toggle'));
+  }
+
+  getTipCSS() {
+    const vw = viewportWidth;
+    const vh = viewportHeight;
+    const referenceRect = this.getBoundingClientRect();
+    const tooltipRect = this.$tip.getBoundingClientRect();
+
+    let top = 'auto';
+    let bottom = 'auto';
+    const refCenter = `${referenceRect.x + referenceRect.width / 2}px`;
+    let arrowBorder;
+
+    console.log(referenceRect);
+
+    // Place above or below?
+    if (tooltipRect.height < referenceRect.top) {
+      bottom = `${vh - referenceRect.top}px`;
+      arrowBorder = 'var(--tooltip-surface-color) transparent transparent';
+    } else {
+      top = `${referenceRect.bottom}px`;
+      arrowBorder = 'transparent transparent var(--tooltip-surface-color)';
+    }
+
+    // Ideal left coordinate (CSS will adjust as needed)
+    const idealLeft = referenceRect.left + (referenceRect.width - tooltipRect.width) / 2;
+    // NB: the clamp() formula assumes the tooltip content will always fit the viewport, which is ensured using CSS
+    const left = `clamp(0.5em, ${idealLeft}px, ${vw - tooltipRect.width}px - 0.5em)`;
+
+    return {
+      top,
+      bottom,
+      left,
+      'ref-center': refCenter,
+      'arrow-borders': arrowBorder,
+    };
+  }
+
+  updatePosition() {
+    this.style = '';
+    const css = this.getTipCSS();
+    for (const key in css) {
+      this.style.setProperty(`--${key}`, css[key]);
+    }
+  }
+
+  dismiss(evt) {
+    if (!this.shown || evt.code !== 'Escape') {
+      return;
+    }
+    evt.preventDefault();
+    this.shown = false;
+  }
+
+  setup() {
+    window.addEventListener('keydown', this.dismiss);
+    this.$tip.addEventListener('click', evt => {
+      evt.preventDefault();
+    });
+    this.addEventListener('toggle', () => {
+      if (this.shown) {
+        window.addEventListener('resize', this.updatePosition);
+        window.addEventListener('scroll', this.updatePosition, {passive: true});
+      } else {
+        window.removeEventListener('resize', this.updatePosition);
+        window.removeEventListener('scroll', this.updatePosition);
+      }
+    });
+  }
+}
diff --git a/indico/web/client/js/custom_elements/ind_bypass_block_links.js b/indico/web/client/js/custom_elements/ind_bypass_block_links.js
index 4c9645c87e5..1be9430bfba 100644
--- a/indico/web/client/js/custom_elements/ind_bypass_block_links.js
+++ b/indico/web/client/js/custom_elements/ind_bypass_block_links.js
@@ -5,13 +5,14 @@
 // modify it under the terms of the MIT License; see the
 // LICENSE file for more details.
 
+import {domReady} from 'indico/utils/domstate';
 import './ind_bypass_block_links.scss';
 
 customElements.define(
   'ind-bypass-block-links',
   class extends HTMLElement {
     connectedCallback() {
-      window.addEventListener('DOMContentLoaded', () => {
+      domReady.then(() => {
         const bypassBlockTargets = document.querySelectorAll('[id][data-bypass-target]');
         for (const target of bypassBlockTargets) {
           this.append(
diff --git a/indico/web/client/js/custom_elements/ind_menu.js b/indico/web/client/js/custom_elements/ind_menu.js
new file mode 100644
index 00000000000..2abb61dc119
--- /dev/null
+++ b/indico/web/client/js/custom_elements/ind_menu.js
@@ -0,0 +1,57 @@
+// This file is part of Indico.
+// Copyright (C) 2002 - 2023 CERN
+//
+// Indico is free software; you can redistribute it and/or
+// modify it under the terms of the MIT License; see the
+// LICENSE file for more details.
+
+import './ind_menu.scss';
+import {domReady} from 'indico/utils/domstate';
+
+let lastId = 0; // Track the assigned IDs to give each element a unique ID
+
+customElements.define(
+  'ind-menu',
+  class extends HTMLElement {
+    connectedCallback() {
+      domReady.then(() => {
+        const trigger = this.querySelector('button');
+        const list = this.querySelector('menu');
+
+        console.assert(
+          trigger.nextElementSibling === list,
+          'The <menu> element must come after <button>'
+        );
+
+        trigger.setAttribute('aria-expanded', false);
+
+        list.id = list.id || `dropdown-list-${lastId++}`;
+        trigger.setAttribute('aria-controls', list.id);
+
+        trigger.addEventListener('click', function() {
+          trigger.setAttribute('aria-expanded', trigger.getAttribute('aria-expanded') !== 'true');
+        });
+
+        this.addEventListener('focusout', function() {
+          // Delay action as no element is focused immediately after focusout
+          requestAnimationFrame(() => {
+            if (this.contains(document.activeElement)) {
+              return;
+            }
+            trigger.removeAttribute('aria-expanded');
+          });
+        });
+
+        this.addEventListener('keydown', function(ev) {
+          if (!trigger.hasAttribute('aria-expanded')) {
+            return;
+          }
+          if (ev.code === 'Escape') {
+            trigger.removeAttribute('aria-expanded');
+            trigger.focus();
+          }
+        });
+      });
+    }
+  }
+);
diff --git a/indico/web/client/js/custom_elements/ind_menu.scss b/indico/web/client/js/custom_elements/ind_menu.scss
new file mode 100644
index 00000000000..d1666e953d4
--- /dev/null
+++ b/indico/web/client/js/custom_elements/ind_menu.scss
@@ -0,0 +1,49 @@
+// This file is part of Indico.
+// Copyright (C) 2002 - 2023 CERN
+//
+// Indico is free software; you can redistribute it and/or
+// modify it under the terms of the MIT License; see the
+// LICENSE file for more details.
+
+ind-menu menu {
+  --time-menu-animation: 0.2s;
+  --length-menu-travel: -0.4em;
+  position: absolute;
+  z-index: 1;
+}
+
+ind-menu [aria-expanded='true'] + menu {
+  animation: menu-slide-down var(--time-menu-animation);
+}
+
+ind-menu :not([aria-expanded='true']) + menu {
+  display: none; // must be set to none to hide it from a11y tools and tab navigation as well
+  animation: menu-slide-up var(--time-menu-animation);
+}
+
+@keyframes menu-slide-down {
+  from {
+    display: block;
+    opacity: 0;
+    transform: translateY(var(--length-menu-travel));
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes menu-slide-up {
+  from {
+    display: block;
+    opacity: 1;
+    transform: none;
+  }
+
+  to {
+    display: none;
+    opacity: 0;
+    transform: translateY(var(--length-menu-travel));
+  }
+}
diff --git a/indico/web/client/js/custom_elements/ind_with_toggletip.js b/indico/web/client/js/custom_elements/ind_with_toggletip.js
new file mode 100644
index 00000000000..0a69e3f8db3
--- /dev/null
+++ b/indico/web/client/js/custom_elements/ind_with_toggletip.js
@@ -0,0 +1,54 @@
+// This file is part of Indico.
+// Copyright (C) 2002 - 2023 CERN
+//
+// Indico is free software; you can redistribute it and/or
+// modify it under the terms of the MIT License; see the
+// LICENSE file for more details.
+
+import {TipBase} from 'indico/custom_elements/TipBase';
+
+const liveRegionUpdateDelay = 100;
+
+customElements.define(
+  'ind-with-toggletip',
+  class extends TipBase {
+    show() {
+      // XXX: We add a slight delay to ensure that the screen readers will be able to pick up
+      // the change to the live region.
+      setTimeout(() => {
+        this.$tip.innerHTML = this.tipContent;
+        this.shown = true;
+        this.updatePosition();
+      }, liveRegionUpdateDelay);
+    }
+
+    hide() {
+      this.shown = false;
+      this.$tip.hidden = true;
+      this.$tip.innerHTML = '';
+    }
+
+    setup() {
+      super.setup();
+
+      // NB: The tip is an aria-live region. Because of this, it is necessary to clear the content.
+      // Live regions are (usually) only announced when content changes. (See also the hide() method.)
+      this.tipContent = this.$tip.innerHTML;
+      this.$tip.innerHTML = '';
+
+      this.addEventListener('click', evt => {
+        // NB: The toggletip button can trigger the toggle tip even when it is still open,
+        // so we must clean up just in case.
+        this.removeEventListener('focusout', this.hide);
+        this.hide();
+
+        const $target = evt.target.closest('button');
+        if (!$target || !this.contains($target)) {
+          return;
+        }
+        this.show();
+        this.addEventListener('focusout', this.hide, {once: true});
+      });
+    }
+  }
+);
diff --git a/indico/web/client/js/custom_elements/ind_with_tooltip.js b/indico/web/client/js/custom_elements/ind_with_tooltip.js
new file mode 100644
index 00000000000..92c5e8b904e
--- /dev/null
+++ b/indico/web/client/js/custom_elements/ind_with_tooltip.js
@@ -0,0 +1,50 @@
+// This file is part of Indico.
+// Copyright (C) 2002 - 2023 CERN
+//
+// Indico is free software; you can redistribute it and/or
+// modify it under the terms of the MIT License; see the
+// LICENSE file for more details.
+
+import {TipBase} from 'indico/custom_elements/TipBase';
+
+const tipDelay = 1000; // ms
+
+customElements.define(
+  'ind-with-tooltip',
+  class extends TipBase {
+    show() {
+      // XXX: Delay showing the tip to prevent tip blinking when moving the cursor over multiple items with tooltips
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        this.shown = true;
+        this.updatePosition();
+      }, tipDelay);
+    }
+
+    hide() {
+      clearTimeout(this.timer);
+      this.shown = false;
+      window.removeEventListener('resize', this.updatePosition);
+    }
+
+    setup() {
+      super.setup();
+
+      // XXX: When the tooltip is part of a button/link text, we don't want to trigger the default behavior
+      this.$tip.addEventListener('click', evt => {
+        evt.preventDefault();
+      });
+
+      this.addEventListener('pointerenter', () => {
+        this.show();
+        this.addEventListener('pointerleave', this.hide, {once: true});
+      });
+
+      this.addEventListener('focusin', () => {
+        this.removeEventListener('pointerleave', this.hide);
+        this.show();
+        this.addEventListener('focusout', this.hide);
+      });
+    }
+  }
+);
diff --git a/indico/web/client/js/custom_elements/tips.scss b/indico/web/client/js/custom_elements/tips.scss
new file mode 100644
index 00000000000..0b165a12f4e
--- /dev/null
+++ b/indico/web/client/js/custom_elements/tips.scss
@@ -0,0 +1,95 @@
+// This file is part of Indico.
+// Copyright (C) 2002 - 2023 CERN
+//
+// Indico is free software; you can redistribute it and/or
+// modify it under the terms of the MIT License; see the
+// LICENSE file for more details.
+
+@use 'design_system';
+
+ind-with-tooltip,
+ind-with-toggletip {
+  --tooltip-surface-color: #000;
+  --tooltip-text-color: #fff;
+
+  // XXX: The following variables are set using JavaScript:
+  --top: 0;
+  --left: 0;
+  --bottom: auto;
+  --ref-center: 0;
+  --arrow-borders: transparent;
+
+  [data-tip-content] {
+    display: block;
+    position: fixed;
+    top: var(--top);
+    left: var(--left);
+    bottom: var(--bottom);
+    max-width: min(calc(100vw - 1em), 40ch);
+    padding: 0.5em;
+
+    cursor: default;
+    color: var(--tooltip-text-color);
+    // XXX: The transparent border serves as faux margin to reduce the number of HTML elements involved
+    border: solid transparent;
+    border-width: 0.5em 0;
+
+    // Reset the default text appearance
+    font-style: normal;
+    font-weight: normal;
+    font-size: 1rem; // FIXME: this needs the base font size to be addressed!
+    text-align: center;
+    text-transform: none;
+    letter-spacing: 0;
+  }
+
+  &:not([shown]) [data-tip-content] {
+    // XXX: Be careful when changing the following values, as they may interfere with initial size calc.
+    top: 0;
+    bottom: auto;
+    left: auto;
+    right: 100vw;
+
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  // Content background
+  [data-tip-content]::before {
+    content: '';
+    position: absolute;
+    z-index: -1;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+
+    background: var(--tooltip-surface-color);
+    border-radius: 0.2em;
+  }
+
+  // Arrow
+
+  [data-tip-content]::after {
+    content: '';
+    position: fixed;
+    display: inline-block;
+    left: calc(var(--ref-center) - 0.5em);
+    // XXX: One of the calculations below will always be invalid and revert to auto. This is by design.
+    // XXX: The 1px adjustment is for when the browser rendering is inaccurate
+    top: calc(var(--top) - 0.5em + 1px);
+    bottom: calc(var(--bottom) - 0.5em + 1px);
+
+    border-style: solid;
+    border-color: var(--arrow-borders);
+    border-width: 0.5em;
+  }
+}
+
+ind-with-toggletip {
+  display: inline-flex;
+
+  button {
+    @extend %flex-inline-center;
+  }
+}
diff --git a/indico/web/client/js/index.js b/indico/web/client/js/index.js
index b5bf1c41db0..47e51a56757 100644
--- a/indico/web/client/js/index.js
+++ b/indico/web/client/js/index.js
@@ -12,7 +12,9 @@ import './legacy/indico.js';
 import './legacy/timetable.js';
 
 import './custom_elements/ind_bypass_block_links.js';
+import './custom_elements/ind_menu.js';
 import './widgets/tz_selector.js';
+import './widgets/dynamic-tips.js';
 
 import '../styles/screen.scss';
 import '../styles/editor-output.scss';
diff --git a/indico/web/client/js/utils/domstate.js b/indico/web/client/js/utils/domstate.js
new file mode 100644
index 00000000000..3bce3121217
--- /dev/null
+++ b/indico/web/client/js/utils/domstate.js
@@ -0,0 +1,14 @@
+// This file is part of Indico.
+// Copyright (C) 2002 - 2023 CERN
+//
+// Indico is free software; you can redistribute it and/or
+// modify it under the terms of the MIT License; see the
+// LICENSE file for more details.
+
+export const domReady = new Promise(resolve => {
+  if (document.readyState === 'completed') {
+    resolve();
+  } else {
+    window.addEventListener('DOMContentLoaded', resolve);
+  }
+});
diff --git a/indico/web/client/js/widgets/dynamic-tips.js b/indico/web/client/js/widgets/dynamic-tips.js
new file mode 100644
index 00000000000..be882881537
--- /dev/null
+++ b/indico/web/client/js/widgets/dynamic-tips.js
@@ -0,0 +1,23 @@
+// This file is part of Indico.
+// Copyright (C) 2002 - 2023 CERN
+//
+// Indico is free software; you can redistribute it and/or
+// modify it under the terms of the MIT License; see the
+// LICENSE file for more details.
+
+import {domReady} from 'indico/utils/domstate';
+import 'indico/custom_elements/ind_with_tooltip';
+
+domReady.then(() => {
+  document.querySelectorAll('template[data-tooltip-for]').forEach(template => {
+    const target = document.getElementById(template.dataset.tooltipFor);
+    if (!target) {
+      return;
+    }
+    const tooltip = Object.assign(document.createElement('ind-with-tooltip'), {
+      innerHTML: `<div data-tip-content>${template.innerHTML}</div>`,
+    });
+    target.replaceWith(tooltip);
+    tooltip.append(target);
+  });
+});
diff --git a/indico/web/client/styles/base/_reset.scss b/indico/web/client/styles/base/_reset.scss
index 6f56719c70c..4aa263bd042 100644
--- a/indico/web/client/styles/base/_reset.scss
+++ b/indico/web/client/styles/base/_reset.scss
@@ -15,28 +15,37 @@ button,
 input,
 textarea,
 select,
-isindex {
+blockquote {
   font: inherit;
 }
 
 fieldset,
-legend {
+legend,
+ul,
+menu {
   padding: 0;
 }
 
-fieldset {
+fieldset,
+ul,
+blockquote,
+menu {
   margin: 0;
-  border: none;
 }
 
-legend {
-  padding: 0;
+fieldset {
+  border: none;
 }
 
 button:not(:disabled),
 select:not(:disabled),
 input[type='checkbox']:not(:disabled),
 input[type='radio']:not(:disabled),
-label {
+label,
+summary {
   cursor: pointer;
 }
+
+summary {
+  list-style: none;
+}
diff --git a/indico/web/client/styles/design_system/_button.scss b/indico/web/client/styles/design_system/_button.scss
index 1c96fd7b429..faeed503081 100644
--- a/indico/web/client/styles/design_system/_button.scss
+++ b/indico/web/client/styles/design_system/_button.scss
@@ -5,20 +5,37 @@
 // modify it under the terms of the MIT License; see the
 // LICENSE file for more details.
 
-@use 'layout';
+@use './variables';
+@use './layout';
+@use './visibility';
+
+%button-pressed-state {
+  box-shadow: inset 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.3);
+}
 
 %button-base {
+  --button-border-color: var(--control-border-color);
+  --button-text-color: var(--control-text-color);
+  --button-surface-color: var(--control-clickable-surface-color);
+  --button-surface-hover-color: var(--control-clickable-surface-focus-color);
+
   @extend %flex-inline-center;
   gap: var(--control-internal-gap);
   padding: var(--control-padding);
 
-  border: var(--control-border);
-  color: var(--control-text-color);
-  background: var(--control-clickable-surface-color);
+  border: var(--control-border-width) solid var(--button-border-color);
+  color: var(--button-text-color);
+  background: var(--button-surface-color);
+  line-height: 1.1;
 
   &:focus,
   &:hover {
-    background-color: var(--control-clickable-surface-focus-color);
+    color: var(--button-text-color); // XXX: needed for when using links as buttons
+    background-color: var(--button-surface-hover-color);
+  }
+
+  &:active {
+    @extend %button-pressed-state;
   }
 }
 
@@ -47,9 +64,12 @@
 }
 
 %button-disabled-state {
-  background: var(--control-disabled-clickable-surface-color);
-  color: var(--control-disabled-text-color);
-  border-color: var(--control-disabled-border-color);
+  --button-disabled-border-color: var(--control-disabled-border-color);
+  --button-disabled-surface-color: var(--control-disabled-clickable-surface-color);
+  --button-disabled-text-color: var(--control-disabled-text-color);
+  background: var(--buttton-disabled-surface-color);
+  color: var(--button-disabled-text-color);
+  border-color: var(--button-disabled-border-color);
 }
 
 %button {
@@ -62,21 +82,30 @@
 }
 
 %button-alt-state {
-  background: var(--control-alt-clickable-surface-color);
-  color: var(--control-alt-text-color);
-  border-color: var(--control-alt-border-color);
-}
-
-%button-alt-hover-state {
-  background: var(--control-alt-clickable-surface-focus-color);
+  --button-surface-color: var(--control-alt-clickable-surface-color);
+  --button-text-color: var(--control-alt-text-color);
+  --button-border-color: var(--control-alt-border-color);
+  --button-surface-hover-color: var(--control-alt-clickable-surface-focus-color);
 }
 
 %button-main-action {
   @extend %button;
   @extend %button-alt-state;
+}
 
-  &:focus-visible,
-  &:hover {
-    @extend %button-alt-hover-state;
+%button-clear {
+  border: 0;
+  background: transparent;
+  font: inherit;
+  color: inherit;
+}
+
+%button-icon-only {
+  @extend %button-clear;
+  @extend %flex-inline-center;
+  padding: 0;
+
+  span {
+    @extend %visually-hidden;
   }
 }
diff --git a/indico/web/client/styles/design_system/_button_group.scss b/indico/web/client/styles/design_system/_button_group.scss
index 366e0fb2a91..79c99f9b2fe 100644
--- a/indico/web/client/styles/design_system/_button_group.scss
+++ b/indico/web/client/styles/design_system/_button_group.scss
@@ -5,10 +5,10 @@
 // modify it under the terms of the MIT License; see the
 // LICENSE file for more details.
 
-@use 'button';
-@use 'layout';
-@use 'form_controls';
-@use 'utils';
+@use './button';
+@use './layout';
+@use './form_controls';
+@use './utils';
 @use 'partials/icons';
 
 %button-group-base {
diff --git a/indico/web/client/styles/design_system/_dialog.scss b/indico/web/client/styles/design_system/_dialog.scss
new file mode 100644
index 00000000000..cf98e3ea2c9
--- /dev/null
+++ b/indico/web/client/styles/design_system/_dialog.scss
@@ -0,0 +1,80 @@
+// This file is part of Indico.
+// Copyright (C) 2002 - 2023 CERN
+//
+// Indico is free software; you can redistribute it and/or
+// modify it under the terms of the MIT License; see the
+// LICENSE file for more details.
+
+@use './variables';
+@use './layout';
+@use './utils';
+@use './button';
+@use 'partials/icons';
+
+%dialog-modal {
+  @extend %text-size-reset;
+
+  --dialog-max-width: 50em;
+  --dialog-max-height: 40em;
+  --dialog-button-bar-justify: flex-end;
+
+  width: min(var(--dialog-max-width), calc(100vw - 1em));
+  height: min(var(--dialog-max-height), calc(100vh - 2em));
+  padding: 0;
+
+  border: 0;
+  box-shadow: var(--modal-control-box-shadow);
+
+  > div {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .titlebar {
+    @extend %flex-split;
+    flex-wrap: nowrap;
+    padding: var(--container-padding) var(--container-padding) 0.5em;
+    border-bottom: 1px solid var(--container-separator-color);
+    flex: none;
+  }
+
+  .titlebar h2 {
+    font: inherit; // FIXME: move to reset
+    color: inherit; // FIXME: move to reset
+    margin: 0; // FIXME: move to reset
+    font-size: var(--text-size-rel-l);
+    line-height: 1.2;
+  }
+
+  .titlebar button[value='close'] {
+    @extend %button-icon-only;
+    padding: 0.2em;
+    border-radius: 50%;
+    font-size: var(--text-size-rel-l);
+
+    &::before {
+      @extend %icon;
+      @extend %icon-close;
+    }
+
+    &:hover {
+      background: var(--surface-default);
+    }
+  }
+
+  .content {
+    @extend %flex-column;
+    padding: var(--container-padding);
+    min-height: 0;
+    flex: 1;
+    overflow: auto;
+  }
+
+  .button-bar {
+    @extend %flex-row;
+    flex: none;
+    justify-content: var(--dialog-button-bar-justify);
+    padding: var(--container-padding);
+  }
+}
diff --git a/indico/web/client/styles/design_system/_form_controls.scss b/indico/web/client/styles/design_system/_form_controls.scss
index db0dee505ee..944061e3d14 100644
--- a/indico/web/client/styles/design_system/_form_controls.scss
+++ b/indico/web/client/styles/design_system/_form_controls.scss
@@ -5,8 +5,9 @@
 // modify it under the terms of the MIT License; see the
 // LICENSE file for more details.
 
-@use 'utils';
-@use 'layout';
+@use './variables';
+@use './utils';
+@use './layout';
 @use 'partials/icons';
 
 %form-label {
diff --git a/indico/web/client/styles/design_system/_headings.scss b/indico/web/client/styles/design_system/_headings.scss
new file mode 100644
index 00000000000..34f13fb2c3c
--- /dev/null
+++ b/indico/web/client/styles/design_system/_headings.scss
@@ -0,0 +1,27 @@
+// This file is part of Indico.
+// Copyright (C) 2002 - 2023 CERN
+//
+// Indico is free software; you can redistribute it and/or
+// modify it under the terms of the MIT License; see the
+// LICENSE file for more details.
+
+@use './variables';
+
+%heading-minor-subsection {
+  border-bottom: 1px solid var(--container-separator-color);
+  font-weight: bold;
+}
+
+%heading-minior-subsection-with-tab {
+  @extend %heading-minor-subsection;
+
+  display: flex;
+
+  --heading-tab-color: var(--background-secondary);
+
+  > :first-child {
+    padding: 0.3em 1em;
+    background-color: var(--heading-tab-color);
+    border-radius: 0.4em 0.4em 0 0;
+  }
+}
diff --git a/indico/web/client/styles/design_system/_index.scss b/indico/web/client/styles/design_system/_index.scss
index 7e96af1a4a9..6071d8f0079 100644
--- a/indico/web/client/styles/design_system/_index.scss
+++ b/indico/web/client/styles/design_system/_index.scss
@@ -8,10 +8,15 @@
 @use './variables';
 @use './button';
 @use './button_group';
+@use './dialog';
 @use './form_controls';
+@use './headings';
 @use './layout';
 @use './link';
 @use './notice';
 @use './popup';
+@use './regions';
+@use './tags';
+@use './text';
 @use './visibility';
 @use './utils';
diff --git a/indico/web/client/styles/design_system/_layout.scss b/indico/web/client/styles/design_system/_layout.scss
index d65766f26d9..da7727a127b 100644
--- a/indico/web/client/styles/design_system/_layout.scss
+++ b/indico/web/client/styles/design_system/_layout.scss
@@ -5,8 +5,10 @@
 // modify it under the terms of the MIT License; see the
 // LICENSE file for more details.
 
+@use './variables';
+
 @mixin flex-column {
-  --flex-gap: 0.5em;
+  --flex-gap: var(--content-gap-normal);
   display: flex;
   flex-direction: column;
   gap: var(--flex-gap);
@@ -16,17 +18,36 @@
   @include flex-column();
 }
 
+@mixin flex-column-center {
+  align-items: center;
+}
+
+%flex-column-center {
+  @include flex-column-center();
+}
+
 @mixin flex-row {
-  --flex-gap: 0.5em;
+  --flex-gap: var(--content-gap-normal);
+  --flex-wrap: wrap;
   display: flex;
   align-items: center;
   gap: var(--flex-gap);
+  flex-wrap: var(--flex-wrap);
 }
 
 %flex-row {
   @include flex-row();
 }
 
+@mixin flex-split {
+  @include flex-row();
+  justify-content: space-between;
+}
+
+%flex-split {
+  @include flex-split();
+}
+
 @mixin flex-inline-center {
   display: inline-flex;
   justify-content: center;
@@ -36,3 +57,47 @@
 %flex-inline-center {
   @include flex-inline-center();
 }
+
+@mixin flex-flush-end {
+  @include flex-row();
+  justify-content: flex-end;
+}
+
+%flex-flush-end {
+  @include flex-flush-end();
+}
+
+// Flex column layouts
+
+@mixin flex-column-layout-container {
+  --flex-vertical-align: flex-start;
+  --flex-gap: normal;
+  display: flex;
+  align-items: var(--flex-vertical-align);
+  gap: var(--flex-gap);
+  flex-wrap: wrap;
+}
+
+%flex-column-layout-container {
+  @include flex-column-layout-container();
+}
+
+@mixin flex-column-layout-column {
+  --flex-column-width: var(--content-max-readable-width);
+  flex: 1000;
+  min-width: min(100%, var(--flex-column-width));
+}
+
+%flex-column-layout-column {
+  @include flex-column-layout-column();
+}
+
+@mixin flex-layout-column-fixed {
+  --flex-column-width: var(--content-max-readable-width);
+  flex: 1 0;
+  min-width: min(100%, var(--flex-column-width));
+}
+
+%flex-column-layout-column-fixed {
+  @include flex-layout-column-fixed();
+}
diff --git a/indico/web/client/styles/design_system/_link.scss b/indico/web/client/styles/design_system/_link.scss
index 11319acc6cb..9d0ac930342 100644
--- a/indico/web/client/styles/design_system/_link.scss
+++ b/indico/web/client/styles/design_system/_link.scss
@@ -8,22 +8,48 @@
 @use './variables';
 
 %link {
-  color: var(--clickable-text-color);
+  --link-color: var(--clickable-text-color);
+  --link-highlight-color: var(--clickable-text-highlight-color);
+  --link-active-color: var(--clickable-text-active-color);
+  --link-disabled-color: var(--clickable-text-disabled-color);
+
+  color: var(--link-color);
   text-decoration: none;
+  transition: color var(--transition-quick);
+
+  &:hover,
+  &:focus-visible {
+    color: var(--link-highlight-color);
+  }
 
   &:active {
-    color: var(--clickable-text-active-color);
+    color: var(--link-active-color);
   }
 
   &[aria-disabled='true'] {
-    color: var(--clickable-text-disabled-color);
+    color: var(--link-disabled-color);
   }
 }
 
 %link-with-visited-state {
   @extend %link;
 
+  --link-visited-color: var(--clickable-text-used-color);
+
   &:visited {
-    color: var(--clickable-text-used-color);
+    color: var(--link-visited-color);
+  }
+}
+
+%link-button {
+  @extend %link;
+  font: inherit;
+  background: transparent;
+  padding: 0;
+  border: 0;
+
+  &:disabled {
+    color: var(--link-disabled-color);
+    cursor: not-allowed;
   }
 }
diff --git a/indico/web/client/styles/design_system/_popup.scss b/indico/web/client/styles/design_system/_popup.scss
index b281a94ac25..12d92216c74 100644
--- a/indico/web/client/styles/design_system/_popup.scss
+++ b/indico/web/client/styles/design_system/_popup.scss
@@ -5,6 +5,7 @@
 // modify it under the terms of the MIT License; see the
 // LICENSE file for more details.
 
+@use './variables';
 @use 'utils';
 
 %popup-title {
diff --git a/indico/web/client/styles/design_system/_regions.scss b/indico/web/client/styles/design_system/_regions.scss
new file mode 100644
index 00000000000..583d57d750f
--- /dev/null
+++ b/indico/web/client/styles/design_system/_regions.scss
@@ -0,0 +1,21 @@
+// This file is part of Indico.
+// Copyright (C) 2002 - 2023 CERN
+//
+// Indico is free software; you can redistribute it and/or
+// modify it under the terms of the MIT License; see the
+// LICENSE file for more details.
+
+@use './variables';
+
+%region-emphasized {
+  --region-padding: var(--container-padding);
+  background: var(--background-secondary);
+  padding: var(--region-padding);
+}
+
+%region-header {
+  --region-padding: var(--container-padding);
+  background: var(--background-secondary);
+  padding: var(--region-padding);
+  border-bottom: 1px solid var(--container-separator-color);
+}
diff --git a/indico/web/client/styles/design_system/_tags.scss b/indico/web/client/styles/design_system/_tags.scss
new file mode 100644
index 00000000000..e9501ee07c4
--- /dev/null
+++ b/indico/web/client/styles/design_system/_tags.scss
@@ -0,0 +1,22 @@
+// This file is part of Indico.
+// Copyright (C) 2002 - 2023 CERN
+//
+// Indico is free software; you can redistribute it and/or
+// modify it under the terms of the MIT License; see the
+// LICENSE file for more details.
+
+%tag {
+  --tag-surface-color: var(--surface-inverse-color);
+  --tag-text-color: var(--text-inverse-color);
+
+  display: inline-flex;
+  align-items: center;
+  padding: 0.1em 1ch 0; // XXX: top 0.1em to align vertically
+
+  background: var(--tag-surface-color);
+  color: var(--tag-text-color);
+  border-radius: var(--control-border-radius);
+  font-size: var(--text-size-rel-xs);
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+}
diff --git a/indico/web/client/styles/design_system/_text.scss b/indico/web/client/styles/design_system/_text.scss
new file mode 100644
index 00000000000..492fbea7e49
--- /dev/null
+++ b/indico/web/client/styles/design_system/_text.scss
@@ -0,0 +1,139 @@
+// This file is part of Indico.
+// Copyright (C) 2002 - 2023 CERN
+//
+// Indico is free software; you can redistribute it and/or
+// modify it under the terms of the MIT License; see the
+// LICENSE file for more details.
+
+@use './variables';
+@use './link';
+
+%secondary-text-normal {
+  color: var(--text-secondary-color);
+}
+
+%key-heading {
+  color: var(--accent-secondary-color);
+  font-size: var(--text-size-rel-xl);
+  font-weight: normal; // TODO: This needs to be moved to reset
+  margin: 0; // TODO: move this to reset once all text-related things are fixed
+  line-height: 1.2;
+}
+
+%formatted-text-block {
+  font: inherit;
+  line-height: 1.4;
+  --table-first-column-alignment: left;
+  --table-other-column-alignment: right;
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 1em 0 0.5em;
+    font: inherit;
+  }
+
+  h1 {
+    font-size: var(--text-size-rel-xxl);
+  }
+
+  h2 {
+    font-size: var(--text-size-rel-xl);
+  }
+
+  h3 {
+    font-size: var(--text-size-rel-l);
+  }
+
+  h4 {
+    font-size: var(--text-size-rel-n);
+  }
+
+  h5 {
+    font-size: var(--test-size-rel-s);
+  }
+
+  h6 {
+    font-size: var(--text-size-rel-xs);
+    font-weight: bold;
+  }
+
+  h4,
+  h5,
+  h6 {
+    text-transform: uppercase;
+  }
+
+  p,
+  ul,
+  blockquote,
+  pre {
+    margin-bottom: 1em;
+  }
+
+  p {
+    max-width: var(--content-max-readable-width);
+  }
+
+  ul,
+  ol {
+    margin-left: 1em;
+  }
+
+  code {
+    font-family: monospace;
+  }
+
+  pre {
+    background: var(--background-secondary);
+    padding: 0.5em 1em;
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  th {
+    font-weight: bold;
+  }
+
+  th,
+  td {
+    border-top: var(--table-border-width) solid var(--table-border-color);
+    border-bottom: var(--table-border-width) solid var(--table-border-color);
+    padding: 0.5em 0.2em;
+  }
+
+  thead tr:last-child th {
+    border-bottom: var(--table-header-border-width) solid var(--table-header-border-color);
+  }
+
+  tr :first-child {
+    text-align: var(--table-first-column-alignment);
+  }
+
+  tr :not(:first-child) {
+    text-align: var(--table-other-column-alignment);
+  }
+
+  tbody tr:hover :is(td, th) {
+    background: var(--highlight-color);
+  }
+
+  blockquote {
+    padding: 0.2em 0 0.2em 1em;
+    border-left: 2px solid var(--container-separator-color);
+  }
+
+  blockquote p:last-child {
+    margin-bottom: 0;
+  }
+
+  a {
+    @extend %link;
+  }
+}
diff --git a/indico/web/client/styles/design_system/_utils.scss b/indico/web/client/styles/design_system/_utils.scss
index e833230e704..567fbecd4f0 100644
--- a/indico/web/client/styles/design_system/_utils.scss
+++ b/indico/web/client/styles/design_system/_utils.scss
@@ -14,3 +14,7 @@
   outline: medium solid Highlight;
   outline: medium solid -webkit-focus-ring-color;
 }
+
+%text-size-reset {
+  font-size: 1.143rem;
+}
diff --git a/indico/web/client/styles/design_system/variables.scss b/indico/web/client/styles/design_system/variables.scss
index 11b039b5c04..e1655bebd9b 100644
--- a/indico/web/client/styles/design_system/variables.scss
+++ b/indico/web/client/styles/design_system/variables.scss
@@ -10,15 +10,32 @@ body {
   --text-color: #333;
   --text-inverse-color: #fff;
   --text-disabled-color: #999;
+  --text-secondary-color: #6e6e6e;
+  --background-secondary: #f7f7f7;
   --surface-default: #e8e8e8;
+  --surface-inverse-color: var(--text-color);
+  --surface-accent-color: var(--accent-color);
   --surface-highlight-color: #c4c4c4;
+  --surface-highlight-inverse-color: var(--text-secondary-color);
   --surface-disabled-color: #f9f9f9;
+  --surface-disabled-inverse-color: #757575;
   --border-default-color: #5a5a5a;
   --border-disabled-color: #c4c4c4;
-  --accent-color: #007cac;
+  --accent-color: #0075a3;
+  --accent-secondary-color: #cc6300; // XXX: min font size 1.2rem or 1rem bold (or solid icon)
   --accent-highlight-color: #035e81;
+  --accent-border-color: #05425b;
   --active-color: #db1a1a;
-  --visited-color: #8d14f0;
+  --visited-color: #5c079b;
+  --protected-color: #cc6300; // XXX: min font size 1.2rem or 1rem bold (or solid icon)
+  --highlight-color: #fff9b8; // XXX: Subtle highlight / background of large highlighted areas
+  --attention-color: #fd0; // XXX: Small UI bits that scream for attention
+
+  --text-red-color: #db1a1a;
+  --text-green-color: #216901;
+  --text-blue-color: #0164c1;
+  --text-brown-color: #60331f;
+  --text-orange-color: #b73701;
 
   // Generic controls
   --control-border-color: var(--border-default-color);
@@ -29,35 +46,51 @@ body {
   --control-alt-text-color: var(--text-inverse-color);
   --control-alt-clickable-surface-color: var(--accent-color);
   --control-alt-clickable-surface-focus-color: var(--accent-highlight-color);
-  --control-alt-border-color: var(--accent-color);
+  --control-alt-border-color: var(--accent-border-color);
   --control-disabled-text-color: var(--text-disabled-color);
   --control-disabled-clickable-surface-color: var(--surface-disabled-color);
   --control-disabled-border-color: var(--surface-disabled-color);
   --control-indented-bg-color: var(--surface-disabled-color);
   --control-disabled-indented-bg-color: var(--text-disabled-color);
   --control-disabled-inset-indented-color: var(--text-disabled-color);
-  --control-border: 1px solid var(--control-border-color);
+  --control-border-width: 1px;
   --control-border-radius: 0.15em;
   --control-padding: 0.5em;
   --control-internal-gap: 0.2em;
 
   // Clickable texts (e.g., link)
   --clickable-text-color: var(--accent-color);
+  --clickable-text-highlight-color: var(--accent-secondary-color);
   --clickable-text-active-color: var(--active-color);
   --clickable-text-used-color: var(--visited-color);
   --clickable-text-disabled-color: var(--text-disabled-color);
 
-  // Generic container
+  // Tables
+  --table-border-color: var(--control-border-color);
+  --table-border-width: 1px;
+  --table-header-border-color: var(--control-border-color);
+  --table-header-border-width: 2px;
+
+  // Containers
   --container-padding: 1em;
   --container-narrow-padding: 1em 0.5em;
   --container-element-spacing: 0.5em;
+  --container-separator-color: #d0d0d0;
+
+  // Layouts
+  --content-gap-within-inline: 0.2em;
+  --content-gap-normal: 0.5em;
+  --content-gap-between-groups: 1em;
+  --content-gap-between-sections: 2em;
+  --content-max-readable-width: 40em;
 
   // Messages (banners, notifications, etc)
-  --message-important-surface-color: #fff9b8;
+  --message-important-surface-color: var(--highlight-color);
   --message-important-text-color: var(--text-color);
 
   // Text sizes (relative)
-  --text-size-rel-s: 75%;
+  --text-size-rel-xs: 75%; // XXX: use only for all-caps text
+  --text-size-rel-s: 87.5%;
   --text-size-rel-n: 100%;
   --text-size-rel-l: 120%;
   --text-size-rel-xl: 150%;
@@ -84,4 +117,14 @@ body {
   //
   // You don't need to do this for descendants. Just once in the outermost container.
   --text-size-global-adjust: 1.14;
+
+  // Animations
+  --transition-quick: 0.2s;
+
+  // Tags
+  --tag-generic-color: var(--accent-color);
+  --tag-disabled-color: var(--surface-disabled-inverse-color);
+
+  // Modal controls
+  --modal-control-box-shadow: 0 0.5em 2em rgba(0, 0, 0, 0.3);
 }
diff --git a/indico/web/client/styles/partials/_main.scss b/indico/web/client/styles/partials/_main.scss
index 6cb6400d6f0..284b8a0f0d3 100644
--- a/indico/web/client/styles/partials/_main.scss
+++ b/indico/web/client/styles/partials/_main.scss
@@ -8,29 +8,57 @@
 @use 'base' as *;
 @use 'partials/icons' as *;
 @use 'partials/buttons' as *;
+@use 'design_system';
 
 /* Styles for the main menu */
 
-.toolbar.global-menu {
-  @include font-family-title-light();
+#global-menu {
+  @extend %text-size-reset;
 
-  height: 3em;
-  line-height: 3em;
-
-  padding: 0 0 0 20px;
-  background: $black;
+  padding: 0 1.4em;
+  background: var(--surface-inverse-color);
   border: none;
   margin-bottom: 0;
 
-  > a {
-    @include transition(background-color);
+  li {
+    list-style: none; // FIXME: This should be in the global reset
+  }
 
-    display: inline-block;
-    height: 3em;
-    line-height: 3em;
+  > menu {
+    @extend %flex-row;
+  }
 
-    color: white;
-    padding: 0 20px;
+  ind-menu > button::after {
+    @extend %icon;
+    @extend %icon-arrow-down;
+    display: block; // XXX: Required for transform to work
+  }
+
+  ind-menu > button[aria-expanded='true']::after {
+    transform: rotateX(-180deg);
+  }
+
+  ind-menu > menu {
+    border: 1px solid white;
+  }
+
+  ind-menu > menu :is(li, a) {
+    width: 100%;
+  }
+
+  > menu li {
+    list-style: none;
+    padding: 0;
+  }
+
+  li :is(a, button) {
+    @extend %flex-row;
+    flex: none;
+
+    background: var(--surface-inverse-color);
+    color: var(--text-inverse-color);
+    padding: 0.7em 1em;
+    border: none;
 
     &:first-child,
     &.arrow:last-of-type {
@@ -39,7 +67,7 @@
 
     &:hover,
     &.open {
-      background: $light-black !important;
+      background: var(--surface-highlight-inverse-color);
     }
 
     &.arrow {
diff --git a/indico/web/templates/header.html b/indico/web/templates/header.html
index ee5546ff551..72973f32d15 100644
--- a/indico/web/templates/header.html
+++ b/indico/web/templates/header.html
@@ -25,75 +25,74 @@
         </div>
     </div>
 
-    <div class="global-menu toolbar">
+    <div id="global-menu" class="global-menu toolbar">
         {% block global_menu %}
-            {% for item in top_menu_items recursive %}
-                {% if loop.depth0 %}
-                    {# we're inside a section #}
-                    <li>
-                        {% if item.section == 'create-event' and item.url in ('lecture', 'meeting', 'conference') %}
-                            {# special handling for event creation links #}
-                            {{ create_event_link(category, item.url, item.title, id=item.name) }}
-                        {% else %}
-                            <a href="{{ item.url }}">{{ item.title }}</a>
-                        {% endif %}
-                    </li>
-                {% elif not item.is_section %}
-                    <a href="{{ item.url }}">{{ item.title }}</a>
-                {% elif item.items %}
-                    <a class="arrow js-dropdown" href="#" data-toggle="dropdown">{{ item.title }}</a>
-                    <ul class="i-dropdown">
-                        {{ loop(item.items) }}
-                    </ul>
-                {% endif %}
-            {% endfor %}
+            <menu>
+                {% for item in top_menu_items recursive %}
+                    {% if loop.depth0 %}
+                        {# we're inside a section #}
+                        <li>
+                            {% if item.section == 'create-event' and item.url in ('lecture', 'meeting', 'conference') %}
+                                {# special handling for event creation links #}
+                                {{ create_event_link(category, item.url, item.title, id=item.name) }}
+                            {% else %}
+                                <a href="{{ item.url }}">{{ item.title }}</a>
+                            {% endif %}
+                        </li>
+                    {% elif not item.is_section %}
+                        <li><a href="{{ item.url }}">{{ item.title }}</a></li>
+                    {% elif item.items %}
+                        <li>
+                            <ind-menu>
+                                <button>{{ item.title }}</button>
+                                <menu>
+                                    {{ loop(item.items) }}
+                                </menu>
+                            </ind-menu>
+                        </li>
+                    {% endif %}
+                {% endfor %}
+            </menu>
         {% endblock %}
     </div>
 </div>
 
-<script type="text/html" id="event-type-tooltip-lecture">
-    {%- trans -%}
-        A <strong>lecture</strong> is a simple event to announce a talk.
-    {%- endtrans -%}
-    <br>
-    {%- trans -%}
-        <strong>Features</strong>:
-        poster creation, participant management, ...
-    {%- endtrans -%}
-</script>
-<script type="text/html" id="event-type-tooltip-meeting">
-    {%- trans -%}
-        A <strong>meeting</strong> is an event that defines an agenda with multiple talks.
-    {%- endtrans -%}
-    <br>
-    {%- trans -%}
-        <strong>Features</strong>:
-        timetable, minutes, poster creation, participants management, ...
-    {%- endtrans -%}
-</script>
-<script type="text/html" id="event-type-tooltip-conference">
-    {%- trans -%}
-        A <strong>conference</strong> is a complex event with features to manage the whole life cycle of a conference.
-    {%- endtrans -%}
-    <br>
-    {%- trans -%}
-        <strong>Features</strong>:
-        call for abstracts, registration, e-payment, timetable, badges creation, paper reviewing,...
-    {%- endtrans -%}
-</script>
-
-<script>
-    (function() {
-        'use strict';
-
-        ['lecture', 'meeting', 'conference'].forEach(function(evt_type) {
-            $('#create-' + evt_type).qtip({
-                content: $('#event-type-tooltip-' + evt_type).html(),
-                position: {
-                    my: 'left center',
-                    at: 'right center'
-                }
-            });
-        });
-    })();
-</script>
+<template data-tooltip-for="create-lecture">
+    <p>
+        {%- trans -%}
+            A <strong>lecture</strong> is a simple event to announce a talk.
+        {%- endtrans -%}
+    </p>
+    <p>
+        {%- trans -%}
+            <strong>Features</strong>:
+            poster creation, participant management, ...
+        {%- endtrans -%}
+    </p>
+</template>
+<template data-tooltip-for="create-meeting">
+    <p>
+        {%- trans -%}
+            A <strong>meeting</strong> is an event that defines an agenda with multiple talks.
+        {%- endtrans -%}
+    </p>
+    <p>
+        {%- trans -%}
+            <strong>Features</strong>:
+            timetable, minutes, poster creation, participants management, ...
+        {%- endtrans -%}
+    </p>
+</template>
+<template data-tooltip-for="create-conference">
+    <p>
+        {%- trans -%}
+            A <strong>conference</strong> is a complex event with features to manage the whole life cycle of a conference.
+        {%- endtrans -%}
+    </p>
+    <p>
+        {%- trans -%}
+            <strong>Features</strong>:
+            call for abstracts, registration, e-payment, timetable, badges creation, paper reviewing,...
+        {%- endtrans -%}
+    </p>
+</template>