Merge pull request #40 from gasolin/a11y

Bug 1162040 - [accessibility][gaia-icons] Make sure icons are properly localized for accessibility

.jshintrc

@@ -1,4 +1,33 @@
 {
-  "strict": false,
-  "node": true
+  "camelcase": false,
+  "curly": true,
+  "forin": false,
+  "latedef": "nofunc",
+  "newcap": false,
+  "noarg": true,
+  "node": true,
+  "nonew": true,
+  "quotmark": "single",
+  "undef": true,
+  "unused": "vars",
+  "strict": true,
+  "trailing": true,
+  "maxlen": 80,
+
+  "eqnull": true,
+  "esnext": true,
+  "expr": true,
+  "globalstrict": true,
+
+  "maxerr": 1000,
+  "regexdash": true,
+  "laxcomma": true,
+  "proto": true,
+
+  "browser": true,
+  "devel": true,
+  "nonstandard": true,
+  "worker": true,
+
+  "-W078": true
 }

.travis.yml

@@ -0,0 +1,14 @@
+language: node_js
+
+node_js:
+  - '0.10'
+
+install:
+  - npm install
+
+script:
+  - $CI_ACTION
+
+env:
+  matrix:
+    - CI_ACTION="npm run lint"

README.md

@@ -6,16 +6,42 @@
 $ bower install gaia-components/gaia-icons
 ```
 
+Then include folowing file in HTML
+
+```html
+<script src="bower_components/gaia-icons/gaia-icons.js"></script>
+```
+
 ## Usage
 
+Use `i` tag to present an icon.
+
 ```html
-<span data-icon="camera"></span>
+<i data-icon="camera" data-l10n-id="camera"></i>
 ```
 
 ## Examples
 
 - [Example](http://gaia-components.github.io/gaia-icons/)
 
+## Accessibility
+
+`aria-label` will be added automatically when `data-l10n-id` attribute is specified in target element.
+
+```html
+<i data-icon="camera" data-l10n-id="camera"></i>
+```
+
+If the icon is for present only, add `aria-hidden` attribute to make it unreachable by the screen reader.
+
+```html
+<i data-icon="camera" aria-hidden="true"></i>
+```
+
+If the icon is included in certain component, try integrate it as component's `data-icon` attribute and handle the accessiblity related issues automatically.
+
+If `aria-hidden` is not used on the icon, it will always be accessible to the screen reader. Adding `data-l10n-id` to the element with `data-icon` that points to `{property}.ariaLabel` in the properties file (that will add an `aria-label` attribute to the same element and will not touch inner HTML).
+
 ## Contributions
 
 If you wish to make changes to the icon font you'll need to follow these steps:
@@ -57,6 +83,12 @@ $ node bin/report.js path/to/your/project/
 
 Please note, that dynamically inserted icons may still be marked as unused in the report.
 
+## Lint check
+
+Run lint check with command:
+
+`$ npm run lint`
+
 ## Current owners
 
 - Wilson Page [:wilsonpage]

gaia-icons.js

@@ -1,13 +1,13 @@
-(function(define){define(function(require,exports,module){
-/*jshint laxbreak:true*/
+/* global define */
+(function(define){'use strict';define(function(require,exports,module){
 
 /**
  * Exports
  */
 
-var base = window.GAIA_ICONS_BASE_URL
-  || window.COMPONENTS_BASE_URL
-  || 'bower_components/';
+var base = window.GAIA_ICONS_BASE_URL ||
+           window.COMPONENTS_BASE_URL ||
+           'bower_components/';
 
 if (!document.documentElement) {
   window.addEventListener('load', load);
@@ -33,6 +33,6 @@ function isLoaded() {
 }
 
 });})(typeof define=='function'&&define.amd?define
-:(function(n,w){return typeof module=='object'?function(c){
+:(function(n,w){'use strict';return typeof module=='object'?function(c){
 c(require,exports,module);}:function(c){var m={exports:{}};c(function(n){
 return w[n];},m.exports,m);w[n]=m.exports;};})('gaia-icons',this));

package.json

@@ -1,16 +1,27 @@
 {
   "name": "gaia-icons",
   "version": "0.8.0",
+  "homepage": "https://github.com/gaia-components/gaia-icons",
+  "license": "MIT",
   "main": "gaia-icons.js",
-  "scripts": {
-    "gh-pages": "git push upstream master:gh-pages"
-  },
   "devDependencies": {
     "grunt": "^0.4.5",
     "grunt-contrib-clean": "^0.5.0",
     "grunt-rename": "^0.1.3",
     "grunt-replace": "^0.7.8",
     "grunt-webfont": "^0.5.1",
+    "jshint": "^2.7.0",
     "optimist": "^0.6.1"
+  },
+  "scripts": {
+    "lint": "jshint gaia-icons.js",
+    "gh-pages": "git push upstream master:gh-pages"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/gaia-components/gaia-icons.git"
+  },
+  "bugs": {
+    "url": "https://github.com/gaia-components/gaia-icons/issues"
   }
 }