From 5596b788cc411bc7a10f5c78400540209414e9d0 Mon Sep 17 00:00:00 2001 From: Dave Batiste Date: Wed, 10 Jan 2018 15:19:30 -0500 Subject: [PATCH 1/6] Use consistent naming for eslint config. --- .editorconfig | 2 +- .eslintrc => .eslintrc.json | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename .eslintrc => .eslintrc.json (100%) diff --git a/.editorconfig b/.editorconfig index 419173f..df8f468 100644 --- a/.editorconfig +++ b/.editorconfig @@ -8,6 +8,6 @@ insert_final_newline = true indent_style = tab indent_size = 4 -[{bower.json,package.json,.travis.yml}] +[{*.json,*.yml}] indent_style = space indent_size = 2 diff --git a/.eslintrc b/.eslintrc.json similarity index 100% rename from .eslintrc rename to .eslintrc.json From 5532cb1580c39636b446c5efc272ac55aa191427 Mon Sep 17 00:00:00 2001 From: Dave Batiste Date: Wed, 10 Jan 2018 15:19:47 -0500 Subject: [PATCH 2/6] Update code owners. --- CODEOWNERS | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/CODEOWNERS b/CODEOWNERS index 536bc23..c17c334 100644 --- a/CODEOWNERS +++ b/CODEOWNERS @@ -1,2 +1 @@ -* @dlockhart -* @dbatiste +* @dlockhart @dbatiste From 247824f329c15381e44a7fd025f5877839283e15 Mon Sep 17 00:00:00 2001 From: Dave Batiste Date: Wed, 10 Jan 2018 15:20:55 -0500 Subject: [PATCH 3/6] Update dependencies and switch to iron demo page. --- .travis.yml | 8 ++-- README.md | 65 ++++++++++++++++++++++++++++-- bower.json | 23 +++++++---- d2l-offscreen.html | 8 ++++ demo/index.html | 51 +++++++++++++++-------- index.html | 13 ++++++ package.json | 15 ++++--- test/{.eslintrc => .eslintrc.json} | 0 wct.conf.json | 2 +- 9 files changed, 143 insertions(+), 42 deletions(-) create mode 100644 index.html rename test/{.eslintrc => .eslintrc.json} (100%) diff --git a/.travis.yml b/.travis.yml index 17cc1e4..1bd4929 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,6 +1,4 @@ language: node_js -node_js: stable -sudo: false -install: - - npm install - - polymer install --variants +node_js: node +script: +- npm run test diff --git a/README.md b/README.md index 3b9cc41..dccd35d 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,5 @@ # d2l-offscreen +[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/BrightspaceUI/offscreen) [![Bower version][bower-image]][bower-url] [![Build status][ci-image]][ci-url] @@ -21,9 +22,34 @@ Off-screen elements are valuable from an accessibility perspective when you wish Include the [webcomponents.js](http://webcomponents.org/polyfills/) "lite" polyfill (for browsers who don't natively support web components), then import `d2l-offscreen.html`. + +```html +Some offscreen content: +This message will only be visible to assistive technology, such as a screen reader. +``` + ```html - + ``` @@ -43,8 +69,9 @@ You'll still include the web component polyfill, but instead of importing `d2l-o ```html + + + + + + + +
- +

Offscreen

+ + + -
- Some offscreen content: this should be offscreenthis should be offscreen
- -
- - + diff --git a/index.html b/index.html new file mode 100644 index 0000000..ea49996 --- /dev/null +++ b/index.html @@ -0,0 +1,13 @@ + + + + + + d2l-offscreen + + + + + + + diff --git a/package.json b/package.json index cae725c..ff33841 100644 --- a/package.json +++ b/package.json @@ -1,13 +1,12 @@ { "name": "d2l-offscreen", - "version": "2.2.1", "description": "Polymer web component and Sass mixin for positioning elements offscreen", "private": true, "scripts": { - "postinstall": "bower install", - "test": "npm run test:lint:html && npm run test:lint:wc", + "postinstall": "polymer install --variants", "test:lint:html": "eslint *.html", - "test:lint:wc": "polymer lint d2l-offscreen.html" + "test:lint:wc": "polymer lint", + "test": "npm run test:lint:html && npm run test:lint:wc" }, "repository": { "type": "git", @@ -30,9 +29,9 @@ }, "homepage": "https://github.com/BrightspaceUI/offscreen", "devDependencies": { - "eslint": "^2.5.3", - "eslint-config-brightspace": "^0.2.1", - "eslint-plugin-html": "^1.4.0", - "polymer-cli": "^1.1.0" + "eslint": "^4.15.0", + "eslint-config-brightspace": "^0.4.0", + "eslint-plugin-html": "^4.0.1", + "polymer-cli": "^1.5.7" } } diff --git a/test/.eslintrc b/test/.eslintrc.json similarity index 100% rename from test/.eslintrc rename to test/.eslintrc.json diff --git a/wct.conf.json b/wct.conf.json index c33e1ce..1d82cf9 100644 --- a/wct.conf.json +++ b/wct.conf.json @@ -28,7 +28,7 @@ { "browserName": "safari", "platform": "OS X 10.12", - "version": "10.0" + "version": "" }, { "browserName": "microsoftedge", From e8f8d249b51733feab38ba5ee0377907ca402f12 Mon Sep 17 00:00:00 2001 From: Dave Batiste Date: Wed, 10 Jan 2018 15:26:45 -0500 Subject: [PATCH 4/6] Minor readme fixes to adjust order. --- README.md | 30 +++++++++++++++++------------- 1 file changed, 17 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index dccd35d..ab4f650 100644 --- a/README.md +++ b/README.md @@ -22,6 +22,15 @@ Off-screen elements are valuable from an accessibility perspective when you wish Include the [webcomponents.js](http://webcomponents.org/polyfills/) "lite" polyfill (for browsers who don't natively support web components), then import `d2l-offscreen.html`. +```html + + + + +``` + +The `` custom element can now be used in your markup, the children of which will be hidden offscreen. + ```html Some offscreen content: -This message will only be visible to assistive technology, such as a screen reader. + + This message will only be visible to assistive technology, such as a screen reader. + ``` ### Polymer Mixin From c7258f6c6099ffbf21d0c5acd0831d0d105ddb66 Mon Sep 17 00:00:00 2001 From: Dave Batiste Date: Wed, 10 Jan 2018 15:31:51 -0500 Subject: [PATCH 6/6] Minor formatting for readme. --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 7c749cd..df35426 100644 --- a/README.md +++ b/README.md @@ -89,7 +89,9 @@ Alternatively, to position an element offscreen using the Sass mixin, apply the For example, to hide this message: ```html -

This message will only be visible to assistive technology, such as a screen reader.

+

+ This message will only be visible to assistive technology, such as a screen reader. +

``` SCSS: