Skip to content

Instantly share code, notes, and snippets.

View robdodson's full-sized avatar
🏠
Working from home

Rob Dodson robdodson

🏠
Working from home
2.9k followers · 49 following
View GitHub Profile
@robdodson
robdodson / custom-listbox.html
Created October 4, 2017 17:17
<custom-listbox role="listbox"
aria-describedby="generated-id1 generated-id2"
aria-activedescendant="generated-id3">
@robdodson
robdodson / aom-example.js
Created October 4, 2017 17:16
// default role is "slider"
// set using private accessibleNode by the element author
<custom-slider id="mySlider">
// element consumer changes role to "button"
mySlider.accessibleNode.role = "button"
// element consumer nulls role
mySlider.accessibleNode.role = null
@robdodson
robdodson / custom-slider.js
Created October 4, 2017 17:16
class CustomSlider extends HTMLElement {
constructor() {
super();
this.accessibleNode.role = 'slider';
this.accessibleNode.valueMin = 0;
this.accessibleNode.valueMax = 5;
this.accessibleNode.valueNow = 3;
this.accessibleNode.valueText = 3;
}
}
@robdodson
robdodson / custom-slider.html
Last active October 4, 2017 17:15
<custom-slider min="0" max="5" value="3" role="slider"
tabindex="0" aria-valuemin="0" aria-valuemax="5"
aria-valuenow="3" aria-valuetext="3"></custom-slider>
@robdodson
robdodson / readme.md
Created September 1, 2017 21:56
How to enable the experimental DevTools accessibility panel
  1. Go to chrome://flags/#enable-devtools-experiments and click 'Enable'. This will turn on the experiment in your version of Chrome.
  2. Restart Chrome.
  3. Open your DevTools and click the three vertical dots in the top right to open the context menu.
  4. Click on 'Settings'.
  5. Click on the 'Experiments' tab on the left hand side.
  6. Check the box next to 'Accessibility Inspection'.
  7. Close the DevTools, then reopen them.
  8. You're all set! Go inspect an element in the Elements panel and you should see a new 'Accessibility' tab over near the Style inspector.
@robdodson
robdodson / index.ejs
Created July 17, 2017 17:56
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello World</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<my-element></my-element>
@robdodson
robdodson / my-element.html
Created July 17, 2017 17:54
<!-- src/my-element.html -->
<link rel="import" href="../bower_components/polymer/polymer-element.html">
<dom-module id="my-element">
<template>
<h1>Hello, World! It's [[today]].</h1>
</template>
<script type=”module”>
// Heyyyy, we're pulling in a Node module!
@robdodson
robdodson / webpack.config.js
Last active November 22, 2023 13:33
/* webpack.config.js */
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var path = require('path');
module.exports = {
// Tell Webpack which file kicks off our app.
entry: path.resolve(__dirname, 'src/index.js'),
// Tell Weback to output our bundle to ./dist/bundle.js
@robdodson
robdodson / index.html
Last active July 14, 2017 04:52
Load Web Components polyfills with HTMLWebpackPlugin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello World</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<my-element></my-element>
@robdodson
robdodson / ce-bindings.md
Last active July 8, 2017 17:38

How should Preact handle setting objects and arrays on undefined Custom Element properties?

Example of current behavior.

1. Server side rendering a Custom Element

In this scenario you're just trying to bootstrap a Custom Element with some data so it can render as soon as it hits the page. You don't have the ability to set properties, so serializing objects and arrays to string attributes seems like the only way to do it? Custom Elements could be written to expect this and call JSON.parse on their obj/arr observed attributes.

2. Lazy loading the definition for a Custom Element