Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: use ol in ToC (closes #835) #909

Merged
merged 7 commits into from Aug 5, 2016
Merged

feat: use ol in ToC (closes #835) #909

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
a3c2ae4
chore(package): update deps
marcoscaceres Aug 5, 2016
6efbbcb
feat: use ol in ToC (closes #835)
marcoscaceres Aug 4, 2016
453d55a
refactor(aria): query for the toc instead
marcoscaceres Aug 5, 2016
4780f08
style(aria): jscs fixup
marcoscaceres Aug 5, 2016
d42c53e
refactor(aria): use less jquery
marcoscaceres Aug 5, 2016
d9d889e
style(aria): use double quotes
marcoscaceres Aug 5, 2016
65743bc
fix(aria): convert NodeList to array
marcoscaceres Aug 5, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
36 changes: 18 additions & 18 deletions js/core/structure.js
View file
Open in desktop
Expand Up @@ -22,7 +22,7 @@ define(
if ($secs.length === 0) {
return null;
}
var $ul = $("<ul class='toc'></ul>");
var $ol = $("<ol class='toc'></ol>");
for (var i = 0; i < $secs.length; i++) {
var $sec = $($secs[i], doc);
var isIntro = $sec.hasClass("introductory");
Expand Down Expand Up @@ -70,25 +70,25 @@ define(

var $a = $("<a/>").attr({ href: "#" + id, "class": "tocxref" })
.append(isIntro ? "" : $span.clone())
.append($kidsHolder.contents()),
$item = $("<li class='tocline'/>").append($a);
if (conf.maxTocLevel === 0 || level <= conf.maxTocLevel) $ul.append($item);
.append($kidsHolder.contents());
var $item = $("<li class='tocline'/>").append($a);
if (conf.maxTocLevel === 0 || level <= conf.maxTocLevel) $ol.append($item);
current.push(0);
var $sub = makeTOCAtLevel($sec, doc, current, level + 1, conf);
if ($sub) {
$item.append($sub);
}
current.pop();
}
return $ul;
return $ol;
}

return {
run: function(conf, doc, cb) {
if (!conf.tocIntroductory) {
if ("tocIntroductory" in conf === false) {
conf.tocIntroductory = false;
}
if (!conf.maxTocLevel) {
if ("maxTocLevel" in conf === false) {
conf.maxTocLevel = 0;
}
var $secs = $("section:not(.introductory)", doc)
Expand All @@ -105,14 +105,14 @@ define(

// makeTOC
if (!conf.noTOC) {
var $ul = makeTOCAtLevel($("body", doc), doc, [0], 1, conf);
if (!$ul) return;
var w = "nav";
var $sec = $("<" + w + " id='toc'/>")
.append("<h2 class='introductory'>" + conf.l10n.toc + "</h2>")
.append($ul),
$ref = $("#toc", doc),
replace = false;
var $ol = makeTOCAtLevel($("body", doc), doc, [0], 1, conf);
if (!$ol) return;
var nav = doc.createElement("nav");
nav.id = "toc";
nav.innerHTML = "<h2 class='introductory'>" + conf.l10n.toc + "</h2>";
nav.appendChild($ol[0]);
var $ref = $("#toc", doc);
var replace = false;
if ($ref.length) {
replace = true;
}
Expand All @@ -123,12 +123,12 @@ define(
$ref = $("#abstract", doc);
}
if (replace) {
$ref.replaceWith($sec);
$ref.replaceWith(nav);
} else {
$ref.after($sec);
$ref.after(nav);
}

var $link = $("<p role='navigation' id='back-to-top'><a href='#toc'><abbr title='Back to Top'>&uarr;</abbr></p>");
var $link = $("<p role='navigation' id='back-to-top'><a href='#toc'><abbr title='Back to Top'>&uarr;</abbr></a></p>");
$("body").append($link);
}

Expand Down
86 changes: 46 additions & 40 deletions js/w3c/aria.js
View file
Open in desktop
@@ -1,45 +1,51 @@
// Module w3c/aria
// Adds wai-aria landmarks and roles to entire document.
// Introduced by Shane McCarron (shane@aptest.com) from the W3C PFWG

define(
["core/utils"], // load this to be sure that the jQuery extensions are loaded
function (utils) {
return {
run: function (conf, doc, cb) {
// ensure head section is labelled
$('body', doc).attr('role', 'document') ;
$('body', doc).attr('id', 'respecDocument') ;
$('div.head', doc).attr('role', 'contentinfo') ;
$('div.head', doc).attr('id', 'respecHeader') ;
if (!conf.noTOC) {
// ensure toc is labelled
var toc = $('nav#toc', doc).find("ul:first") ;
toc.attr('role', 'directory') ;
}
// mark issues and notes with heading
var noteCount = 0 ; var issueCount = 0 ; var ednoteCount = 0;
$(".note-title, .ednote-title, .issue-title", doc).each(function (i, item) {
var $item = $(item)
, isIssue = $item.hasClass("issue-title")
, isEdNote = $item.hasClass("ednote-title")
, level = $item.parents("section").length+2 ;

$item.attr('aria-level', level) ;
$item.attr('role', 'heading') ;
if (isIssue) {
issueCount++;
$item.makeID('h', "issue" + issueCount) ;
} else if (isEdNote) {
ednoteCount++;
$item.makeID('h', "ednote" + ednoteCount) ;
} else {
noteCount++;
$item.makeID('h', "note" + noteCount) ;
}
});
cb();
"use strict";
define([],
function() {
return {
run: function(conf, doc, cb) {
// ensure head section is labeled
if (!doc.body.hasAttribute("role")) {
doc.body.setAttribute("role", "document");
}
if (!doc.body.hasAttribute("id")) {
doc.body.setAttribute("id", "respecDocument");
}
var head = document.querySelector("div.head");
if (head) {
head.setAttribute("role", "contentinfo");
head.setAttribute("id", "respecHeader");
}
var toc = doc.querySelector("#toc ol:first-of-type");
if (toc) {
// ensure toc is labeled
toc.setAttribute("role", "directory");
}
// mark issues and notes with heading
var noteCount = 1;
var issueCount = 1;
var ednoteCount = 1;
Array
.from(doc.querySelectorAll(".note-title, .ednote-title, .issue-title"))
.forEach(function(element) {
var $element = $(element);
var isIssue = element.classList.contains("issue-title");
var isEdNote = element.classList.contains("ednote-title");
var level = $element.parents("section").length + 2;
element.setAttribute("aria-level", level);
element.setAttribute("role", "heading");
if (isIssue) {
$element.makeID("h", "issue" + issueCount++);
} else if (isEdNote) {
$element.makeID("h", "ednote" + ednoteCount++);
} else {
$element.makeID("h", "note" + noteCount++);
}
};
}
});
cb();
}
};
}
);
24 changes: 12 additions & 12 deletions package.json
View file
Open in desktop
Expand Up @@ -15,10 +15,10 @@
},
"author": "Robin Berjon",
"devDependencies": {
"async": "^2.0.0",
"async": "^2.0.1",
"chai": "^3.5.0",
"colors": "^1.1.2",
"command-line-args": "^3.0.0",
"command-line-args": "^3.0.1",
"domReady": "github:requirejs/domReady",
"epipebomb": "^0.1.1",
"express": "^4.14.0",
Expand All @@ -28,9 +28,9 @@
"highlight.js": "github:isagalaev/highlight.js",
"jasmine-core": "^2.4.1",
"jasmine-reporters": "^2.2.0",
"jquery": "^3.0.0",
"jquery": "^3.1.0",
"js-beautify": "^1.6.3",
"jscs": "^3.0.6",
"jscs": "^3.0.7",
"jshint": "^2.9.2",
"karma": "^1.1.2",
"karma-chrome-launcher": "^1.0.1",
Expand All @@ -45,12 +45,12 @@
"karma-safari-launcher": "^1.0.0",
"karma-safaritechpreview-launcher": "0.0.4",
"karma-verbose-summary-reporter": "0.0.1",
"marcosc-async": "^3.0.0",
"mocha": "^3.0.0",
"marcosc-async": "^3.0.1",
"mocha": "^3.0.1",
"moment": "^2.14.1",
"mozilla-download": "^1.1.1",
"nightmare": "^2.5.2",
"promise-polyfill": "^6.0.0",
"nightmare": "^2.6.0",
"promise-polyfill": "^6.0.1",
"prompt": "^1.0.0",
"requirejs": "^2.2.0",
"text": "github:requirejs/text",
Expand Down Expand Up @@ -79,11 +79,11 @@
},
"dependencies": {
"colors": "^1.1.2",
"command-line-args": "^3.0.0",
"command-line-usage": "^3.0.2",
"command-line-args": "^3.0.1",
"command-line-usage": "^3.0.3",
"fs-promise": "^0.5.0",
"marcosc-async": "^3.0.0",
"marked": "^0.3.5",
"marcosc-async": "^3.0.1",
"marked": "^0.3.6",
"nightmare": "^2.5.3",
"snyk": "1.18.0"
},
Expand Down
36 changes: 19 additions & 17 deletions tests/spec/core/structure-spec.js
View file
Open in desktop
Expand Up @@ -20,17 +20,19 @@ describe("Core - Structure", function() {
};
makeRSDoc(ops, function(doc) {
// test default values
var $toc = $("#toc", doc);
expect($toc.find("h2").text()).toEqual("Table of Contents");
expect($toc.find("h2 span").attr("resource")).toEqual("xhv:heading");
expect($toc.find("h2 span").attr("property")).toEqual("xhv:role");
expect($toc.find("ul:first").attr("role")).toEqual("directory");
expect($toc.find("> ul > li").length).toEqual(3);
expect($toc.find("li").length).toEqual(15);
expect($toc.find("> ul > li a").first().text()).toEqual("1. ONE");
expect($toc.find("a[href='#six']").text()).toEqual("1.1.1.1.1.1 SIX");
expect($toc.find("> ul > li").first().next().find("> a").text()).toEqual("A. ONE");
expect($toc.find("a[href='#six-1']").text()).toEqual("A.1.1.1.1.1 SIX");
var toc = doc.getElementById("toc");
expect(toc.querySelector("h2").textContent).toEqual("Table of Contents");
expect(toc.querySelector("ol > li a").textContent).toEqual("1. ONE");
expect(toc.querySelector("h2 span").getAttribute("resource")).toEqual("xhv:heading");
expect(toc.querySelector("h2 span").getAttribute("property")).toEqual("xhv:role");
expect(toc.querySelectorAll("li").length).toEqual(15);
expect(toc.querySelector("ol:first-of-type").childElementCount).toEqual(3);
expect(toc.querySelector("a[href='#six']").textContent).toEqual("1.1.1.1.1.1 SIX");
expect(toc.querySelector("li:first-child").nextElementSibling.querySelector("a").textContent).toEqual("A. ONE");
expect(toc.querySelector("a[href='#six-1']").textContent).toEqual("A.1.1.1.1.1 SIX");
// TODO: Move test to aria-spec
// https://github.com/w3c/respec/issues/906
expect(toc.querySelector("ol:first-of-type").getAttribute("role")).toEqual("directory");
}).then(done);
});

Expand All @@ -55,10 +57,10 @@ describe("Core - Structure", function() {
makeRSDoc(ops, function(doc) {
var $toc = $("#toc", doc);
expect($toc.find("h2").text()).toEqual("Table of Contents");
expect($toc.find("> ul > li").length).toEqual(6);
expect($toc.find("> ol > li").length).toEqual(6);
expect($toc.find("li").length).toEqual(18);
expect($toc.find("> ul > li a").first().text()).toEqual("Abstract");
expect($toc.find("> ul > li a[href='#intro']").length).toEqual(1);
expect($toc.find("> ol > li a").first().text()).toEqual("Abstract");
expect($toc.find("> ol > li a[href='#intro']").length).toEqual(1);
}).then(done);
});

Expand All @@ -71,11 +73,11 @@ describe("Core - Structure", function() {
makeRSDoc(ops, function(doc) {
var $toc = $("#toc", doc);
expect($toc.find("h2").text()).toEqual("Table of Contents");
expect($toc.find("> ul > li").length).toEqual(3);
expect($toc.find("> ol > li").length).toEqual(3);
expect($toc.find("li").length).toEqual(11);
expect($toc.find("> ul > li a").first().text()).toEqual("1. ONE");
expect($toc.find("> ol > li a").first().text()).toEqual("1. ONE");
expect($toc.find("a[href='#four']").text()).toEqual("1.1.1.1 FOUR");
expect($toc.find("> ul > li").first().next().find("> a").text()).toEqual("A. ONE");
expect($toc.find("> ol > li").first().next().find("> a").text()).toEqual("A. ONE");
expect($toc.find("a[href='#four-1']").text()).toEqual("A.1.1.1 FOUR");
}).then(done);
});
Expand Down