mirror of
https://github.com/zen-browser/pdf.js.git
synced 2025-07-08 01:10:08 +02:00
Try to improve a11y for the "button groups" in the SecondaryToolbar/Sidebar (issue 14526)
*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:
parent
c1f73b140f
commit
d65169d754
3 changed files with 113 additions and 104 deletions
|
@ -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);
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue