From 7d9e81b940ab388247cdcaccc6d10f80b9c15cb5 Mon Sep 17 00:00:00 2001
From: Oliver Foster <oliver.foster@kineo.com>
Date: Tue, 2 May 2023 09:42:42 +0100
Subject: [PATCH] New: Added Navigation Button API (#339)

---
 js/device.js                       |   8 +-
 js/models/NavigationButtonModel.js |  19 +++
 js/models/NavigationModel.js       |  15 ++
 js/navigation.js                   |  24 +---
 js/views/NavigationButtonView.js   | 174 +++++++++++++++++++++++
 js/views/adaptView.js              |   4 +-
 js/views/navigationView.js         | 219 +++++++++++++++++++++--------
 less/_defaults/_variables.less     |   3 +
 less/core/drawer.less              |  12 +-
 less/core/nav.less                 |  84 ++++++++++-
 schema/course.model.schema         |  43 ++++++
 schema/course.schema.json          |  41 ++++++
 templates/drawer.hbs               |   2 +-
 templates/nav.hbs                  |  10 +-
 templates/navButton.jsx            |  21 +++
 15 files changed, 585 insertions(+), 94 deletions(-)
 create mode 100644 js/models/NavigationButtonModel.js
 create mode 100644 js/models/NavigationModel.js
 create mode 100644 js/views/NavigationButtonView.js
 create mode 100644 templates/navButton.jsx

diff --git a/js/device.js b/js/device.js
index 538c8b48..1168c2fe 100644
--- a/js/device.js
+++ b/js/device.js
@@ -19,7 +19,8 @@ class Device extends Backbone.Controller {
     this.osVersion = this.bowser.os.version || '';
     this.renderingEngine = this.getRenderingEngine();
     this.listenTo(Adapt, {
-      'configModel:dataLoaded': this.onConfigDataLoaded
+      'configModel:dataLoaded': this.onConfigDataLoaded,
+      'navigationView:postRender': this.setNavigationHeight
     });
     const browser = this.browser.toLowerCase();
     // Convert 'msie' and 'internet explorer' to 'ie'.
@@ -105,6 +106,10 @@ class Device extends Backbone.Controller {
     document.documentElement.style.setProperty('--adapt-viewport-height', `${window.innerHeight}px`);
   }
 
+  setNavigationHeight() {
+    document.documentElement.style.setProperty('--adapt-navigation-height', `${$('.nav').height()}px`);
+  }
+
   getOperatingSystem() {
     let os = this.bowser.os.name.toLowerCase() || '';
 
@@ -141,6 +146,7 @@ class Device extends Backbone.Controller {
     this.screenWidth = this.getScreenWidth();
     this.screenHeight = this.getScreenHeight();
     this.setViewportHeight();
+    this.setNavigationHeight();
 
     if (previousWidth === this.screenWidth && previousHeight === this.screenHeight) {
       // Do not trigger a change if the viewport hasn't actually changed.  Scrolling on iOS will trigger a resize.
diff --git a/js/models/NavigationButtonModel.js b/js/models/NavigationButtonModel.js
new file mode 100644
index 00000000..61362c0a
--- /dev/null
+++ b/js/models/NavigationButtonModel.js
@@ -0,0 +1,19 @@
+import LockingModel from 'core/js/models/lockingModel';
+
+export default class NavigationButtonModel extends LockingModel {
+
+  defaults() {
+    return {
+      _id: '',
+      _classes: '',
+      _iconClasses: '',
+      _order: 0,
+      _event: '',
+      _showLabel: null,
+      _role: 'button',
+      ariaLabel: '',
+      text: '{{ariaLabel}}'
+    };
+  }
+
+}
diff --git a/js/models/NavigationModel.js b/js/models/NavigationModel.js
new file mode 100644
index 00000000..9913b211
--- /dev/null
+++ b/js/models/NavigationModel.js
@@ -0,0 +1,15 @@
+import LockingModel from 'core/js/models/lockingModel';
+
+export default class NavigationModel extends LockingModel {
+
+  defaults() {
+    return {
+      _navigationAlignment: 'top',
+      _isBottomOnTouchDevices: false,
+      _showLabel: false,
+      _showLabelAtWidth: 'medium',
+      _labelPosition: 'auto'
+    };
+  }
+
+}
diff --git a/js/navigation.js b/js/navigation.js
index 56e9c6d4..b655c356 100644
--- a/js/navigation.js
+++ b/js/navigation.js
@@ -1,37 +1,23 @@
 import Adapt from 'core/js/adapt';
 import NavigationView from 'core/js/views/navigationView';
-import device from './device';
+import NavigationModel from './models/NavigationModel';
 
 class NavigationController extends Backbone.Controller {
 
   initialize() {
-    this.listenTo(Adapt, {
-      'adapt:preInitialize': this.addNavigationBar,
-      'adapt:preInitialize device:resize': this.onDeviceResize
-    });
+    this.navigation = new NavigationView();
+    this.listenTo(Adapt, 'adapt:preInitialize', this.addNavigationBar);
   }
 
   addNavigationBar() {
     const adaptConfig = Adapt.course.get('_navigation');
-
     if (adaptConfig?._isDefaultNavigationDisabled) {
       Adapt.trigger('navigation:initialize');
       return;
     }
-
-    Adapt.navigation = new NavigationView();// This should be triggered after 'app:dataReady' as plugins might want to manipulate the navigation
-  }
-
-  onDeviceResize() {
-    const adaptConfig = Adapt.course.get('_navigation');
-    const $html = $('html');
-    $html.addClass('is-nav-top');
-    let navigationAlignment = adaptConfig?._navigationAlignment ?? 'top';
-    const isBottomOnTouchDevices = (device.touch && adaptConfig?._isBottomOnTouchDevices);
-    if (isBottomOnTouchDevices) navigationAlignment = 'bottom';
-    $html.removeClass('is-nav-top').addClass('is-nav-' + navigationAlignment);
+    this.navigation.start(new NavigationModel(adaptConfig));
   }
 
 }
 
-export default new NavigationController();
+export default (Adapt.navigation = (new NavigationController()).navigation);
diff --git a/js/views/NavigationButtonView.js b/js/views/NavigationButtonView.js
new file mode 100644
index 00000000..a0d8cce8
--- /dev/null
+++ b/js/views/NavigationButtonView.js
@@ -0,0 +1,174 @@
+import Adapt from 'core/js/adapt';
+import wait from 'core/js/wait';
+import { compile, templates } from 'core/js/reactHelpers';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import router from 'core/js/router';
+import startController from 'core/js/startController';
+import a11y from 'core/js/a11y';
+import location from 'core/js/location';
+
+export default class NavigationButtonView extends Backbone.View {
+
+  tagName() {
+    return 'button';
+  }
+
+  events() {
+    return {
+      click: 'triggerEvent'
+    };
+  }
+
+  className() {
+    if (this.isInjectedButton) {
+      return [
+        this.model.get('_showLabel') === false && 'hide-label'
+      ].filter(Boolean).join(' ');
+    }
+    return [
+      'btn-icon nav__btn',
+      this.model.get('_classes'),
+      this.model.get('_showLabel') === false && 'hide-label'
+    ].filter(Boolean).join(' ');
+  }
+
+  attributes() {
+    const attributes = this.model.toJSON();
+    if (this.isInjectedButton) {
+      return {
+        name: attributes._id,
+        'data-order': attributes._order,
+        'data-event': attributes._event
+      };
+    }
+    return {
+      name: attributes._id,
+      role: attributes._role === 'button' ? undefined : attributes._role,
+      'aria-label': attributes.ariaLabel,
+      'data-order': attributes._order,
+      'data-event': attributes._event
+    };
+  }
+
+  initialize({ el }) {
+    if (el) {
+      this.isInjectedButton = true;
+    } else {
+      this.isJSX = (this.constructor.template || '').includes('.jsx');
+    }
+    this._classSet = new Set(_.result(this, 'className').trim().split(/\s+/));
+    this._attributes = _.result(this, 'attributes');
+    this.listenTo(this.model, 'change', this.changed);
+    this.render();
+  }
+
+  static get template() {
+    return 'navButton.jsx';
+  }
+
+  render() {
+    if (this.isInjectedButton) {
+      this.changed();
+    } else if (this.isJSX) {
+      this.changed();
+    } else {
+      const data = this.model.toJSON();
+      data.view = this;
+      const template = Handlebars.templates[this.constructor.template];
+      this.$el.html(template(data));
+    }
+    return this;
+  }
+
+  updateViewProperties() {
+    const classesToAdd = _.result(this, 'className').trim().split(/\s+/);
+    classesToAdd.forEach(i => this._classSet.add(i));
+    const classesToRemove = [ ...this._classSet ].filter(i => !classesToAdd.includes(i));
+    classesToRemove.forEach(i => this._classSet.delete(i));
+    Object.keys(this._attributes).forEach(name => this.$el.removeAttr(name));
+    Object.entries(_.result(this, 'attributes')).forEach(([name, value]) => this.$el.attr(name, value));
+    this.$el.removeClass(classesToRemove).addClass(classesToAdd);
+  }
+
+  injectLabel() {
+    const textLabel = this.$el.find('> .nav__btn-label');
+    const ariaLabel = this.$el.attr('aria-label') ?? this.$el.find('.aria-label').text();
+    const text = this.model.get('text');
+    const output = compile(text ?? '', { ariaLabel });
+    if (!textLabel.length) {
+      this.$el.append(`<span class="nav__btn-label" aria-hidden="true">${output}</span>`);
+      return;
+    }
+    textLabel.html(output);
+  }
+
+  /**
+   * Re-render
+   * @param {string} eventName=null Backbone change event name
+   */
+  changed(eventName = null) {
+    if (typeof eventName === 'string' && eventName.startsWith('bubble')) {
+      // Ignore bubbling events as they are outside of this view's scope
+      return;
+    }
+    if (this.isInjectedButton) {
+      this.updateViewProperties();
+      this.injectLabel();
+      return;
+    }
+    if (!this.isJSX) {
+      this.updateViewProperties();
+      return;
+    }
+    const props = {
+      // Add view own properties, bound functions etc
+      ...this,
+      // Add model json data
+      ...this.model.toJSON(),
+      // Add globals
+      _globals: Adapt.course?.get('_globals')
+    };
+    const Template = templates[this.constructor.template.replace('.jsx', '')];
+    this.updateViewProperties();
+    ReactDOM.render(<Template {...props} />, this.el);
+  }
+
+  triggerEvent(event) {
+    event.preventDefault();
+    const currentEvent = $(event.currentTarget).attr('data-event');
+    if (!currentEvent) return;
+    Adapt.trigger('navigation:' + currentEvent);
+    switch (currentEvent) {
+      case 'backButton':
+        router.navigateToPreviousRoute();
+        break;
+      case 'homeButton':
+        router.navigateToHomeRoute();
+        break;
+      case 'parentButton':
+        router.navigateToParent();
+        break;
+      case 'skipNavigation':
+        a11y.focusFirst('.' + location._contentType);
+        break;
+      case 'returnToStart':
+        startController.returnToStartLocation();
+        break;
+    }
+  }
+
+  remove() {
+    this._isRemoved = true;
+    this.stopListening();
+    wait.for(end => {
+      if (this.isJSX) {
+        ReactDOM.unmountComponentAtNode(this.el);
+      }
+      super.remove();
+      end();
+    });
+    return this;
+  }
+
+}
diff --git a/js/views/adaptView.js b/js/views/adaptView.js
index 8f80f410..45270ad0 100644
--- a/js/views/adaptView.js
+++ b/js/views/adaptView.js
@@ -27,9 +27,9 @@ class AdaptView extends Backbone.View {
     this.isJSX = (this.constructor.template || '').includes('.jsx');
     if (this.isJSX) {
       this._classSet = new Set(_.result(this, 'className').trim().split(/\s+/));
-      this.listenTo(this.model, 'all', this.changed);
+      this.listenTo(this.model, 'change', this.changed);
       const children = this.model?.getChildren?.();
-      children && this.listenTo(children, 'all', this.changed);
+      children && this.listenTo(children, 'change', this.changed);
       // Facilitate adaptive react views
       this.listenTo(Adapt, 'device:changed', this.changed);
     }
diff --git a/js/views/navigationView.js b/js/views/navigationView.js
index 8932e3b4..52031d34 100644
--- a/js/views/navigationView.js
+++ b/js/views/navigationView.js
@@ -1,21 +1,19 @@
 import Adapt from 'core/js/adapt';
-import a11y from 'core/js/a11y';
-import location from 'core/js/location';
-import router from 'core/js/router';
-import startController from 'core/js/startController';
+import device from 'core/js/device';
 import tooltips from '../tooltips';
 import _ from 'underscore';
+import NavigationButtonView from './NavigationButtonView';
+import NavigationButtonModel from '../models/NavigationButtonModel';
 
 class NavigationView extends Backbone.View {
 
   className() {
-    return 'nav';
-  }
-
-  events() {
-    return {
-      'click [data-event]': 'triggerEvent'
-    };
+    return [
+      'nav',
+      this.model?.get('_showLabel') === true ? 'show-label' : 'hide-label',
+      `show-label-${this.model?.get('_showLabelAtWidth') || 'medium'}`,
+      `has-label-${this.model?.get('_labelPosition') || 'auto'}`
+    ].filter(Boolean).join(' ');
   }
 
   attributes() {
@@ -24,17 +22,53 @@ class NavigationView extends Backbone.View {
     };
   }
 
+  get buttons() {
+    return (this._buttons = this._buttons || []);
+  }
+
+  set buttons(value) {
+    this._buttons = value;
+  }
+
   initialize() {
+    _.bindAll(this, 'sortNavigationButtons');
+    this._classSet = new Set(_.result(this, 'className').trim().split(/\s+/));
+  }
+
+  start(model) {
     tooltips.register({
       _id: 'back',
       ...Adapt.course.get('_globals')?._extensions?._navigation?._backNavTooltip || {}
     });
-    _.bindAll(this, 'sortNavigationButtons');
+    this.model = model;
+    this.listenTo(model, 'change', this.update);
     this.listenToOnce(Adapt, 'courseModel:dataLoading', this.remove);
-    this.listenTo(Adapt, 'router:menu router:page', this.hideNavigationButton);
+    this.listenTo(Adapt, {
+      'router:contentObject': this.hideNavigationButton,
+      'adapt:preInitialize device:resize': this.onDeviceResize
+    });
+    this.update();
     this.preRender();
   }
 
+  update() {
+    this.updateViewProperties();
+    this.onDeviceResize();
+  }
+
+  onDeviceResize() {
+    let {
+      _navigationAlignment = 'top',
+      _isBottomOnTouchDevices = false
+    } = this.model.toJSON();
+    const $html = $('html');
+    const isBottomOnTouchDevices = (device.touch && _isBottomOnTouchDevices);
+    if (isBottomOnTouchDevices) _navigationAlignment = 'bottom';
+    $html
+      .removeClass('is-nav-top is-nav-bottom')
+      .addClass('is-nav-' + _navigationAlignment);
+  }
+
   preRender() {
     Adapt.trigger('navigationView:preRender', this);
     this.render();
@@ -47,68 +81,143 @@ class NavigationView extends Backbone.View {
       _globals: Adapt.course.get('_globals'),
       _accessibility: Adapt.config.get('_accessibility')
     })).insertBefore('#app');
-    this.listenForInjectedButtons();
+    this.sortNavigationButtons();
     _.defer(() => {
-      Adapt.trigger('navigationView:postRender', this);
+      Adapt.trigger('navigationView:postRender navigation:ready', this);
     });
-
     return this;
   }
 
-  triggerEvent(event) {
-    event.preventDefault();
-    const currentEvent = $(event.currentTarget).attr('data-event');
-    Adapt.trigger('navigation:' + currentEvent);
-    switch (currentEvent) {
-      case 'backButton':
-        router.navigateToPreviousRoute();
-        break;
-      case 'homeButton':
-        router.navigateToHomeRoute();
-        break;
-      case 'parentButton':
-        router.navigateToParent();
-        break;
-      case 'skipNavigation':
-        this.skipNavigation();
-        break;
-      case 'returnToStart':
-        startController.returnToStartLocation();
-        break;
-    }
-  }
-
-  skipNavigation() {
-    a11y.focusFirst('.' + location._contentType);
-  }
-
-  hideNavigationButton(model) {
-    const shouldHide = (model.get('_type') === 'course');
-    this.$('.nav__back-btn, .nav__home-btn').toggleClass('u-display-none', shouldHide);
+  updateViewProperties() {
+    const classesToAdd = _.result(this, 'className').trim().split(/\s+/);
+    classesToAdd.forEach(i => this._classSet.add(i));
+    const classesToRemove = [ ...this._classSet ].filter(i => !classesToAdd.includes(i));
+    classesToRemove.forEach(i => this._classSet.delete(i));
+    this._setAttributes({ ..._.result(this, 'attributes'), id: _.result(this, 'id') });
+    this.$el.removeClass(classesToRemove).addClass(classesToAdd);
   }
 
   listenForInjectedButtons() {
     this.observer = this.observer || new MutationObserver(this.sortNavigationButtons);
     this.observer.observe(this.$('.nav__inner')[0], {
-      childList: true
+      childList: true,
+      attributes: true,
+      subtree: true
     });
   }
 
-  sortNavigationButtons() {
-    this.observer.disconnect();
-    const container = this.$('.nav__inner')[0];
-    const items = [...container.children];
-    items
-      .sort((a, b) => parseFloat($(a).attr('data-order') || 0) - parseFloat($(b).attr('data-order') || 0))
-      .forEach(item => container.appendChild(item));
-    this.observer.takeRecords();
+  sortNavigationButtons(changed) {
+    if (Array.isArray(changed)) {
+      // Summarize mutation observer changes
+      const changes = Object.entries(changed.reduce((changes, change) => {
+        const changeTypeName = `${change.type}.${change.attributeName}`;
+        changes[changeTypeName] = changes[changeTypeName] || 0;
+        changes[changeTypeName]++;
+        return changes;
+      }, {}));
+      // Ignore blur event changes as this will interrupt focus assignment
+      const shouldIgnore = changes.every(([key]) => [
+        'attributes.data-a11y-force-focus',
+        'attributes.tabindex',
+        'attributes.aria-hidden',
+        'attributes.aria-expanded'
+      ].includes(key));
+      if (shouldIgnore) return;
+    }
+    this.observer?.disconnect();
+    const $container = this.$('.nav__inner');
+    const items = [...$container[0].children];
+    const identifiers = {
+      '.js-nav-drawer-btn': 'drawer',
+      '.js-nav-back-btn': 'back',
+      '.js-nav-home-btn': 'home',
+      '*': null
+    };
+    // Capture existing children and make models and views for any which
+    //  weren't registered in the api.
+    items.forEach(el => {
+      const $el = $(el);
+      // Ignore spacers
+      if ($el.is('.nav__spacer')) return;
+      // Try to generate an id
+      const foundId = (
+        $el.attr('name') ??
+        Object.entries(identifiers).find(([classes]) => $el.is(classes))?.[1]
+      ) || $el.attr('class');
+      const attributes = {
+        _id: foundId,
+        _order: parseFloat($el.attr('data-order') || 0),
+        _event: $el.attr('data-event')
+      };
+      const existingButton = this.getButton(attributes._id);
+      if (existingButton) {
+        if (!existingButton.isInjectedButton) return;
+        if (existingButton.el !== el) {
+          // Update injected buttons with new element if necessary
+          existingButton.undelegateEvents();
+          existingButton.el = el;
+          existingButton.$el = $(el);
+          existingButton.delegateEvents();
+        }
+        // Attempt to render changes on inject buttons
+        existingButton.model.set(attributes);
+        existingButton.changed();
+        return;
+      };
+      // Add missing buttons
+      const navigationButtonModel = new NavigationButtonModel(attributes);
+      this.addButton(new NavigationButtonView({
+        el,
+        model: navigationButtonModel
+      }));
+    });
+    // Sort items and add to dom in sorted order
+    //   Make sure not to move any item with focus as it will lose focus
+    const focusElement = document.activeElement;
+    items.sort((a, b) => parseFloat($(a).attr('data-order') || 0) - parseFloat($(b).attr('data-order') || 0));
+    let indexOfFocused = items.findIndex(el => el === focusElement);
+    if (indexOfFocused === -1) indexOfFocused = Infinity;
+    const before = items.slice(0, indexOfFocused);
+    const after = items.slice(indexOfFocused + 1);
+    before.reverse().forEach(el => $container.prepend(el));
+    after.forEach(el => $container.append(el));
+    this.observer?.takeRecords();
     this.listenForInjectedButtons();
   }
 
+  hideNavigationButton(contentObjectModel) {
+    const shouldHide = (contentObjectModel.get('_type') === 'course');
+    this.$('.nav__back-btn, .nav__home-btn').toggleClass('u-display-none', shouldHide);
+  }
+
   showNavigationButton() {
     this.$('.nav__back-btn, .nav__home-btn').removeClass('u-display-none');
   }
 
+  addButton(buttonView) {
+    this.buttons.push(buttonView);
+    const container = this.$('.nav__inner');
+    container.append(buttonView.$el);
+    this.listenTo(buttonView.model, 'change', this.sortNavigationButtons);
+    // Injected button are added from sortNavigationButtons, prevent recursion
+    if (buttonView.isInjectedButton) return;
+    this.sortNavigationButtons();
+  }
+
+  getButton(id) {
+    return this.buttons.find(button => button.model.get('_id') === id);
+  }
+
+  removeButton(buttonView) {
+    this.buttons = this.buttons.filter(view => view !== buttonView);
+    this.stopListening(buttonView.model, 'change', this.sortNavigationButtons);
+    if (buttonView.isInjectedButton) {
+      buttonView.$el.remove();
+      return;
+    }
+    buttonView.remove();
+  }
+
 }
 
 NavigationView.template = 'nav';
diff --git a/less/_defaults/_variables.less b/less/_defaults/_variables.less
index 9a5899c6..cbcffdc4 100644
--- a/less/_defaults/_variables.less
+++ b/less/_defaults/_variables.less
@@ -1,5 +1,6 @@
 :root {
   --adapt-viewport-height: 100vh;
+  --adapt-navigation-height: calc(@icon-size + (@icon-padding * 2));
 }
 
 // body {
@@ -81,6 +82,8 @@
 
 // Navigation height
 // --------------------------------------------------
+// Deprecated @navigation-height: Navigation height is now set
+// by --adapt-navigation-height and is updated by JS
 @navigation-height: @icon-size + (@icon-padding * 2);
 
 // Focus outline
diff --git a/less/core/drawer.less b/less/core/drawer.less
index 5d067e7d..5f5cd72e 100644
--- a/less/core/drawer.less
+++ b/less/core/drawer.less
@@ -22,7 +22,7 @@
   &__inner {
     position: relative;
     height: 100%;
-    padding-top: @navigation-height;
+    padding-top: var(--adapt-navigation-height);
   }
 
   // Add top padding equal to the height of the navigation bar
@@ -40,20 +40,20 @@
     position: absolute;
     top: 0;
     width: 100%;
+    height: var(--adapt-navigation-height);
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
   }
 
   &__back {
-    .u-float-left;
+    margin-right: auto;
   }
 
   &__back .icon {
     .icon-controls-small-left;
   }
 
-  &__close {
-    .u-float-right;
-  }
-
   &__close .icon {
     .icon-cross;
   }
diff --git a/less/core/nav.less b/less/core/nav.less
index 6bfa7cf1..173db245 100644
--- a/less/core/nav.less
+++ b/less/core/nav.less
@@ -1,11 +1,11 @@
 // Add top padding equal to the height of the navigation bar
 // --------------------------------------------------
 html.is-nav-top #wrapper {
-  padding-top: @navigation-height;
+  padding-top: var(--adapt-navigation-height);
 }
 
 html.is-nav-bottom #wrapper {
-  padding-bottom: @navigation-height;
+  padding-bottom: var(--adapt-navigation-height);
 }
 
 .nav {
@@ -24,16 +24,74 @@ html.is-nav-bottom #wrapper {
   &__inner {
     .l-container-responsive(@max-page-width);
     display: flex;
-    align-items: center;
+    align-items: stretch;
   }
 
-  // Override floats on additional `nav__btn` elements part of plugins
-  // that haven't been updated to work with data-order yet.
-  // Can be removed in time.
   &__btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    // Override floats on additional `nav__btn` elements part of plugins
+    // that haven't been updated to work with data-order yet.
+    // Can be removed in time.
     float: none !important;
   }
 
+  &.hide-label &__btn-label,
+  &__btn.hide-label &__btn-label {
+    display: none;
+  }
+
+  &.show-label {
+    .show-nav-label(small);
+    .show-nav-label(medium);
+    .show-nav-label(large);
+  }
+
+  &.has-label-right &__btn-label {
+    margin-left: (@icon-padding / 2);
+  }
+
+  &.has-label-bottom {
+    .nav__btn {
+      flex-direction: column;
+    }
+
+    .nav__btn-label {
+      margin-top: (@icon-padding / 2);
+    }
+  }
+
+  &.has-label-top {
+    .nav__btn {
+      flex-direction: column;
+    }
+
+    .nav__btn-label {
+      order: -1;
+      margin-bottom: (@icon-padding / 2);
+    }
+  }
+  
+  .has-label-left &__btn-label {
+    order: -1;
+  }
+
+  &.has-label-left &__btn-label {
+    margin-right: (@icon-padding / 2);
+  }
+
+  &.has-label-auto {
+    .dir-rtl & .nav__btn-label {
+      margin-right: (@icon-padding / 2);
+    }
+
+    .dir-ltr & .nav__btn-label {
+      margin-left: (@icon-padding / 2);
+    }
+  }
+
   &__spacer {
     flex-grow: 1;
   }
@@ -64,3 +122,17 @@ html.is-nav-bottom #wrapper {
     .icon-list;
   }
 }
+
+// Show nav label at breakpoints
+.show-nav-label(@size) {
+  &.show-label-@{size} {
+    .nav__btn-label { display: none }
+
+    .nav__btn:not(.hide-label) .nav__btn-label {
+      @breakpoint: "device-width-@{size}";
+      @media (min-width: @@breakpoint) {
+        display: initial;
+      }
+    }
+  }
+}
diff --git a/schema/course.model.schema b/schema/course.model.schema
index 8a287df7..eadb9cd3 100644
--- a/schema/course.model.schema
+++ b/schema/course.model.schema
@@ -685,6 +685,49 @@
           "inputType": "Checkbox",
           "validators": [],
           "title": "Is bottom on touch devices?"
+        },
+        "_showLabel": {
+          "type": "boolean",
+          "default": false,
+          "required": true,
+          "inputType": "Checkbox",
+          "validators": [],
+          "title": "Show navigation button labels"
+        },
+        "_showLabelAtWidth": {
+          "type": "string",
+          "required": true,
+          "default": "medium",
+          "title": "Show label at this breakpoint and higher",
+          "inputType": {
+            "type": "Select",
+            "options": [
+                "any",
+                "small",
+                "medium",
+                "large"
+            ]
+          },
+          "validators": [],
+          "help": "When the user's browser window is at least this wide, the labels will be shown. Options refer to the standard Adapt breakpoints. The 'any' option will show the label at any size."
+        },
+        "_labelPosition": {
+          "type": "string",
+          "required": true,
+          "default": "auto",
+          "title": "Label position",
+          "inputType": {
+            "type": "Select",
+            "options": [
+                "auto",
+                "top",
+                "bottom",
+                "left",
+                "right"
+            ]
+          },
+          "validators": [],
+          "help": "Where to show the label in relation to the button icons"
         }
       }
     },
