Last active
June 5, 2019 16:23
-
-
Save JayPanoz/45896f17a69892de9a121d701c578d1e to your computer and use it in GitHub Desktop.
A proof of concept script to append aria doc roles based on epub:type
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // This is now its own package @ https://github.com/rodebert/epubtype-to-aria | |
| // Please check Rodebert’s repo for a better and more up-to-date version | |
| "use strict"; | |
| // Get all the elements with epub:type | |
| // Since querySelectorAll can’t be used with XHTML attributes, | |
| // we create an array in which we’ll push elements with an epub:type attribute | |
| var epubTypes = []; | |
| // This function gets all the elements in the DOM | |
| (function pushElements() { | |
| var els = document.querySelectorAll("*"); | |
| for (var a = 0; a < els.length; a++) { | |
| var el = els[a]; | |
| // we check if the current element has an epub:type attribute | |
| // If it does, we push the DOM element in the array | |
| if (el.hasAttribute("epub:type")) { | |
| epubTypes.push(el); | |
| } | |
| } | |
| })(); | |
| // Mappings table (epub → role) | |
| var mappings = [ | |
| {epub: "abstract", aria: "doc-abstract"}, | |
| {epub: "acknowledgments", aria: "doc-acknowledgments"}, | |
| {epub: "afterword", aria: "doc-afterword"}, | |
| {epub: "appendix", aria: "doc-appendix"}, | |
| {epub: "biblioentry", aria: "doc-biblioentry"}, | |
| {epub: "bibliography", aria: "doc-bibliography"}, | |
| {epub: "biblioref", aria: "doc-biblioref"}, | |
| {epub: "chapter", aria: "doc-chapter"}, | |
| {epub: "colophon", aria: "doc-colophon"}, | |
| {epub: "conclusion", aria: "doc-conclusion"}, | |
| {epub: "cover", aria: "doc-cover"}, | |
| {epub: "credit", aria: "doc-credit"}, | |
| {epub: "credits", aria: "doc-credits"}, | |
| {epub: "dedication", aria: "doc-dedication"}, | |
| {epub: "endnote", aria: "doc-endnote"}, | |
| {epub: "endnotes", aria: "doc-endnotes"}, | |
| {epub: "epigraph", aria: "doc-epigraph"}, | |
| {epub: "epilogue", aria: "doc-epilogue"}, | |
| {epub: "errata", aria: "doc-errata"}, | |
| {epub: "figure", aria: "figure"}, | |
| {epub: "footnote", aria: "doc-footnote"}, | |
| {epub: "foreword", aria: "doc-foreword"}, | |
| {epub: "glossary", aria: "doc-glossary"}, | |
| {epub: "glossdef", aria: "definition"}, | |
| {epub: "glossref", aria: "doc-glossref"}, | |
| {epub: "glossterm", aria: "term"}, | |
| {epub: "index", aria: "doc-index"}, | |
| {epub: "introduction", aria: "doc-introduction"}, | |
| {epub: "landmarks", aria: "directory"}, | |
| {epub: "list", aria: "list"}, | |
| {epub: "list-item", aria: "listitem"}, | |
| {epub: "noteref", aria: "doc-noteref"}, | |
| {epub: "notice", aria: "doc-notice"}, | |
| {epub: "pagebreak", aria: "doc-pagebreak"}, | |
| {epub: "page-list", aria: "doc-pagelist"}, | |
| {epub: "part", aria: "doc-part"}, | |
| {epub: "preface", aria: "doc-preface"}, | |
| {epub: "prologue", aria: "doc-prologue"}, | |
| {epub: "pullquote", aria: "doc-pullquote"}, | |
| {epub: "qna", aria: "doc-qna"}, | |
| {epub: "referrer", aria: "doc-backlink"}, | |
| {epub: "subtitle", aria: "doc-subtitle"}, | |
| {epub: "table", aria: "table"}, | |
| {epub: "table-row", aria: "row"}, | |
| {epub: "table-cell", aria: "cell"}, | |
| {epub: "tip", aria: "doc-tip"}, | |
| {epub: "toc", aria: "doc-toc"} | |
| ]; | |
| // Init append role="" loop | |
| for (var i = 0; i < epubTypes.length; i++) { | |
| var element = epubTypes[i]; | |
| // If element hasn’t a role attribute | |
| if (!element.hasAttribute("role")) { | |
| // Get the value for epub:type | |
| var epubTypeValue = element.getAttribute("epub:type"); // in tagsoup HTML, should be epub\\\:type | |
| // Split the string (we only check 2 = 1 space separator) | |
| var inflections = epubTypeValue.split(" ", 2); | |
| // We get an array for inflections so we init another loop | |
| for (var j = 0; j < inflections.length; j++) { | |
| var inflection = inflections[j]; | |
| // check if the value (string) is in the mappings table | |
| var idx = mappings.findIndex(x => x.epub === inflection); | |
| // If it is found | |
| if (idx >= 0) { | |
| // Retrieve the aria value | |
| var ariaValue = mappings[idx].aria; | |
| // add the role attribute | |
| element.setAttribute("role", ariaValue); | |
| // break the loop since role can only have one value | |
| break; | |
| } | |
| } | |
| } | |
| } |
Author
I have made some optimizations: https://gist.github.com/rodebert/81837a2676cf2c04819a582c3eb49c13
Have a look.
Author
Thank you! It’s much better and cleaner.
This is exactly why I wanted to revisit it at some point, given I ended up with an array anyway and just stopped there.
You're welcome :)
Bonjour,
Dans le mappings je vois des epub list, table, cell,... Or quand je regarde dans la liste des epub:type EPUB for Education Structural Semantics je ne les retrouve pas.
Merci pour le script je m'en suis aidé pour mon Plugin vscode - EpubTools
There seems to be a more recent version at https://idpf.github.io/epub-guides/epub-aria-authoring/#sec-mappings
Author
The best way to handle updates would probably be in this repo: https://github.com/rodebert/epubtype-to-aria
I should indeed make clearer this gist is kinda “deprecated” and rodebert’s package is 1. better, 2. distributed (via npm), and 3. documented for usage. :-)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
License MIT in case you want to use that to make a (web) app upgrading files. :-)