Skip to content

Commit 8d388d7

Browse files
pancakereportpancakereport
committed
simplify and broaden scrollable region fix
1 parent b9c560b commit 8d388d7

11 files changed

Lines changed: 121 additions & 264 deletions

File tree

‎a11y-fixes.html‎

Lines changed: 11 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -17,32 +17,19 @@
1717
}
1818
});
1919

20-
// 1. Target all code blocks (Source Code and Code Output <pre> elements)
21-
// that are scrollable (have overflow:auto/scroll).
22-
var scrollableRegions = document.querySelectorAll(
23-
// 1. Source Code <pre>
24-
'div.sourceCode > pre, ' +
25-
// 2. Output <pre> inside a generic cell-output
26-
'.cell-output > pre, ' +
27-
// 3. The main DIV container for cell-output-display (from previous fix)
28-
'.cell-output-display.cell-output, ' +
29-
// 4. PRE tag inside any ANSI-escaped output (e.g., .ansi-escaped-output > pre)
30-
'.ansi-escaped-output > pre, ' +
31-
// 5. The deepest container for error output (e.g., #ID > .cell-output-error... > .ansi-escaped-output > pre)
32-
'.cell-output-error.cell-output > .ansi-escaped-output > pre, ' +
33-
// Target any PRE tag that has an ID attribute
34-
'pre[id], ' +
35-
// code blocks inside list items
36-
'li > pre, ' +
37-
// PRE tags within an output display container
38-
'.cell-output-display > pre'
39-
);
20+
// Scrollable Region Accessibility Fix:
21+
// Target ALL <pre> elements, as they are the source of the scrollable-region-focusable errors.
22+
var scrollableRegions = document.querySelectorAll('pre');
4023

4124
scrollableRegions.forEach(function(region) {
42-
// Check if the element actually has horizontal overflow (is scrollable)
43-
// Add tabindex="0" to make the region keyboard-focusable.
44-
if (region.getAttribute('tabindex') === null || region.getAttribute('tabindex') === undefined) {
45-
region.setAttribute('tabindex', '0');
25+
// Check if the element has horizontal overflow (is scrollable).
26+
const hasScrollbar = region.scrollWidth > region.clientWidth || region.scrollHeight > region.clientHeight;
27+
28+
if (hasScrollbar) {
29+
// If it is scrollable AND it doesn't already have tabindex="0" (or a different value)
30+
if (region.getAttribute('tabindex') === null || region.getAttribute('tabindex') === undefined) {
31+
region.setAttribute('tabindex', '0');
32+
}
4633
}
4734
});
4835
});

‎docs/autograder_gradescope/autograder_gradescope.html‎

Lines changed: 11 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -332,32 +332,19 @@ <h3 class="anchored" data-anchor-id="my-autograder-keeps-runningtimed-out">My au
332332
}
333333
});
334334

335-
// 1. Target all code blocks (Source Code and Code Output <pre> elements)
336-
// that are scrollable (have overflow:auto/scroll).
337-
var scrollableRegions = document.querySelectorAll(
338-
// 1. Source Code <pre>
339-
'div.sourceCode > pre, ' +
340-
// 2. Output <pre> inside a generic cell-output
341-
'.cell-output > pre, ' +
342-
// 3. The main DIV container for cell-output-display (from previous fix)
343-
'.cell-output-display.cell-output, ' +
344-
// 4. PRE tag inside any ANSI-escaped output (e.g., .ansi-escaped-output > pre)
345-
'.ansi-escaped-output > pre, ' +
346-
// 5. The deepest container for error output (e.g., #ID > .cell-output-error... > .ansi-escaped-output > pre)
347-
'.cell-output-error.cell-output > .ansi-escaped-output > pre, ' +
348-
// Target any PRE tag that has an ID attribute
349-
'pre[id], ' +
350-
// code blocks inside list items
351-
'li > pre, ' +
352-
// PRE tags within an output display container
353-
'.cell-output-display > pre'
354-
);
335+
// Scrollable Region Accessibility Fix:
336+
// Target ALL <pre> elements, as they are the source of the scrollable-region-focusable errors.
337+
var scrollableRegions = document.querySelectorAll('pre');
355338