diff --git a/schema/course.schema.json b/schema/course.schema.json
index dee2d20d..d089b7c7 100644
--- a/schema/course.schema.json
+++ b/schema/course.schema.json
@@ -634,6 +634,47 @@
               "_adapt": {
                 "editorOnly": true
               }
+            },
+            "_showLabel": {
+              "type": "boolean",
+              "title": "Show navigation button labels",
+              "default": false,
+              "_adapt": {
+                "editorOnly": true
+              }
+            },
+            "_showLabelAtWidth": {
+              "type": "string",
+              "title": "Show label at this breakpoint and higher",
+              "description": "When the user's browser window is at least this wide, the labels will be shown. Options refer to the standard Adapt breakpoints. The 'any' option will show the label at any size.",
+              "default": "medium",
+              "enum": [
+                "any",
+                "small",
+                "medium",
+                "large"
+              ],
+              "_backboneForms": "Select",
+              "_adapt": {
+                "editorOnly": true
+              }
+            },
+            "_labelPosition": {
+              "type": "string",
+              "title": "Label position",
+              "description": "Where to show the label in relation to the button icons",
+              "default": "auto",
+              "enum": [
+                "auto",
+                "top",
+                "bottom",
+                "left",
+                "right"
+              ],
+              "_backboneForms": "Select",
+              "_adapt": {
+                "editorOnly": true
+              }
             }
           }
         },
