How to use the @lrnwebcomponents/a11y-behaviors/a11y-behaviors.js.A11yBehaviors function in @lrnwebcomponents/a11y-behaviors
To help you get started, we’ve selected a few @lrnwebcomponents/a11y-behaviors examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
elmsln / lrnwebcomponents / elements / video-player / video-player.es6.js View on Github 
source$="[[source]]" // The source URL of the media
sticky-corner$="[[stickyCorner]]" // When user scrolls a playing video off-screen,
which corner will it stick to? Values are:
top-right (default), top-left, bottom-left, bottom-right,
and none (to turn sticky off)
thumbnail-src$="[[thumbnailSrc]]" // Optional thumbanil/cover image url
width$="[[width]]"> // The width of the media
<div slot="caption">Optional caption info.</div>- @demo demo/index.html
- @customElement video-player */ class VideoPlayer extends MediaBehaviorsVideo( A11yBehaviors(SchemaBehaviors(SimpleColorsPolymer)) ) {
// render function static get template() { return html` <style> :host { display: block; margin: 0 0 15px; } .video-caption { font-style: italic; margin: 0; padding: 8px; @apply --video-player-caption-theme; }</style>
elmsln / lrnwebcomponents / elements / video-player / video-player.js View on Github source$="[[source]]" // The source URL of the media
sticky-corner$="[[stickyCorner]]" // When user scrolls a playing video off-screen,
which corner will it stick to? Values are:
top-right (default), top-left, bottom-left, bottom-right,
and none (to turn sticky off)
thumbnail-src$="[[thumbnailSrc]]" // Optional thumbanil/cover image url
width$="[[width]]"> // The width of the media
<div slot="caption">Optional caption info.</div>- @demo demo/index.html
- @customElement video-player */ class VideoPlayer extends MediaBehaviorsVideo( A11yBehaviors(SchemaBehaviors(SimpleColorsPolymer)) ) { // render function static get template() { return html` <style> :host { display: block; margin: 0 0 15px; } .video-caption { font-style: italic; margin: 0; padding: 8px; @apply --video-player-caption-theme; } </style>
elmsln / lrnwebcomponents / elements / video-player / src / video-player.js View on Github source$="[[source]]" // The source URL of the media
sticky-corner$="[[stickyCorner]]" // When user scrolls a playing video off-screen,
which corner will it stick to? Values are:
top-right (default), top-left, bottom-left, bottom-right,
and none (to turn sticky off)
thumbnail-src$="[[thumbnailSrc]]" // Optional thumbanil/cover image url
width$="[[width]]"> // The width of the media
<div slot="caption">Optional caption info.</div>- @demo demo/index.html
- @customElement video-player
/
class VideoPlayer extends MediaBehaviorsVideo(
A11yBehaviors(SchemaBehaviors(SimpleColorsPolymer))
) {
/ REQUIRED FOR TOOLING DO NOT TOUCH /
/*
- Store the tag name to make it easier to obtain directly.
- @notice function name must be here for tooling to operate correctly / static get tag() { return "video-player"; } /*
- life cycle, element is afixed to the DOM */ connectedCallback() { super.connectedCallback(); }
elmsln / lrnwebcomponents / elements / hero-banner / hero-banner.js View on Github /**
* Copyright 2018 The Pennsylvania State University
* @license Apache-2.0, see License.md for full text.
*/
import { html } from "@polymer/polymer/polymer-element.js";
import { SimpleColorsPolymer } from "@lrnwebcomponents/simple-colors/lib/simple-colors-polymer.js";
import { A11yBehaviors } from "@lrnwebcomponents/a11y-behaviors/a11y-behaviors.js";
/**
* `hero-banner`
* @customElement hero-banner
* `That thing no one wants to make over and over again yet always does...`
* @demo demo/index.html
*/
class HeroBanner extends A11yBehaviors(SimpleColorsPolymer) {
constructor() {
super();
import("@polymer/paper-button/paper-button.js");
import("@polymer/iron-image/iron-image.js");
}
static get template() {
return html`
<style>
:host {
display: block;
width: 100%;
min-height: 600px;
height: 100%;
max-height: 600px;
overflow: hidden;
position: relative;</style>import { html } from "@polymer/polymer/polymer-element.js";
import { afterNextRender } from "@polymer/polymer/lib/utils/render-status.js";
import { SimpleColors } from "@lrnwebcomponents/simple-colors/simple-colors.js";
import { HAXWiring } from "@lrnwebcomponents/hax-body-behaviors/lib/HAXWiring.js";
import { A11yBehaviors } from "@lrnwebcomponents/a11y-behaviors/a11y-behaviors.js";
/**
`simple-concept-network`
A small but effective little data visualizer for topics surrounding
a central concept, much like the ELMS:LN snowflake icon.
* @demo demo/index.html
@microcopy - the mental model for this element
- ELMS:LN - The ELMS: Learning Network "snowflake" is a network diagram
*/
class SimpleConceptNetwork extends A11yBehaviors(SimpleColors) {
constructor() {
super();
import("@lrnwebcomponents/simple-concept-network/lib/simple-concept-network-node.js");
afterNextRender(this, function() {
this.HAXWiring = new HAXWiring();
this.HAXWiring.setup(
SimpleConceptNetwork.haxProperties,
SimpleConceptNetwork.tag,
this
);
});
}
static get template() {
return html`
<style>
:host {</style>import { HAXWiring } from "@lrnwebcomponents/hax-body-behaviors/lib/HAXWiring.js";
import { SchemaBehaviors } from "@lrnwebcomponents/schema-behaviors/schema-behaviors.js";
import { A11yBehaviors } from "@lrnwebcomponents/a11y-behaviors/a11y-behaviors.js";
/**
* `self-check`
* @demo demo/index.html
* @microcopy - the mental model for this element
* CSS Variables that override accent color:
* --self-check-question-color //overrides the question background color
* --self-check-question-text //overrides the question text color
* --self-check-heading-color //overrides the heading background color
* --self-check-heading-text //overrides the heading text color
* --self-check-answer-color //overrides the answer background color
* --self-check-answer-text //overrides the answer text color
*/
class SelfCheck extends SchemaBehaviors(A11yBehaviors(SimpleColors)) {
constructor() {
super();
import("@polymer/paper-card/paper-card.js");
import("@polymer/paper-icon-button/paper-icon-button.js");
import("@polymer/iron-icons/editor-icons.js");
import("@polymer/iron-icons/iron-icons.js");
import("@polymer/paper-tooltip/paper-tooltip.js");
}
static get template() {
return html`
<style>
:host {
display: block;
margin: 15px 0;
--self-check-question-color: var(
--simple-colors-default-theme-grey-1,</style>/**
* Copyright 2018 The Pennsylvania State University
* @license Apache-2.0, see License.md for full text.
*/
import { html } from "@polymer/polymer/polymer-element.js";
import { SimpleColorsPolymer } from "@lrnwebcomponents/simple-colors/lib/simple-colors-polymer.js";
import { A11yBehaviors } from "@lrnwebcomponents/a11y-behaviors/a11y-behaviors.js";
/**
* `lrndesign-paperstack`
* @customElement lrndesign-paperstack
* `Stack of papers visually`
*
* @demo demo/index.html
*/
class LrndesignPaperstack extends A11yBehaviors(SimpleColorsPolymer) {
constructor() {
super();
import("@polymer/iron-icon/iron-icon.js");
import("@lrnwebcomponents/lrn-icons/lrn-icons.js");
}
static get template() {
return html`
<style>
:host {
display: block;
font-size: 14px;
--lrndesign-paperstack-bg: var(--simple-colors-default-theme-grey-1);
--lrndesign-paperstack-faded-bg: var(
--simple-colors-default-theme-grey-2
);
--lrndesign-paperstack-border: var(</style>import { html } from "@polymer/polymer/polymer-element.js";
import { SimpleColorsPolymer } from "@lrnwebcomponents/simple-colors/lib/simple-colors-polymer.js";
import { A11yBehaviors } from "@lrnwebcomponents/a11y-behaviors/a11y-behaviors.js";
/**
`simple-concept-network`
A small but effective little data visualizer for topics surrounding
a central concept, much like the ELMS:LN snowflake icon.
* @demo demo/index.html
@microcopy - the mental model for this element
- ELMS:LN - The ELMS: Learning Network "snowflake" is a network diagram
*/
class SimpleConceptNetwork extends A11yBehaviors(SimpleColorsPolymer) {
constructor() {
super();
import("@lrnwebcomponents/simple-concept-network/lib/simple-concept-network-node.js");
}
static get template() {
return html`
<style>
:host {
display: block;
}
:host([visualization="network"]) simple-concept-network-node {
position: relative;
}
:host([visualization="network"])
simple-concept-network-node:nth-child(1) {
top: 150px;</style>/**
* Copyright 2018 The Pennsylvania State University
* @license Apache-2.0, see License.md for full text.
*/
import { html } from "@polymer/polymer/polymer-element.js";
import { afterNextRender } from "@polymer/polymer/lib/utils/render-status.js";
import { SimpleColors } from "@lrnwebcomponents/simple-colors/simple-colors.js";
import { A11yBehaviors } from "@lrnwebcomponents/a11y-behaviors/a11y-behaviors.js";
import { HAXWiring } from "@lrnwebcomponents/hax-body-behaviors/lib/HAXWiring.js";
/**
* `hero-banner`
* `That thing no one wants to make over and over again yet always does...`
* @demo demo/index.html
*/
class HeroBanner extends A11yBehaviors(SimpleColors) {
constructor() {
super();
import("@polymer/paper-button/paper-button.js");
import("@polymer/iron-image/iron-image.js");
}
static get template() {
return html`
<style>
:host {
display: block;
width: 100%;
min-height: 600px;
height: 100%;
max-height: 600px;
overflow: hidden;
position: relative;</style>/**
* Copyright 2018 The Pennsylvania State University
* @license Apache-2.0, see License.md for full text.
*/
import { html } from "@polymer/polymer/polymer-element.js";
import { afterNextRender } from "@polymer/polymer/lib/utils/render-status.js";
import { SimpleColors } from "@lrnwebcomponents/simple-colors/simple-colors.js";
import { HAXWiring } from "@lrnwebcomponents/hax-body-behaviors/lib/HAXWiring.js";
import { A11yBehaviors } from "@lrnwebcomponents/a11y-behaviors/a11y-behaviors.js";
/**
* `lrndesign-paperstack`
* `Stack of papers visually`
*
* @demo demo/index.html
*/
class LrndesignPaperstack extends A11yBehaviors(SimpleColors) {
constructor() {
super();
import("@polymer/iron-icon/iron-icon.js");
import("@lrnwebcomponents/lrn-icons/lrn-icons.js");
afterNextRender(this, function() {
this.HAXWiring = new HAXWiring();
this.HAXWiring.setup(
LrndesignPaperstack.haxProperties,
LrndesignPaperstack.tag,
this
);
});
}
static get template() {
return html`
<style></style>@lrnwebcomponents/a11y-behaviors
Accessibility behaviors / mix-ins to improve a11y overall