356339
scrollableRegions.forEach(function(region) {
357-
// Check if the element actually has horizontal overflow (is scrollable)
358-
// Add tabindex="0" to make the region keyboard-focusable.
359-
if (region.getAttribute('tabindex') === null || region.getAttribute('tabindex') === undefined) {
360-
region.setAttribute('tabindex', '0');
340+
// Check if the element has horizontal overflow (is scrollable).
341+
const hasScrollbar = region.scrollWidth > region.clientWidth || region.scrollHeight > region.clientHeight;
342+
343+
if (hasScrollbar) {
344+
// If it is scrollable AND it doesn't already have tabindex="0" (or a different value)
345+
if (region.getAttribute('tabindex') === null || region.getAttribute('tabindex') === undefined) {
346+
region.setAttribute('tabindex', '0');
347+
}
361348
}
362349
});
363350
});

‎docs/index.html‎

Lines changed: 11 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -229,32 +229,19 @@ <h2 class="anchored" data-anchor-id="authors">Authors</h2>
229229
}
230230
});
231231

232-
// 1. Target all code blocks (Source Code and Code Output <pre> elements)
233-
// that are scrollable (have overflow:auto/scroll).
234-
var scrollableRegions = document.querySelectorAll(
235-
// 1. Source Code <pre>
236-
'div.sourceCode > pre, ' +
237-
// 2. Output <pre> inside a generic cell-output
238-
'.cell-output > pre, ' +
239-
// 3. The main DIV container for cell-output-display (from previous fix)
240-
'.cell-output-display.cell-output, ' +
241-
// 4. PRE tag inside any ANSI-escaped output (e.g., .ansi-escaped-output > pre)
242-
'.ansi-escaped-output > pre, ' +
243-
// 5. The deepest container for error output (e.g., #ID > .cell-output-error... > .ansi-escaped-output > pre)
244-
'.cell-output-error.cell-output > .ansi-escaped-output > pre, ' +
245-
// Target any PRE tag that has an ID attribute
246-
'pre[id], ' +
247-
// code blocks inside list items
248-
'li > pre, ' +
249-
// PRE tags within an output display container
250-
'.cell-output-display > pre'
251-
);
232+
// Scrollable Region Accessibility Fix:
233+
// Target ALL <pre> elements, as they are the source of the scrollable-region-focusable errors.
234+
var scrollableRegions = document.querySelectorAll('pre');
252235

253236
scrollableRegions.forEach(function(region) {
254-
// Check if the element actually has horizontal overflow (is scrollable)
255-
// Add tabindex="0" to make the region keyboard-focusable.
256-
if (region.getAttribute('tabindex') === null || region.getAttribute('tabindex') === undefined) {
257-
region.setAttribute('tabindex', '0');
237+
// Check if the element has horizontal overflow (is scrollable).
238+
const hasScrollbar = region.scrollWidth > region.clientWidth || region.scrollHeight > region.clientHeight;
239+
240+
if (hasScrollbar) {
241+
// If it is scrollable AND it doesn't already have tabindex="0" (or a different value)
242+
if (region.getAttribute('tabindex') === null || region.getAttribute('tabindex') === undefined) {
243+
region.setAttribute('tabindex', '0');
244+
}
258245
}
259246
});
260247
});

‎docs/jupyter101/jupyter101.html‎

Lines changed: 11 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -306,32 +306,19 @@ <h2 class="anchored" data-anchor-id="automatically-closing-brackets">Automatical
306306
}
307307
});
308308

309-
// 1. Target all code blocks (Source Code and Code Output <pre> elements)
310-
// that are scrollable (have overflow:auto/scroll).
311-
var scrollableRegions = document.querySelectorAll(
312-
// 1. Source Code <pre>
313-
'div.sourceCode > pre, ' +
314-
// 2. Output <pre> inside a generic cell-output
315-
'.cell-output > pre, ' +
316-
// 3. The main DIV container for cell-output-display (from previous fix)
317-
'.cell-output-display.cell-output, ' +
318-
// 4. PRE tag inside any ANSI-escaped output (e.g., .ansi-escaped-output > pre)
319-
'.ansi-escaped-output > pre, ' +
320-
// 5. The deepest container for error output (e.g., #ID > .cell-output-error... > .ansi-escaped-output > pre)
321-
'.cell-output-error.cell-output > .ansi-escaped-output > pre, ' +
322-
// Target any PRE tag that has an ID attribute
323-
'pre[id], ' +
324-
// code blocks inside list items
325-
'li > pre, ' +
326-
// PRE tags within an output display container
327-
'.cell-output-display > pre'
328-
);
309+
// Scrollable Region Accessibility Fix:
310+
// Target ALL <pre> elements, as they are the source of the scrollable-region-focusable errors.
311+
var scrollableRegions = document.querySelectorAll('pre');
329312