diff --git a/templates/drawer.hbs b/templates/drawer.hbs
index a634c051..6b6f0a45 100644
--- a/templates/drawer.hbs
+++ b/templates/drawer.hbs
@@ -2,7 +2,7 @@
 
   <span id="drawer-heading" class="aria-label">{{_globals._accessibility._ariaLabels.drawer}}</span>
 
-  <div class="drawer__toolbar u-clearfix">
+  <div class="drawer__toolbar">
 
     <div class="drawer__back">
       <button class="btn-icon drawer__btn drawer__back-btn js-drawer-back-btn" aria-label="{{_globals._accessibility._ariaLabels.previous}}">
diff --git a/templates/nav.hbs b/templates/nav.hbs
index 9e572eef..cfa628e9 100644
--- a/templates/nav.hbs
+++ b/templates/nav.hbs
@@ -5,21 +5,23 @@
 <div class="nav__inner">
 
   {{#if _accessibility._isSkipNavigationEnabled}}
-  <button class="btn-text nav__btn nav__skip-btn" data-event="skipNavigation" aria-label="{{_globals._accessibility._ariaLabels.skipNavigation}}" data-order="{{_globals._extensions._navigation._skipButton._navOrder}}">
-    {{{_globals._accessibility.skipNavigationText}}}
+  <button name="skipButton" class="btn-icon nav__btn nav__skip-btn show-label" data-event="skipNavigation" aria-label="{{_globals._accessibility._ariaLabels.skipNavigation}}" data-order="{{_globals._extensions._navigation._skipButton._navOrder}}">
+    <span class='nav__btn-label' aria-hidden="true">{{_globals._accessibility.skipNavigationText}}</span>
   </button>
   {{/if}}
 
-  <button class="btn-icon nav__btn nav__back-btn js-nav-back-btn u-display-none" data-event="backButton" aria-label="{{_globals._accessibility._ariaLabels.previous}}" data-tooltip-id="back" role="link" data-order="{{_globals._extensions._navigation._backButton._navOrder}}">
+  <button name="backButton" class="btn-icon nav__btn nav__back-btn js-nav-back-btn u-display-none" data-event="backButton" aria-label="{{_globals._accessibility._ariaLabels.previous}}" data-tooltip-id="back" role="link" data-order="{{_globals._extensions._navigation._backButton._navOrder}}">
     <span class="icon" aria-hidden="true"></span>
+    <span class='nav__btn-label' aria-hidden="true">{{_globals._accessibility._ariaLabels.previous}}</span>
   </button>
 
   {{#each _globals._extensions._navigation._spacers}}
     <div class="nav__spacer" aria-hidden="true" data-order="{{_navOrder}}"></div>
   {{/each}}
 
-  <button class="btn-icon nav__btn nav__drawer-btn js-nav-drawer-btn is-position-{{_config._drawer._position}}" data-event="toggleDrawer" aria-expanded="false" aria-label="{{_globals._accessibility._ariaLabels.navigationDrawer}}" data-order="{{_globals._extensions._drawer._navOrder}}" data-tooltip-id="drawer">
+  <button name="drawer" class="btn-icon nav__btn nav__drawer-btn js-nav-drawer-btn is-position-{{_config._drawer._position}}" data-event="toggleDrawer" aria-expanded="false" aria-label="{{_globals._accessibility._ariaLabels.navigationDrawer}}" data-order="{{_globals._extensions._drawer._navOrder}}" data-tooltip-id="drawer">
     <span class="icon" aria-hidden="true"></span>
+    <span class='nav__btn-label' aria-hidden="true">{{_globals._accessibility._ariaLabels.navigationDrawer}}</span>
   </button>
 
 </div>
diff --git a/templates/navButton.jsx b/templates/navButton.jsx
new file mode 100644
index 00000000..2a4a8989
--- /dev/null
+++ b/templates/navButton.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { classes, compile } from 'core/js/reactHelpers';
+
+export default function NavButton(props) {
+  const {
+    text,
+    _iconClasses
+  } = props;
+  return (
+    <>
+      <span
+        className={classes([
+          'icon',
+          _iconClasses
+        ])}
+        aria-hidden="true"
+      />
+      <span className="nav__btn-label" aria-hidden="true">{compile(text, props)}</span>
+    </>
+  );
+}