Polymer-based web component and Sass mixin for positioning elements offscreen
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

README.md

d2l-offscreen

Published on webcomponents.org Bower version Build status

This component contains a Polymer-based web component and mixin, as well as a Sass mixin. Any of these can be used to position elements off the screen in an accessible manor.

For further information on this and other D2L UI components, see the docs at ui.valence.d2l.com.

Installation

d2l-offscreen can be installed from Bower:

bower install d2l-offscreen

Usage

Off-screen elements are valuable from an accessibility perspective when you wish to have elements which are only visible to screen readers. For more information, read WebAIM's article on Invisible Content.

Polymer Web component

Include the webcomponents.js "lite" polyfill (for browsers who don't natively support web components), then import d2l-offscreen.html.

<head>
	<script src="../webcomponentsjs/webcomponents-lite.js"></script>
	<link rel="import" href="../d2l-offscreen/d2l-offscreen.html">
</head>

The <d2l-offscreen> custom element can now be used in your markup, the children of which will be hidden offscreen.

Some offscreen content:
<d2l-offscreen>
	This message will only be visible to assistive technology, such as a screen reader.
</d2l-offscreen>

Polymer Mixin

Alternatively, you can apply the offscreen styles to an existing element using the mixin.

You'll still include the web component polyfill, but instead of importing d2l-offscreen.html, import d2l-offscreen-shared-styles.html. Include d2l-offscreen-shared-styles on your style block and apply the --d2l-offscreen mixin to any CSS selector:

<link rel="import" href="../d2l-offscreen/d2l-offscreen-shared-styles.html">
<style include="d2l-offscreen-shared-styles">

my-element {
	@apply --d2l-offscreen;
}

More on Polymer shared style modules...

Sass Mixin

Alternatively, to position an element offscreen using the Sass mixin, apply the d2l-offscreen() mixin to any CSS selector.

For example, to hide this message:

<p class="offscreen">
	This message will only be visible to assistive technology, such as a screen reader.
</p>

SCSS:

@import 'bower_components/d2l-offscreen/offscreen.scss';
.offscreen {
	@include d2l-offscreen();
}

Developing, Testing and Contributing

After cloning the repo, run npm install to install dependencies.

If you don't have it already, install the Polymer CLI globally:

npm install -g polymer-cli

To start a local web server that hosts the demo page and tests:

polymer serve

To lint (eslint and Polymer lint):

npm run lint

To run unit tests locally using Polymer test:

polymer test --skip-plugin sauce

To lint AND run local unit tests:

npm test