ZenBrowserMirrors/pdf.js
1
0
Fork 0
mirror of https://github.com/zen-browser/pdf.js.git synced 2025-07-10 02:05:37 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Try to improve a11y for the "button groups" in the SecondaryToolbar/Sidebar (issue 14526)

Browse source 
*Please note:* I don't really know anything about a11y, hence it's possible that this patch either doesn't work correctly or at least isn't a complete solution.

In both the SecondaryToolbar and the Sidebar we have "button groups" that functionally acts essentially like radio-buttons. Based on skimming through [this MDN article](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/radio_role) it thus appears that we should tag them as such, using `role="radiogroup"` and `role="radio"`, and then utilize the `aria-checked` attribute to indicate to a11y software which button is currently active.
This commit is contained in:
Jonas Jenwald 2022-02-11 14:04:47 +01:00
parent c1f73b140f
commit d65169d754
3 changed files with 113 additions and 104 deletions
Download patch file Download diff file Expand all files Collapse all files

102
web/secondary_toolbar.js
View file

@ -222,53 +222,58 @@ class SecondaryToolbar {
}
}
#bindCursorToolsListener(buttons) {
#bindCursorToolsListener({ cursorSelectToolButton, cursorHandToolButton }) {
this.eventBus._on("cursortoolchanged", function ({ tool }) {
buttons.cursorSelectToolButton.classList.toggle(
"toggled",
tool === CursorTool.SELECT
);
buttons.cursorHandToolButton.classList.toggle(
"toggled",
tool === CursorTool.HAND
);
const isSelect = tool === CursorTool.SELECT,
isHand = tool === CursorTool.HAND;
cursorSelectToolButton.classList.toggle("toggled", isSelect);
cursorHandToolButton.classList.toggle("toggled", isHand);
cursorSelectToolButton.setAttribute("aria-checked", `${isSelect}`);
cursorHandToolButton.setAttribute("aria-checked", `${isHand}`);
});
}
#bindScrollModeListener(buttons) {
#bindScrollModeListener({
scrollPageButton,
scrollVerticalButton,
scrollHorizontalButton,
scrollWrappedButton,
spreadNoneButton,
spreadOddButton,
spreadEvenButton,
}) {
const scrollModeChanged = ({ mode }) => {
buttons.scrollPageButton.classList.toggle(
"toggled",
mode === ScrollMode.PAGE
);
buttons.scrollVerticalButton.classList.toggle(
"toggled",
mode === ScrollMode.VERTICAL
);
buttons.scrollHorizontalButton.classList.toggle(
"toggled",
mode === ScrollMode.HORIZONTAL
);
buttons.scrollWrappedButton.classList.toggle(
"toggled",
mode === ScrollMode.WRAPPED
);
const isPage = mode === ScrollMode.PAGE,
isVertical = mode === ScrollMode.VERTICAL,
isHorizontal = mode === ScrollMode.HORIZONTAL,
isWrapped = mode === ScrollMode.WRAPPED;
scrollPageButton.classList.toggle("toggled", isPage);
scrollVerticalButton.classList.toggle("toggled", isVertical);
scrollHorizontalButton.classList.toggle("toggled", isHorizontal);
scrollWrappedButton.classList.toggle("toggled", isWrapped);
scrollPageButton.setAttribute("aria-checked", `${isPage}`);
scrollVerticalButton.setAttribute("aria-checked", `${isVertical}`);
scrollHorizontalButton.setAttribute("aria-checked", `${isHorizontal}`);
scrollWrappedButton.setAttribute("aria-checked", `${isWrapped}`);
// Permanently *disable* the Scroll buttons when PAGE-scrolling is being
// enforced for *very* long/large documents; please see the `BaseViewer`.
const forceScrollModePage =
this.pagesCount > PagesCountLimit.FORCE_SCROLL_MODE_PAGE;
buttons.scrollPageButton.disabled = forceScrollModePage;
buttons.scrollVerticalButton.disabled = forceScrollModePage;
buttons.scrollHorizontalButton.disabled = forceScrollModePage;
buttons.scrollWrappedButton.disabled = forceScrollModePage;
scrollPageButton.disabled = forceScrollModePage;
scrollVerticalButton.disabled = forceScrollModePage;
scrollHorizontalButton.disabled = forceScrollModePage;
scrollWrappedButton.disabled = forceScrollModePage;
// Temporarily *disable* the Spread buttons when horizontal scrolling is
// enabled, since the non-default Spread modes doesn't affect the layout.
const isScrollModeHorizontal = mode === ScrollMode.HORIZONTAL;
buttons.spreadNoneButton.disabled = isScrollModeHorizontal;
buttons.spreadOddButton.disabled = isScrollModeHorizontal;
buttons.spreadEvenButton.disabled = isScrollModeHorizontal;
spreadNoneButton.disabled = isHorizontal;
spreadOddButton.disabled = isHorizontal;
spreadEvenButton.disabled = isHorizontal;
};
this.eventBus._on("scrollmodechanged", scrollModeChanged);
@ -279,20 +284,23 @@ class SecondaryToolbar {
});
}
#bindSpreadModeListener(buttons) {
#bindSpreadModeListener({
spreadNoneButton,
spreadOddButton,
spreadEvenButton,
}) {
function spreadModeChanged({ mode }) {
buttons.spreadNoneButton.classList.toggle(
"toggled",
mode === SpreadMode.NONE
);
buttons.spreadOddButton.classList.toggle(
"toggled",
mode === SpreadMode.ODD
);
buttons.spreadEvenButton.classList.toggle(
"toggled",
mode === SpreadMode.EVEN
);
const isNone = mode === SpreadMode.NONE,
isOdd = mode === SpreadMode.ODD,
isEven = mode === SpreadMode.EVEN;
spreadNoneButton.classList.toggle("toggled", isNone);
spreadOddButton.classList.toggle("toggled", isOdd);
spreadEvenButton.classList.toggle("toggled", isEven);
spreadNoneButton.setAttribute("aria-checked", `${isNone}`);
spreadOddButton.setAttribute("aria-checked", `${isOdd}`);
spreadEvenButton.setAttribute("aria-checked", `${isEven}`);
}
this.eventBus._on("spreadmodechanged", spreadModeChanged);