330313
scrollableRegions.forEach(function(region) {
331-
// Check if the element actually has horizontal overflow (is scrollable)
332-
// Add tabindex="0" to make the region keyboard-focusable.
333-
if (region.getAttribute('tabindex') === null || region.getAttribute('tabindex') === undefined) {
334-
region.setAttribute('tabindex', '0');
314+
// Check if the element has horizontal overflow (is scrollable).
315+
const hasScrollbar = region.scrollWidth > region.clientWidth || region.scrollHeight > region.clientHeight;
316+
317+
if (hasScrollbar) {
318+
// If it is scrollable AND it doesn't already have tabindex="0" (or a different value)
319+
if (region.getAttribute('tabindex') === null || region.getAttribute('tabindex') === undefined) {
320+
region.setAttribute('tabindex', '0');
321+
}
335322
}
336323
});
337324
});

‎docs/jupyter_datahub/jupyter_datahub.html‎

Lines changed: 11 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -336,32 +336,19 @@ <h2 class="anchored" data-anchor-id="datahub-is-not-loading">Datahub is not load
336336
}
337337
});
338338

339-
// 1. Target all code blocks (Source Code and Code Output <pre> elements)
340-
// that are scrollable (have overflow:auto/scroll).
341-
var scrollableRegions = document.querySelectorAll(
342-
// 1. Source Code <pre>
343-
'div.sourceCode > pre, ' +
344-
// 2. Output <pre> inside a generic cell-output
345-
'.cell-output > pre, ' +
346-
// 3. The main DIV container for cell-output-display (from previous fix)
347-
'.cell-output-display.cell-output, ' +
348-
// 4. PRE tag inside any ANSI-escaped output (e.g., .ansi-escaped-output > pre)
349-
'.ansi-escaped-output > pre, ' +
350-
// 5. The deepest container for error output (e.g., #ID > .cell-output-error... > .ansi-escaped-output > pre)
351-
'.cell-output-error.cell-output > .ansi-escaped-output > pre, ' +
352-
// Target any PRE tag that has an ID attribute
353-
'pre[id], ' +
354-
// code blocks inside list items
355-
'li > pre, ' +
356-
// PRE tags within an output display container
357-
'.cell-output-display > pre'
358-
);
339+
// Scrollable Region Accessibility Fix:
340+
// Target ALL <pre> elements, as they are the source of the scrollable-region-focusable errors.
341+
var scrollableRegions = document.querySelectorAll('pre');
359342

360343
scrollableRegions.forEach(function(region) {
361-
// Check if the element actually has horizontal overflow (is scrollable)
362-
// Add tabindex="0" to make the region keyboard-focusable.
363-
if (region.getAttribute('tabindex') === null || region.getAttribute('tabindex') === undefined) {
364-
region.setAttribute('tabindex', '0');
344+
// Check if the element has horizontal overflow (is scrollable).
345+
const hasScrollbar = region.scrollWidth > region.clientWidth || region.scrollHeight > region.clientHeight;
346+
347+
if (hasScrollbar) {
348+
// If it is scrollable AND it doesn't already have tabindex="0" (or a different value)
349+
if (region.getAttribute('tabindex') === null || region.getAttribute('tabindex') === undefined) {
350+
region.setAttribute('tabindex', '0');
351+
}
365352
}
366353
});
367354
});

‎docs/pandas/pandas.html‎

Lines changed: 11 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -356,32 +356,19 @@ <h3 class="anchored" data-anchor-id="valueerror--1-is-not-in-range-keyerror--1">
356356
}
357357
});
358358

359-
// 1. Target all code blocks (Source Code and Code Output <pre> elements)
360-
// that are scrollable (have overflow:auto/scroll).
361-
var scrollableRegions = document.querySelectorAll(
362-
// 1. Source Code <pre>
363-
'div.sourceCode > pre, ' +
364-
// 2. Output <pre> inside a generic cell-output
365-
'.cell-output > pre, ' +
366-
// 3. The main DIV container for cell-output-display (from previous fix)
367-
'.cell-output-display.cell-output, ' +
368-
// 4. PRE tag inside any ANSI-escaped output (e.g., .ansi-escaped-output > pre)
369-
'.ansi-escaped-output > pre, ' +
370-
// 5. The deepest container for error output (e.g., #ID > .cell-output-error... > .ansi-escaped-output > pre)
371-
'.cell-output-error.cell-output > .ansi-escaped-output > pre, ' +
372-
// Target any PRE tag that has an ID attribute
373-
'pre[id], ' +
374-
// code blocks inside list items
375-
'li > pre, ' +
376-
// PRE tags within an output display container
377-
'.cell-output-display > pre'
378-
);
359+
// Scrollable Region Accessibility Fix:
360+
// Target ALL <pre> elements, as they are the source of the scrollable-region-focusable errors.
361+
var scrollableRegions = document.querySelectorAll('pre');
379362

