initial commit

.babelrc

@@ -0,0 +1,5 @@
+{
+  "presets": [
+    "es2015"
+  ]
+}

.editorconfig

@@ -0,0 +1,29 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+# This is the top-most EditorConfig file
+root = true
+
+#### All files
+[*]
+## Indents
+# Indent using spaces even when inserting `tab` (soft tabs)
+indent_style = space  
+# The number of spaces for each tab when using soft tabs
+indent_size = 2       
+
+## Newlines
+end_of_line = lf				# Unix-style newlines
+insert_final_newline = true		# Newline ending every file
+
+## Misc
+charset = utf-8 
+# remove whitespace before newline characters
+trim_trailing_whitespace = true 
+
+
+#### Overrides for Markdown files
+[*.md]
+# Don't remove trailing whitespace in markdown files
+trim_trailing_whitespace = false  

.eslintignore

@@ -0,0 +1,4 @@
+jspm_packages
+jspm.browser.js
+jspm.config.js
+docs

.eslintrc.js

@@ -0,0 +1,53 @@
+module.exports = {
+  /* Extend airbnb's style-guide enforcement */
+  "extends": "eslint-config-airbnb/base",
+
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module",
+  },
+
+  "env": {
+    "es6": true,
+    "node": true,
+    "browser": true
+  },
+
+  "rules": {
+    "import/no-unresolved": 0,
+    "import/no-extraneous-dependencies": 0,
+
+    "brace-style": [2, "stroustrup", { "allowSingleLine": true  }],
+    /* Warn about long line */
+    "max-len": [1, 100, 2],
+    /* Warn about use of console */
+    "no-console": [1],
+    /* Warn about use of debugger */
+    "no-debugger": [1],
+    /* Allow nested ternaries */
+    "no-nested-ternary": 0,
+    /* Warn when declaring a variable with a name that already exists in the containing scope */
+    "no-shadow": [1],
+    /* Forbid referencing a variable before it is defined, but allow using declared functions */
+    "no-use-before-define": [2, "nofunc"],
+    /* Warn when referencing an undefined variable */
+    "no-undef": [1],
+    /* Forbid expressions that are never used */
+    "no-unused-expressions": [2, { allowShortCircuit: true, allowTernary: true  }],
+    /* Warn when declaring a variable without using it */
+    "no-unused-vars": [1, {"vars": "local", "args": "none"}],
+    "no-warning-comments": [1, {"terms": ["fixme", "todo"], "location": "start"}],
+    "valid-jsdoc": [2, {
+      "requireReturn": false,
+      "requireParamDescription": false,
+      "requireReturnDescription": false
+    }],
+    /* disallow certain syntax forms */
+    'no-restricted-syntax': [
+      2,
+      'DebuggerStatement',
+      'LabeledStatement',
+      'WithStatement',
+    ],
+  },
+}

.gitattributes

@@ -0,0 +1 @@
+* text=auto

.gitignore

