Merge 8f1d0d4 into 8275e89

CHANGELOG.md

@@ -42,6 +42,7 @@ The following lists show the changes to the library grouped by domain.
 * fixing `supports/focus-label-tabindex` in Chrome 49
 * fixing ShadowDOM related unit tests in WebKit
 * changing modules to be able to load in non-browser environments - [issue #92](https://github.com/medialize/ally.js/issues/92)
+* changing user agent sniffing from detecting browser to rendering engine - [issue #97](https://github.com/medialize/ally.js/issues/97)
 
 #### Testing
 

build/data-tables/focusable-tables.js

@@ -7,7 +7,6 @@ const targetDirectory = path.resolve(cwd, 'web/data-tables/');
 mkdirp.sync(targetDirectory);
 
 const generateTableDocument = require('./utils/generate-table-document');
-const highlightLabel = require('./utils/highlight-label');
 
 // actual browser compatibility data
 const source = require('./utils/aggregated-focusable-data');
@@ -18,6 +17,14 @@ Object.keys(browsers).forEach(function(browser) {
   browsers[browser].versions = browsers[browser].browsers.map(key => source.browsers[key]);
 });
 
+function rowDataAllyNotes(ident, sourceIdent, referencedNotes) {
+  const notes = source.notes.getAlly(ident);
+  notes.forEach(key => referencedNotes.add(String(key)));
+  return {
+    notes,
+  };
+}
+
 generateTableDocument({
   source,
   browsers,
@@ -65,11 +72,7 @@ generateTableDocument({
       tabbable: !data.ally.focusableQuick && data.ally.onlyTabbable || data.ally.tabbableQuick,
     };
   },
-  rowData: function(ident) {
-    return {
-      notes: source.notes.getAlly(ident),
-    };
-  },
+  rowData: rowDataAllyNotes,
 });
 
 generateTableDocument({
@@ -99,11 +102,7 @@ generateTableDocument({
       tabbable: !data.ally.focusableStrict && data.ally.onlyTabbable || data.ally.tabbableStrict,
     };
   },
-  rowData: function(ident) {
-    return {
-      notes: source.notes.getAlly(ident),
-    };
-  },
+  rowData: rowDataAllyNotes,
 });
 
 generateTableDocument({
@@ -134,27 +133,3 @@ generateTableDocument({
     };
   },
 });
-
-generateTableDocument({
-  source: source,
-  browsers,
-  targetFile: path.resolve(targetDirectory, 'focusable.redirect.html'),
-  title: 'Focus Redirecting Elements - Browser Compatibility Table',
-  introduction: `<p>The following tables show which elements forward focus to another element in individual browsers
-    The tables are based on the <a href="http://allyjs.io/tests/focusable/test.html">focusable test document</a>.</p>`,
-  skipExpected: true,
-  skipIdents: function(sourceIdent) {
-    // skip rows without redirections
-    return !source.columns.some(function(browser) {
-      const data = sourceIdent[browser];
-      return data.browser.redirecting;
-    });
-  },
-  cellTemplate: 'table-cell.redirect.hbs',
-  cellData: function(data) {
-    const label = data.browser.redirecting && source.redirects[data.browser.redirecting];
-    return {
-      label: label && highlightLabel(label) || data.browser.redirecting || '',
-    };
-  },
-});

build/data-tables/templates/document.hbs

@@ -76,16 +76,16 @@
     table td[data-focusable="false"][data-tabbable="true"],
     table td > span.compare[data-focusable="false"][data-tabbable="true"] {
       /* only tabbable */
-      background: #AAAAFF;
+      background: #19F1FF;
     }
-    table td[data-redirecting="false"],
     table td[data-focusable="false"][data-tabbable="false"],
     table td > span.compare[data-focusable="false"][data-tabbable="false"] {
       /* inert */
       background: #DDDDDD;
     }
-    table td[data-redirecting="true"] {
-      background: #6E92A1;
+    table td[data-redirecting-to] {
+      /* redirecting */
+      background: #FFA9F9 !important;
     }
 
     table td.irrelevant-to-context {
@@ -136,6 +136,10 @@
       color: white;
       background: red;
     }
+    tbody .notes > .note.target {
+      color: white;
+      background: black;
+    }
     tbody .notes > .note.compare-target {
       color: white;
       background: black;
@@ -410,21 +414,6 @@
       });
     }
 
-    function hideUnusedFootnotes() {
-      var links = {};
-      [].forEach.call(document.querySelectorAll('.notes > a'), function(element) {
-        var id = element.getAttribute('href').slice(1);
-        links[id] = true;
-      });
-
-      [].forEach.call(document.querySelectorAll('#footnotes-list > li'), function(element) {
-        if (links[element.id]) {
-          return;
-        }
-
-        element.hidden = true;
-      });
-    }
     function bindFootnoteTooltip() {
       var container = document.createElement('div');
       container.id = 'floating-footnote';
@@ -509,7 +498,6 @@
       });
 
       if (document.body.hidden !== undefined) {
-        hideUnusedFootnotes();
         bindFootnoteTooltip();
       }
 