380363
scrollableRegions.forEach(function(region) {
381-
// Check if the element actually has horizontal overflow (is scrollable)
382-
// Add tabindex="0" to make the region keyboard-focusable.
383-
if (region.getAttribute('tabindex') === null || region.getAttribute('tabindex') === undefined) {
384-
region.setAttribute('tabindex', '0');
364+
// Check if the element has horizontal overflow (is scrollable).
365+
const hasScrollbar = region.scrollWidth > region.clientWidth || region.scrollHeight > region.clientHeight;
366+
367+
if (hasScrollbar) {
368+
// If it is scrollable AND it doesn't already have tabindex="0" (or a different value)
369+
if (region.getAttribute('tabindex') === null || region.getAttribute('tabindex') === undefined) {
370+
region.setAttribute('tabindex', '0');
371+
}
385372
}
386373
});
387374
});

‎docs/projA1/projA1.html‎

Lines changed: 11 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -264,32 +264,19 @@ <h3 class="anchored" data-anchor-id="my-ohe-columns-contain-a-lot-of-nan-values"
264264
}
265265
});
266266

267-
// 1. Target all code blocks (Source Code and Code Output <pre> elements)
268-
// that are scrollable (have overflow:auto/scroll).
269-
var scrollableRegions = document.querySelectorAll(
270-
// 1. Source Code <pre>
271-
'div.sourceCode > pre, ' +
272-
// 2. Output <pre> inside a generic cell-output
273-
'.cell-output > pre, ' +
274-
// 3. The main DIV container for cell-output-display (from previous fix)
275-
'.cell-output-display.cell-output, ' +
276-
// 4. PRE tag inside any ANSI-escaped output (e.g., .ansi-escaped-output > pre)
277-
'.ansi-escaped-output > pre, ' +
278-
// 5. The deepest container for error output (e.g., #ID > .cell-output-error... > .ansi-escaped-output > pre)
279-
'.cell-output-error.cell-output > .ansi-escaped-output > pre, ' +
280-
// Target any PRE tag that has an ID attribute
281-
'pre[id], ' +
282-
// code blocks inside list items
283-
'li > pre, ' +
284-
// PRE tags within an output display container
285-
'.cell-output-display > pre'
286-
);
267+
// Scrollable Region Accessibility Fix:
268+
// Target ALL <pre> elements, as they are the source of the scrollable-region-focusable errors.
269+
var scrollableRegions = document.querySelectorAll('pre');
287270

288271
scrollableRegions.forEach(function(region) {
289-
// Check if the element actually has horizontal overflow (is scrollable)
290-
// Add tabindex="0" to make the region keyboard-focusable.
291-
if (region.getAttribute('tabindex') === null || region.getAttribute('tabindex') === undefined) {
292-
region.setAttribute('tabindex', '0');
272+
// Check if the element has horizontal overflow (is scrollable).
273+
const hasScrollbar = region.scrollWidth > region.clientWidth || region.scrollHeight > region.clientHeight;
274+
275+
if (hasScrollbar) {
276+
// If it is scrollable AND it doesn't already have tabindex="0" (or a different value)
277+
if (region.getAttribute('tabindex') === null || region.getAttribute('tabindex') === undefined) {
278+
region.setAttribute('tabindex', '0');
279+
}
293280
}
294281
});
295282
});

‎docs/projA2/projA2.html‎

Lines changed: 11 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -375,32 +375,19 @@ <h3 class="anchored" data-anchor-id="my-code-runs-locally-but-it-fails-for-every
375375
}
376376
});
377377