@@ -0,0 +1,14 @@
+# Ignore patternlab files,  except sources
+/pl/*
+!/pl/source
+!/pl/config
+
+# Ignore external packages
+node_modules
+jspm_packages
+
+# Ignore generated files
+/css
+/sgSrc/assets
+/styleguide
+/js/dist

README.md

@@ -0,0 +1,121 @@
+# htz a11y tabs
+
+JavaScript scaffolding for accessible tab interfaces
+
+### Installation
+```bash
+jspm install github:haaretz/htz-a11y-tabs
+```
+
+### Usage
+This module is built to enhance semantic markup into an accessible tab interface, 
+using ARIA and a little javascript.
+
+```js
+// Import
+import a11yTabs from 'htz-a11y-tabs';
+
+// Instanciate
+a11yTabs(tabInterface [,rtl , tablistSelector, tabpanelSelector, activeTab]);
+```
+
+See [here](https://haaretz.github.io/htz-a11y-tabs/) for the full JavaScript documentation.
+
+The tablist should be a `ul` element, with each `li` containing an anchor element
+pointing to the relevant tabpanel (which should, in most likelihood be a `section`
+or an `article` element):
+
+```html
+<section id="tabInterface">
+  <!-- tablist -->
+  <ul>
+    <li><a href="#section1">Section 1</a></li>
+    <li><a href="#section2">Section 2</a></li>
+    <li><a href="#section3">Section 3</a></li>
+    <li><a href="#section4">Section 4</a></li>
+  </ul>
+
+  <!-- tabpanels -->
+  <article>
+    <h2>section 1</h2>
+  </article>
+  <article>
+    <h2>section 2</h2>
+  </article>
+  <article>
+    <h2>section 3</h2>
+  </article>
+  <article>
+    <h2>section 4</h2>
+  </article>
+</section>
+```
+
+The above markup will start us off with a basic list of links to articles within our page, which 
+can still be accessible in the event of any failure in executing the script. Our tab interface can
+now be progressively enhanced using JavaScript and CSS.
+
+Once our tab interface it initialized, its markup will be transformed into:
+
+```html
+<section id="tabInterface">
+  <!-- tablist -->
+  <ul role="tablist">
+    <li role="presentation">
+      <a href="#section1" tabindex="0" role="tab" aria-controls="section1" aria-selected="true">Section 1</a>
+    </li>
+    <li role="presentation">
+      <a href="#section2" tabindex="-1" role="tab" aria-controls="section2">Section 2</a>
+    </li>
+    <li role="presentation">
+      <a href="#section3" tabindex="-1" role="tab" aria-controls="section3">Section 3</a>
+    </li>
+    <li role="presentation">
+      <a href="#section4" tabindex="-1" role="tab" aria-controls="section4">Section 4</a>
+    </li>
+  </ul>
+
+  <!-- tabpanels -->
+  <article id="section1" role="tabpanel">
+    <h2 tabindex="0">section 1</h2>
+  </article>
+  <article id="section2" role="tabpanel" aria-hidden="true">
+    <h2>section 2</h2>
+  </article>
+  <article id="section3" role="tabpanel" aria-hidden="true">
+    <h2>section 3</h2>
+  </article>
+  <article id="section4" role="tabpanel" aria-hidden="true">
+    <h2>section 4</h2>
+  </article>
+</section>
+```
+Make sure that your css hides tabpanels that have the `aria-hidden` attribute 
+set to `true`, and that a tab with the `aria-selected` attribute set to `true` 
+are marked as the active tab. 
+
+The script enables cycling between the selected tab and its content without having cycle 
+through all the other tabs. As per [spec](https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel), 
+moving through the tabs is done with `left` and `right` arrow keys, while moving between the 
+selected tab and the visible tab panel is done using the `tab` key.
+
+Pressing the `tab` key will focus the first element _inside_ the tab panel 
+(which, for semantics sake, should probably be a heading), or the tab panel 
+itself when it does not contain any HTML elements.
+
+### Parameters
+ * **container** (HTMLElement): The wrapper element around the tabs and tab panels.
+ * **rtl** (Boolean): Determine if the tab interface should be right-to-left. _Default: false_.
+ * **tablistSelector** (String): The tablist's selector. _Default: 'ul'_.
+ * **tabpanelSelector** (String): The tabpanels' selector. _Default: 'section'_.
+ * **activeTab** (Integer): The tab number to have initially activated. Zero based. _Default: 0_.
+
+### Events
+ * **'a11y-tabs:init'** - Fired from `container` after a tab interface has been initialized
+ * **'a11y-tabs:destroy'** - Fired from `container` after a tab interface has been destroyed
+ * **'a11y-tabs:before-select'** - Fired from `container` before a tab selection is applied. 
+   If the event handler executes `event.preventDefault()`, the selection will not be applied.
+ * **'a11y-tabs:after-select'** - Fired from `container` after a tab selection is applied.
+
+See [the documentation](https://haaretz.github.io/htz-a11y-tabs/) for details on 
+properties available in each event object.