API Doc

messages

mixins

error Anchor to error









@mixin error($key, $self-closing: false) { 
  @include item('error', $key, $self-closing);
 }

View source on GitHub

Description

Defines an error

Parameters
parameter Name parameter Description parameter Type parameter Default value
$key

Key used to fetch message in $messages map

String none
$self-closing

Whether or not to use message on self or next node

Bool false
Example
.selector {
  @include error("no-src");
}

warning Anchor to warning









@mixin warning($key, $self-closing: false) { 
  @include item('warning', $key, $self-closing);
 }

View source on GitHub

Description

Defines a warning

Parameters
parameter Name parameter Description parameter Type parameter Default value
$key

Key used to fetch message in $messages map

String none
$self-closing

Whether or not to use message on self or next node

Bool false
Example
.selector {
  @include warning("abbr");
}

obsolete Anchor to obsolete









@mixin obsolete($key, $self-closing: false) { 
  @include item('obsolete', $key, $self-closing);
 }

View source on GitHub

Description

Defines an obsolete thing

Parameters
parameter Name parameter Description parameter Type parameter Default value
$key

Key used to fetch message in $messages map

String none
$self-closing

Whether or not to use message on self or next node

Bool false
Example
.selector {
  @include obsolete("any");
}

advice Anchor to advice









@mixin advice($key, $self-closing: false) { 
  @include item('advice', $key, $self-closing);
 }

View source on GitHub

Description

Defines an advice

Parameters
parameter Name parameter Description parameter Type parameter Default value
$key

Key used to fetch message in $messages map

String none
$self-closing

Whether or not to use message on self or next node

Bool false
Example
.selector {
  @include advice("nav");
}

disable-tests Anchor to disable-tests





@mixin disable-tests($keys...) { 
  @each $key in $keys {
    $disabled-tests: append($disabled-tests, $key) !global;
  }
 }

View source on GitHub

Description

Disable specific tests

Parameters
parameter Name parameter Description parameter Type parameter Default value
$keys

Keys of tests to disable

Arglist none
Example
@include disable-tests('error:tab-order', 'advice:empty-class');
Requires

a11y-head Anchor to a11y-head









@mixin a11y-head($tag..., $theme...) { 
  // Because it's in the <head>
  display: block !important;

  &::after {
    @include a11y-before;
    content: $tag;
    background: change-color(theme-conf($theme, 'color'), $saturation: 75%, $lightness: 95%) !important;
    border-color: change-color(theme-conf($theme, 'color'), $saturation: 50%, $lightness: 50%) !important;
    color: change-color(theme-conf($theme, 'color'), $saturation: 50%, $lightness: 25%) !important;
  }
 }

View source on GitHub

Description

Display messages on <head>'s tags

Parameters
parameter Name parameter Description parameter Type parameter Default value
$tag

Text to display, recommended: tag name

Arglist none
$theme

Message's level

Arglist none
Example
@include a11y-head('title', 'error')

Configuration

mixins

set-minimum-level Anchor to set-minimum-level





@mixin set-minimum-level($level) { 
  $level: to-lower-case($level);
  $levels: map-keys($themes);

  @if not index($levels, $level) {
    $default-level: nth($levels, -1);
    $level: $default-level;

    @warn 'Level `#{$level}` does not exist. '
      + 'Please choose one of `#{inspect($levels)}`. '
      + 'Falling back on `#{$default-level}`';
  }

  $minimum-level: $level !global;
 }

View source on GitHub

Description

Defines the minimum level used by a11y.css. Either:

  • error for errors only;
  • warning for errors and warnings;
  • obsolete for everything but advices;
  • advice for everything.

Parameters
parameter Name parameter Description parameter Type parameter Default value
$level none String none
Output

Nothing

Example
@include set-minimum-level('error');
Requires

base-content Anchor to base-content





@mixin base-content($minimum-level) { 
  $background: ();
  $content: ();

  // @note Line breaks can be triggered by «\A» within the message content.
  // @see issue #7, solution from @7studio
  @each $theme in map-keys($themes) {
    @if is-level-enough($theme) {
      $background-offset: theme-conf($theme, 'background-offset');
      $background-theme:
        transparent $background-offset,
        theme-conf($theme, 'color') $background-offset,
        theme-conf($theme, 'color') ($background-offset + 0.2em),
        transparent ($background-offset + 0.2em);
      $background: append($background, $background-theme, 'comma');
      $content-theme: quote(message('ui', $theme)) ': ' #{counter(unquote($theme))} '\A ';
      $content: append($content, $content-theme);
    }
  }

  background-image: linear-gradient(to bottom, transparent, $background, transparent 100%);
  content: $content;
 }

View source on GitHub

Description

Defines head::after’s content and background-image depending on $minimum-level.

Parameters
parameter Name parameter Description parameter Type parameter Default value
$minimum-level

Inheriting minimum level

String none
Output

content and background-image

Example
@include base-content($minimum-level);
Requires

a11y Anchor to a11y













@mixin a11y($theme, $key, $self-closing: false) { 
  $base-selector: '&::before';
  $event-selector: '&:hover::before, &:focus::before';

  counter-increment: unquote($theme);
  outline: 4px solid theme-conf($theme, 'color') !important;
  outline-offset: -4px;

  @if $self-closing {
    $base-selector: '& ~ ::after';
    $event-selector: '&:hover ~ ::after, &:focus ~ ::after';
    background-color: transparentize(theme-conf($theme, 'color'), .75) !important;
  }

  #{$base-selector} {
    @include a11y-before;
    @include message($theme, $key);
    background: change-color(theme-conf($theme, 'color'), $saturation: 75%, $lightness: 95%) !important;
    border-color: change-color(theme-conf($theme, 'color'), $saturation: 50%, $lightness: 50%) !important;
    color: change-color(theme-conf($theme, 'color'), $saturation: 50%, $lightness: 25%) !important;
    z-index: theme-conf($theme, 'index') !important;
  }

  #{$event-selector} {
    @include a11y-hover;
  }
 }

View source on GitHub

Description

Main mixin to display a message.

Parameters
parameter Name parameter Description parameter Type parameter Default value
$theme

Theme

String none
$key

Key used to fetch message in $messages map

String none
$self-closing

Whether or not to use message on self or next node

Bool false

a11y-reset Anchor to a11y-reset

@mixin a11y-reset() { 
  &,
  &:hover,
  &:focus {
    counter-increment: none !important;
    outline: none !important;
    outline-offset: 0 !important;

    &::before,
    & ~ ::after {
      content: '' !important;
    }
  }
 }

View source on GitHub

Description

Provides a way to cancel a message.

variables

themes Anchor to themes

$themes: (
  'error': (
    'icon': '\2620\00A0',
    'color': #911,
    'index': 2147483647,
    'background-offset': 1.4em
  ),
  'warning': (
    'icon': '\2622\00A0',
    'color': gold,
    'index': 2147483646,
    'background-offset': 2.9em
  ),
  'obsolete': (
    'icon': '\271D\00A0',
    'color': royalblue,
    'index': 2147483645,
    'background-offset': 4.4em
  ),
  'advice': (
    'icon': '\2665\00A0',
    'color': olivedrab,
    'index': 2147483644,
    'background-offset': 5.9em
  ),
);

View source on GitHub

Description

This map holds configuration for all themes. Each theme has an icon, a color and a z-index, and a background offset.

Type

Map

Map structure
Map key Name Map key Description Map key Type Map key Value
theme none Map none
theme.icon

Theme icon

String none
theme.color

Theme color

Color none
theme.index

Theme z-index

Number none
theme.background-offset

Theme background-offset

Length none
Used by