378-
// 1. Target all code blocks (Source Code and Code Output <pre> elements)
379-
// that are scrollable (have overflow:auto/scroll).
380-
var scrollableRegions = document.querySelectorAll(
381-
// 1. Source Code <pre>
382-
'div.sourceCode > pre, ' +
383-
// 2. Output <pre> inside a generic cell-output
384-
'.cell-output > pre, ' +
385-
// 3. The main DIV container for cell-output-display (from previous fix)
386-
'.cell-output-display.cell-output, ' +
387-
// 4. PRE tag inside any ANSI-escaped output (e.g., .ansi-escaped-output > pre)
388-
'.ansi-escaped-output > pre, ' +
389-
// 5. The deepest container for error output (e.g., #ID > .cell-output-error... > .ansi-escaped-output > pre)
390-
'.cell-output-error.cell-output > .ansi-escaped-output > pre, ' +
391-
// Target any PRE tag that has an ID attribute
392-
'pre[id], ' +
393-
// code blocks inside list items
394-
'li > pre, ' +
395-
// PRE tags within an output display container
396-
'.cell-output-display > pre'
397-
);
378+
// Scrollable Region Accessibility Fix:
379+
// Target ALL <pre> elements, as they are the source of the scrollable-region-focusable errors.
380+
var scrollableRegions = document.querySelectorAll('pre');
398381

399382
scrollableRegions.forEach(function(region) {
400-
// Check if the element actually has horizontal overflow (is scrollable)
401-
// Add tabindex="0" to make the region keyboard-focusable.
402-
if (region.getAttribute('tabindex') === null || region.getAttribute('tabindex') === undefined) {
403-
region.setAttribute('tabindex', '0');
383+
// Check if the element has horizontal overflow (is scrollable).
384+
const hasScrollbar = region.scrollWidth > region.clientWidth || region.scrollHeight > region.clientHeight;
385+
386+
if (hasScrollbar) {
387+
// If it is scrollable AND it doesn't already have tabindex="0" (or a different value)
388+
if (region.getAttribute('tabindex') === null || region.getAttribute('tabindex') === undefined) {
389+
region.setAttribute('tabindex', '0');
390+
}
404391
}
405392
});
406393
});

‎docs/regex/regex.html‎

Lines changed: 11 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -405,32 +405,19 @@ <h3 class="anchored" data-anchor-id="whats-the-difference-between-re-functions-a
405405
}
406406
});
407407

408-
// 1. Target all code blocks (Source Code and Code Output <pre> elements)
409-
// that are scrollable (have overflow:auto/scroll).
410-
var scrollableRegions = document.querySelectorAll(
411-
// 1. Source Code <pre>
412-
'div.sourceCode > pre, ' +
413-
// 2. Output <pre> inside a generic cell-output
414-
'.cell-output > pre, ' +
415-
// 3. The main DIV container for cell-output-display (from previous fix)
416-
'.cell-output-display.cell-output, ' +
417-
// 4. PRE tag inside any ANSI-escaped output (e.g., .ansi-escaped-output > pre)
418-
'.ansi-escaped-output > pre, ' +
419-
// 5. The deepest container for error output (e.g., #ID > .cell-output-error... > .ansi-escaped-output > pre)
420-
'.cell-output-error.cell-output > .ansi-escaped-output > pre, ' +
421-
// Target any PRE tag that has an ID attribute
422-
'pre[id], ' +
423-
// code blocks inside list items
424-
'li > pre, ' +
425-
// PRE tags within an output display container
426-
'.cell-output-display > pre'
427-
);
408+
// Scrollable Region Accessibility Fix:
409+
// Target ALL <pre> elements, as they are the source of the scrollable-region-focusable errors.
410+
var scrollableRegions = document.querySelectorAll('pre');
428411

429412
scrollableRegions.forEach(function(region) {
430-
// Check if the element actually has horizontal overflow (is scrollable)
431-
// Add tabindex="0" to make the region keyboard-focusable.
432-
if (region.getAttribute('tabindex') === null || region.getAttribute('tabindex') === undefined) {
433-
region.setAttribute('tabindex', '0');
413+
// Check if the element has horizontal overflow (is scrollable).
414+
const hasScrollbar = region.scrollWidth > region.clientWidth || region.scrollHeight > region.clientHeight;
415+
416+
if (hasScrollbar) {
417+
// If it is scrollable AND it doesn't already have tabindex="0" (or a different value)
418+
if (region.getAttribute('tabindex') === null || region.getAttribute('tabindex') === undefined) {
419+
region.setAttribute('tabindex', '0');
420+
}
434421
}
435422
});
436423
});

0 commit comments

Comments
 (0)