Subject of the issue

The buttons in Adapt are in need of modernisation. This includes a categorisation activity to group similar visual styles or actions together, normalising the implementation of styles across Adapt, and a visual refresh.

• Categorise into relevant sections. Example for illustration purposes:
  • Navigation
  • Component - accordion item
  • Component UI - media transcript
  • Question - mcq item
  • Question UI - submit
  • Overlay - bookmarking yes / no
  • Overlay UI - close
• Normalise button styles
  • Perhaps a mixin based approach would work here
• Visual refresh
  • Vanilla disabled state opacity

Categorisation

The grouping of buttons with similar visual styles or actions would help with presenting a consistent approach to the end user. Currently UI elements such as narrative controls have the same visual treatment as component elements like accordion items potentially introducing confusion to the end user when similarly styled elements behave differently visually and functionally.

For example:

• Narrative controls on the first / last items are disabled and cannot be interacted with
• Accordion items, styled the same as narrative controls, become visited when interacted with (and can continue to be selected)
• The narrative controls change to the disabled styling whilst accordion items change to visited styling

Normalisation

The button styles in Adapt are quite simplistic in approach and don't necessarily lend themselves to supporting the range of styling requirements or states required in Adapt. The introduction of a mixin layer above the base variables could go some of the way to satisfying the need for normalising the implementation.

Example code snippet:

.btn-default() {
  background-color: @btn-color;
  color: @btn-color-inverted;
  border: 1px solid @btn-color-border;
  box-shadow: 0 0 0 0 @btn-color-shadow;
}

.btn-hover() {
  background-color: @btn-color-hover;
  color: @btn-color-inverted-hover;
  border: 1px solid @btn-color-border-hover;
  box-shadow: 2px 2px 5px 0px @btn-color-shadow-hover;
  .transition(background-color @duration ease-in, color @duration ease-in, border @duration ease-in, box-shadow @duration ease-in;);
}

.btn-focus() {
  background-color: @btn-color-focus;
  color: @btn-color-inverted-focus;
  border: 1px solid @btn-color-border-focus;
  box-shadow: 0 0 8px 0 @btn-color-shadow-focus;
}

.btn-disabled() {
  background-color: @btn-color-disabled;
  color: @btn-color-inverted-disabled;
  border: 1px solid @btn-color-border-disabled;
  box-shadow: 0 0 0 0 @btn-color-shadow-disabled;
}

Which is then applied at the various elements in a fashion similar to the following:

.narrative {
  &__controls {
    .btn-default;

    .no-touch &:not(.is-disabled):not(.is-locked):hover {
      .btn-hover;
    }

    html:not(.a11y-disable-focusoutline) &:focus-visible {
      .btn-focus;
    }
  }

  &__controls.is-disabled {
    .btn-disabled;
  }
}

Visual style

While we're undergoing this examination of the buttons, it's prudent to also consider the visual style of the buttons in Adapt. Perhaps we could look to refresh the colour scheme and or style of the buttons through out.

Working list of where buttons appear in Adapt at present:

• navigation icon button
• navigation text button (skip nav)
• menu item
• accordion item
• hotgraphic pin
• matching drop down
• media transcript
• narrative controls (next / back)
• narrative strapline
• question submit
• question feedback
• assessmentResults retry
• trickle
• drawer icon (back / close)
• drawer item
• resources filter
• notify close
• notify text buttons (bookmarking)
• notify (hotgraphic) pagination