accessibility_spec.js 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. /* Copyright 2021 Mozilla Foundation
  2. *
  3. * Licensed under the Apache License, Version 2.0 (the "License");
  4. * you may not use this file except in compliance with the License.
  5. * You may obtain a copy of the License at
  6. *
  7. * http://www.apache.org/licenses/LICENSE-2.0
  8. *
  9. * Unless required by applicable law or agreed to in writing, software
  10. * distributed under the License is distributed on an "AS IS" BASIS,
  11. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  12. * See the License for the specific language governing permissions and
  13. * limitations under the License.
  14. */
  15. const { closePages, loadAndWait } = require("./test_utils.js");
  16. describe("accessibility", () => {
  17. describe("structure tree", () => {
  18. let pages;
  19. beforeAll(async () => {
  20. pages = await loadAndWait("structure_simple.pdf", ".structTree");
  21. });
  22. afterAll(async () => {
  23. await closePages(pages);
  24. });
  25. it("must build structure that maps to text layer", async () => {
  26. await Promise.all(
  27. pages.map(async ([browserName, page]) => {
  28. await page.waitForSelector(".structTree");
  29. // Check the headings match up.
  30. const head1 = await page.$eval(
  31. ".structTree [role='heading'][aria-level='1'] span",
  32. el =>
  33. document.getElementById(el.getAttribute("aria-owns")).textContent
  34. );
  35. expect(head1).withContext(`In ${browserName}`).toEqual("Heading 1");
  36. const head2 = await page.$eval(
  37. ".structTree [role='heading'][aria-level='2'] span",
  38. el =>
  39. document.getElementById(el.getAttribute("aria-owns")).textContent
  40. );
  41. expect(head2).withContext(`In ${browserName}`).toEqual("Heading 2");
  42. // Check the order of the content.
  43. const texts = await page.$$eval(".structTree [aria-owns]", nodes =>
  44. nodes.map(
  45. el =>
  46. document.getElementById(el.getAttribute("aria-owns"))
  47. .textContent
  48. )
  49. );
  50. expect(texts)
  51. .withContext(`In ${browserName}`)
  52. .toEqual([
  53. "Heading 1",
  54. "This paragraph 1.",
  55. "Heading 2",
  56. "This paragraph 2.",
  57. ]);
  58. })
  59. );
  60. });
  61. });
  62. describe("Annotation", () => {
  63. let pages;
  64. beforeAll(async () => {
  65. pages = await loadAndWait(
  66. "tracemonkey_a11y.pdf",
  67. ".textLayer .endOfContent"
  68. );
  69. });
  70. afterAll(async () => {
  71. await closePages(pages);
  72. });
  73. function getSpans(page) {
  74. return page.evaluate(() => {
  75. const elements = document.querySelectorAll(
  76. `.textLayer span[aria-owns]:not([role="presentation"])`
  77. );
  78. const results = [];
  79. for (const element of elements) {
  80. results.push(element.innerText);
  81. }
  82. return results;
  83. });
  84. }
  85. it("must check that some spans are linked to some annotations thanks to aria-owns", async () => {
  86. await Promise.all(
  87. pages.map(async ([browserName, page]) => {
  88. const spanContents = await getSpans(page);
  89. expect(spanContents)
  90. .withContext(`In ${browserName}`)
  91. .toEqual(["Languages", "@intel.com", "Abstract", "Introduction"]);
  92. })
  93. );
  94. });
  95. });
  96. describe("Annotations order", () => {
  97. let pages;
  98. beforeAll(async () => {
  99. pages = await loadAndWait("fields_order.pdf", ".annotationLayer");
  100. });
  101. afterAll(async () => {
  102. await closePages(pages);
  103. });
  104. it("must check that the text fields are in the visual order", async () => {
  105. await Promise.all(
  106. pages.map(async ([browserName, page]) => {
  107. const ids = await page.evaluate(() => {
  108. const elements = document.querySelectorAll(
  109. ".annotationLayer .textWidgetAnnotation"
  110. );
  111. const results = [];
  112. for (const element of elements) {
  113. results.push(element.getAttribute("data-annotation-id"));
  114. }
  115. return results;
  116. });
  117. expect(ids)
  118. .withContext(`In ${browserName}`)
  119. .toEqual(["32R", "30R", "31R", "34R", "29R", "33R"]);
  120. })
  121. );
  122. });
  123. });
  124. });