build/data-tables/templates/table-cell.compare.hbs

@@ -2,6 +2,8 @@
   headers="{{ identId }} {{ groupId }}-platform-{{ platform.ally.group }} {{ groupId }}-browser-{{ platform.ally.key }}"
   data-focusable="{{ browser.focusable }}"
   data-tabbable="{{ browser.tabbable }}"
+  {{#if browser.redirecting }}data-redirecting-to="{{ browser.redirecting }}"{{/if}}
+  {{#if browser.encapsulated }}data-encapsulated-in="{{ browser.encapsulated }}"{{/if}}
   data-focus-event="{{ browser.focusEvent }}"
   data-focus-method="{{ browser.focusMethod }}"
   data-tabindex="{{ browser.tabIndex }}"
@@ -31,6 +33,9 @@
         <a href="#footnote-E" class="note warning">E</a>
       {{/unless}}
     {{/unless}}
+    {{#if redirectTarget }}
+      <a href="#footnote-{{ redirectTarget }}" class="note target">T</a>
+    {{/if}}
     {{#each notes }}
       <a href="#footnote-{{ this }}" class="note">{{ this }}</a>
     {{/each}}

build/data-tables/templates/table-cell.hbs

@@ -2,6 +2,8 @@
   headers="{{ identId }} {{ groupId }}-platform-{{ platform.ally.group }} {{ groupId }}-browser-{{ platform.ally.key }}"
   data-focusable="{{ browser.focusable }}"
   data-tabbable="{{ browser.tabbable }}"
+  {{#if browser.redirecting }}data-redirecting-to="{{ browser.redirecting }}"{{/if}}
+  {{#if browser.encapsulated }}data-encapsulated-in="{{ browser.encapsulated }}"{{/if}}
   data-focus-event="{{ browser.focusEvent }}"
   data-focus-method="{{ browser.focusMethod }}"
   data-tabindex="{{ browser.tabIndex }}"
@@ -20,6 +22,9 @@
         <a href="#footnote-E" class="note warning">E</a>
       {{/unless}}
     {{/unless}}
+    {{#if redirectTarget }}
+      <a href="#footnote-{{ redirectTarget }}" class="note target">T</a>
+    {{/if}}
     {{#each notes }}
       <a href="#footnote-{{ this }}" class="note">{{ this }}</a>
     {{/each}}

build/data-tables/utils/aggregated-focusable-data.js

@@ -5,17 +5,49 @@ const glob = require('glob');
 const cwd = process.cwd();
 const notes = require('./focusable.notes');
 const groups = require('./focusable.groups');
-const redirects = require(path.resolve(cwd, 'tests/focusable/data/meta.redirects.json'));
 const platforms = require('./platforms');
 
+function convertExpectedStructure(content) {
+  const data = content['@structure'];
+  delete content['@structure'];
+  Object.keys(content).forEach(function(ident) {
+    const is = content[ident];
+    if (is.focusable) {
+      data.focusable.push(ident);
+      data.focusEvents.push(ident);
+    }
+
+    if (is.tabbable) {
+      data.tabOrder.push(ident);
+    }
+
+    if (is.redirect) {
+      data.focusRedirection.push(ident + ' --- ' + is.redirect);
+    }
+
+    if (is.encapsulated) {
+      data.focusEncapsulation.push(ident + ' --- ' + is.encapsulated);
+    }
+
+    data.tabIndex[ident] = is.index;
+  });
+
+  return data;
+}
+
 // import data from tests/focusable
 const source = {};
 glob.sync('*.json', {
   cwd: path.resolve(cwd, 'tests/focusable/data/'),
   realpath: true,
 }).sort().forEach(function(file) {
-  const name = path.basename(file, '.json');
-  const content = require(file);
+  let name = path.basename(file, '.json');
+  let content = require(file);
+
+  if (name === 'meta.expected') {
+    name = 'expected';
+    content = convertExpectedStructure(content);
+  }
 
   if (name.slice(0, 5) === 'meta.') {
     return;
@@ -40,6 +72,7 @@ Object.keys(source).forEach(function(browser) {
         "focusable": [],
         "focusEvents": [],
         "focusRedirection": [],
+        "focusEncapsulation": [],
         "noFocusMethod": [],
         "tabOrder": [],
         "tabIndex": {},
@@ -71,11 +104,22 @@ Object.keys(source).forEach(function(browser) {
   });
 
   // focusRedirection is a list of maps
-  // 'from --- to'
+  // 'from --- to' refering to a redirection within the same document
   mappedData.redirections = new Map();
   (sourceData.focusRedirection || []).forEach(function(key) {
     const _key = key.split(' --- ');
     mappedData.redirections.set(_key[0], _key[1]);
+    notes.registerRedirection(browser, _key[0], _key[1]);
+    idents.add(_key[0]);
+    idents.add(_key[1]);
+  });
+  // focusEncapsulation is a list of maps
+  // 'from --- to' referring to an encapsulation of a nested document
+  mappedData.encapsulations = new Map();
+  (sourceData.focusEncapsulation || []).forEach(function(key) {
+    const _key = key.split(' --- ');
+    mappedData.encapsulations.set(_key[0], _key[1]);
+    notes.registerRedirection(browser, _key[0], _key[1]);
     idents.add(_key[0]);
     idents.add(_key[1]);
   });
@@ -96,8 +140,9 @@ Object.keys(source).forEach(function(browser) {
   });
 });
 
-function readableLabel(focusable, tabbable, onlyTabbable) {
-  return (focusable && tabbable && 'tabbable')
+function readableLabel(focusable, tabbable, onlyTabbable, redirecting) {
+  return (redirecting && 'redirecting')
+    || (focusable && tabbable && 'tabbable')
     || (focusable && !tabbable && 'focusable')
     || (!focusable && tabbable && 'only tabbable')
     || (onlyTabbable && 'only tabbable')
@@ -119,6 +164,7 @@ Array.from(idents).sort().forEach(function(ident) {
         focusEvent: browserData.focusEvents.has(ident),
         focusMethod: !browserData.noFocusMethod.has(ident),
         redirecting: browserData.redirections.get(ident) || null,
+        encapsulated: browserData.encapsulations.get(ident) || null,
         tabIndex: tabindex !== undefined ? tabindex : 'null',
         label: null,
       },
@@ -141,21 +187,27 @@ Array.from(idents).sort().forEach(function(ident) {
     const src = result[browser];
     src.browser.label = readableLabel(
       src.browser.focusable,
-      src.browser.tabbable
+      src.browser.tabbable,
+      null, // onlyTabbable
+      src.browser.redirecting
     );
     src.jquery.label = readableLabel(
       src.jquery.focusable,
-      src.jquery.tabbable
+      src.jquery.tabbable,
+      null, // onlyTabbable
+      null // redirecting
     );
     src.ally.labelQuick = readableLabel(
       src.ally.focusableQuick,
       src.ally.tabbableQuick,
-      src.ally.onlyTabbable
+      src.ally.onlyTabbable,
+      null // redirecting
     );
     src.ally.labelStrict = readableLabel(
       src.ally.focusableStrict,
       src.ally.tabbableStrict,
-      src.ally.onlyTabbable
+      src.ally.onlyTabbable,
+      null // redirecting
     );
   });
 });
@@ -170,7 +222,6 @@ module.exports = {
   columns: platforms.columns,
   browsers: platforms.browsers,
   data: aggregated,
-  redirects,
   notes,
   groups: groups.list,
 };

build/data-tables/utils/focusable.groups.js

@@ -35,6 +35,13 @@ function identsToUnknownGroup(_idents) {
     return;
   }
 
+  // warning: logs a lot of inert elements
+  // identsWithoutGroup.forEach(function(key) {
+  //   /*eslint-disable no-console */
+  //   console.warn('no group for "' + key + '"');
+  //   /*eslint-enable no-console */
+  // });
+
   source.unshift({
     label: 'Elements Without Group',
     idents: identsWithoutGroup,