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:
Jonas Jenwald
parent
c1f73b140f
commit
d65169d754
@ -212,34 +212,29 @@ class PDFSidebar {
|
|||||||
// in order to prevent setting it to an invalid state.
|
// in order to prevent setting it to an invalid state.
|
||||||
this.active = view;
|
this.active = view;
|
||||||
|
|
||||||
// Update the CSS classes, for all buttons...
|
const isThumbs = view === SidebarView.THUMBS,
|
||||||
this.thumbnailButton.classList.toggle(
|
isOutline = view === SidebarView.OUTLINE,
|
||||||
"toggled",
|
isAttachments = view === SidebarView.ATTACHMENTS,
|
||||||
view === SidebarView.THUMBS
|
isLayers = view === SidebarView.LAYERS;
|
||||||
);
|
|
||||||
this.outlineButton.classList.toggle(
|
// Update the CSS classes (and aria attributes), for all buttons...
|
||||||
"toggled",
|
this.thumbnailButton.classList.toggle("toggled", isThumbs);
|
||||||
view === SidebarView.OUTLINE
|
this.outlineButton.classList.toggle("toggled", isOutline);
|
||||||
);
|
this.attachmentsButton.classList.toggle("toggled", isAttachments);
|
||||||
this.attachmentsButton.classList.toggle(
|
this.layersButton.classList.toggle("toggled", isLayers);
|
||||||
"toggled",
|
|
||||||
view === SidebarView.ATTACHMENTS
|
this.thumbnailButton.setAttribute("aria-checked", `${isThumbs}`);
|
||||||
);
|
this.outlineButton.setAttribute("aria-checked", `${isOutline}`);
|
||||||
this.layersButton.classList.toggle("toggled", view === SidebarView.LAYERS);
|
this.attachmentsButton.setAttribute("aria-checked", `${isAttachments}`);
|
||||||
|
this.layersButton.setAttribute("aria-checked", `${isLayers}`);
|
||||||
// ... and for all views.
|
// ... and for all views.
|
||||||
this.thumbnailView.classList.toggle("hidden", view !== SidebarView.THUMBS);
|
this.thumbnailView.classList.toggle("hidden", !isThumbs);
|
||||||
this.outlineView.classList.toggle("hidden", view !== SidebarView.OUTLINE);
|
this.outlineView.classList.toggle("hidden", !isOutline);
|
||||||
this.attachmentsView.classList.toggle(
|
this.attachmentsView.classList.toggle("hidden", !isAttachments);
|
||||||
"hidden",
|
this.layersView.classList.toggle("hidden", !isLayers);
|
||||||
view !== SidebarView.ATTACHMENTS
|
|
||||||
);
|
|
||||||
this.layersView.classList.toggle("hidden", view !== SidebarView.LAYERS);
|
|
||||||
|
|
||||||
// Finally, update view-specific CSS classes.
|
// Finally, update view-specific CSS classes.
|
||||||
this._outlineOptionsContainer.classList.toggle(
|
this._outlineOptionsContainer.classList.toggle("hidden", !isOutline);
|
||||||
"hidden",
|
|
||||||
view !== SidebarView.OUTLINE
|
|
||||||
);
|
|
||||||
|
|
||||||
if (forceOpen && !this.isOpen) {
|
if (forceOpen && !this.isOpen) {
|
||||||
this.open();
|
this.open();
|
||||||
|
|||||||
@ -222,53 +222,58 @@ class SecondaryToolbar {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#bindCursorToolsListener(buttons) {
|
#bindCursorToolsListener({ cursorSelectToolButton, cursorHandToolButton }) {
|
||||||
this.eventBus._on("cursortoolchanged", function ({ tool }) {
|
this.eventBus._on("cursortoolchanged", function ({ tool }) {
|
||||||
buttons.cursorSelectToolButton.classList.toggle(
|
const isSelect = tool === CursorTool.SELECT,
|
||||||
"toggled",
|
isHand = tool === CursorTool.HAND;
|
||||||
tool === CursorTool.SELECT
|
|
||||||
);
|
cursorSelectToolButton.classList.toggle("toggled", isSelect);
|
||||||
buttons.cursorHandToolButton.classList.toggle(
|
cursorHandToolButton.classList.toggle("toggled", isHand);
|
||||||
"toggled",
|
|
||||||
tool === CursorTool.HAND
|
cursorSelectToolButton.setAttribute("aria-checked", `${isSelect}`);
|
||||||
);
|
cursorHandToolButton.setAttribute("aria-checked", `${isHand}`);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
#bindScrollModeListener(buttons) {
|
#bindScrollModeListener({
|
||||||
|
scrollPageButton,
|
||||||
|
scrollVerticalButton,
|
||||||
|
scrollHorizontalButton,
|
||||||
|
scrollWrappedButton,
|
||||||
|
spreadNoneButton,
|
||||||
|
spreadOddButton,
|
||||||
|
spreadEvenButton,
|
||||||
|
}) {
|
||||||
const scrollModeChanged = ({ mode }) => {
|
const scrollModeChanged = ({ mode }) => {
|
||||||
buttons.scrollPageButton.classList.toggle(
|
const isPage = mode === ScrollMode.PAGE,
|
||||||
"toggled",
|
isVertical = mode === ScrollMode.VERTICAL,
|
||||||
mode === ScrollMode.PAGE
|
isHorizontal = mode === ScrollMode.HORIZONTAL,
|
||||||
);
|
isWrapped = mode === ScrollMode.WRAPPED;
|
||||||
buttons.scrollVerticalButton.classList.toggle(
|
|
||||||
"toggled",
|
scrollPageButton.classList.toggle("toggled", isPage);
|
||||||
mode === ScrollMode.VERTICAL
|
scrollVerticalButton.classList.toggle("toggled", isVertical);
|
||||||
);
|
scrollHorizontalButton.classList.toggle("toggled", isHorizontal);
|
||||||
buttons.scrollHorizontalButton.classList.toggle(
|
scrollWrappedButton.classList.toggle("toggled", isWrapped);
|
||||||
"toggled",
|
|
||||||
mode === ScrollMode.HORIZONTAL
|
scrollPageButton.setAttribute("aria-checked", `${isPage}`);
|
||||||
);
|
scrollVerticalButton.setAttribute("aria-checked", `${isVertical}`);
|
||||||
buttons.scrollWrappedButton.classList.toggle(
|
scrollHorizontalButton.setAttribute("aria-checked", `${isHorizontal}`);
|
||||||
"toggled",
|
scrollWrappedButton.setAttribute("aria-checked", `${isWrapped}`);
|
||||||
mode === ScrollMode.WRAPPED
|
|
||||||
);
|
|
||||||
|
|
||||||
// Permanently *disable* the Scroll buttons when PAGE-scrolling is being
|
// Permanently *disable* the Scroll buttons when PAGE-scrolling is being
|
||||||
// enforced for *very* long/large documents; please see the `BaseViewer`.
|
// enforced for *very* long/large documents; please see the `BaseViewer`.
|
||||||
const forceScrollModePage =
|
const forceScrollModePage =
|
||||||
this.pagesCount > PagesCountLimit.FORCE_SCROLL_MODE_PAGE;
|
this.pagesCount > PagesCountLimit.FORCE_SCROLL_MODE_PAGE;
|
||||||
buttons.scrollPageButton.disabled = forceScrollModePage;
|
scrollPageButton.disabled = forceScrollModePage;
|
||||||
buttons.scrollVerticalButton.disabled = forceScrollModePage;
|
scrollVerticalButton.disabled = forceScrollModePage;
|
||||||
buttons.scrollHorizontalButton.disabled = forceScrollModePage;
|
scrollHorizontalButton.disabled = forceScrollModePage;
|
||||||
buttons.scrollWrappedButton.disabled = forceScrollModePage;
|
scrollWrappedButton.disabled = forceScrollModePage;
|
||||||
|
|
||||||
// Temporarily *disable* the Spread buttons when horizontal scrolling is
|
// Temporarily *disable* the Spread buttons when horizontal scrolling is
|
||||||
// enabled, since the non-default Spread modes doesn't affect the layout.
|
// enabled, since the non-default Spread modes doesn't affect the layout.
|
||||||
const isScrollModeHorizontal = mode === ScrollMode.HORIZONTAL;
|
spreadNoneButton.disabled = isHorizontal;
|
||||||
buttons.spreadNoneButton.disabled = isScrollModeHorizontal;
|
spreadOddButton.disabled = isHorizontal;
|
||||||
buttons.spreadOddButton.disabled = isScrollModeHorizontal;
|
spreadEvenButton.disabled = isHorizontal;
|
||||||
buttons.spreadEvenButton.disabled = isScrollModeHorizontal;
|
|
||||||
};
|
};
|
||||||
this.eventBus._on("scrollmodechanged", scrollModeChanged);
|
this.eventBus._on("scrollmodechanged", scrollModeChanged);
|
||||||
|
|
||||||
@ -279,20 +284,23 @@ class SecondaryToolbar {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
#bindSpreadModeListener(buttons) {
|
#bindSpreadModeListener({
|
||||||
|
spreadNoneButton,
|
||||||
|
spreadOddButton,
|
||||||
|
spreadEvenButton,
|
||||||
|
}) {
|
||||||
function spreadModeChanged({ mode }) {
|
function spreadModeChanged({ mode }) {
|
||||||
buttons.spreadNoneButton.classList.toggle(
|
const isNone = mode === SpreadMode.NONE,
|
||||||
"toggled",
|
isOdd = mode === SpreadMode.ODD,
|
||||||
mode === SpreadMode.NONE
|
isEven = mode === SpreadMode.EVEN;
|
||||||
);
|
|
||||||
buttons.spreadOddButton.classList.toggle(
|
spreadNoneButton.classList.toggle("toggled", isNone);
|
||||||
"toggled",
|
spreadOddButton.classList.toggle("toggled", isOdd);
|
||||||
mode === SpreadMode.ODD
|
spreadEvenButton.classList.toggle("toggled", isEven);
|
||||||
);
|
|
||||||
buttons.spreadEvenButton.classList.toggle(
|
spreadNoneButton.setAttribute("aria-checked", `${isNone}`);
|
||||||
"toggled",
|
spreadOddButton.setAttribute("aria-checked", `${isOdd}`);
|
||||||
mode === SpreadMode.EVEN
|
spreadEvenButton.setAttribute("aria-checked", `${isEven}`);
|
||||||
);
|
|
||||||
}
|
}
|
||||||
this.eventBus._on("spreadmodechanged", spreadModeChanged);
|
this.eventBus._on("spreadmodechanged", spreadModeChanged);
|
||||||
|
|
||||||
|
|||||||
@ -74,17 +74,17 @@ See https://github.com/adobe-type-tools/cmap-resources
|
|||||||
<div id="sidebarContainer">
|
<div id="sidebarContainer">
|
||||||
<div id="toolbarSidebar">
|
<div id="toolbarSidebar">
|
||||||
<div id="toolbarSidebarLeft">
|
<div id="toolbarSidebarLeft">
|
||||||
<div class="splitToolbarButton toggled">
|
<div id="sidebarViewButtons" class="splitToolbarButton toggled" role="radiogroup">
|
||||||
<button id="viewThumbnail" class="toolbarButton toggled" title="Show Thumbnails" tabindex="2" data-l10n-id="thumbs">
|
<button id="viewThumbnail" class="toolbarButton toggled" title="Show Thumbnails" tabindex="2" data-l10n-id="thumbs" role="radio" aria-checked="true" aria-controls="thumbnailView">
|
||||||
<span data-l10n-id="thumbs_label">Thumbnails</span>
|
<span data-l10n-id="thumbs_label">Thumbnails</span>
|
||||||
</button>
|
</button>
|
||||||
<button id="viewOutline" class="toolbarButton" title="Show Document Outline (double-click to expand/collapse all items)" tabindex="3" data-l10n-id="document_outline">
|
<button id="viewOutline" class="toolbarButton" title="Show Document Outline (double-click to expand/collapse all items)" tabindex="3" data-l10n-id="document_outline" role="radio" aria-checked="false" aria-controls="outlineView">
|
||||||
<span data-l10n-id="document_outline_label">Document Outline</span>
|
<span data-l10n-id="document_outline_label">Document Outline</span>
|
||||||
</button>
|
</button>
|
||||||
<button id="viewAttachments" class="toolbarButton" title="Show Attachments" tabindex="4" data-l10n-id="attachments">
|
<button id="viewAttachments" class="toolbarButton" title="Show Attachments" tabindex="4" data-l10n-id="attachments" role="radio" aria-checked="false" aria-controls="attachmentsView">
|
||||||
<span data-l10n-id="attachments_label">Attachments</span>
|
<span data-l10n-id="attachments_label">Attachments</span>
|
||||||
</button>
|
</button>
|
||||||
<button id="viewLayers" class="toolbarButton" title="Show Layers (double-click to reset all layers to the default state)" tabindex="5" data-l10n-id="layers">
|
<button id="viewLayers" class="toolbarButton" title="Show Layers (double-click to reset all layers to the default state)" tabindex="5" data-l10n-id="layers" role="radio" aria-checked="false" aria-controls="layersView">
|
||||||
<span data-l10n-id="layers_label">Layers</span>
|
<span data-l10n-id="layers_label">Layers</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@ -191,39 +191,45 @@ See https://github.com/adobe-type-tools/cmap-resources
|
|||||||
|
|
||||||
<div class="horizontalToolbarSeparator"></div>
|
<div class="horizontalToolbarSeparator"></div>
|
||||||
|
|
||||||
<button id="cursorSelectTool" class="secondaryToolbarButton selectTool toggled" title="Enable Text Selection Tool" tabindex="60" data-l10n-id="cursor_text_select_tool">
|
<div id="cursorToolButtons" role="radiogroup">
|
||||||
<span data-l10n-id="cursor_text_select_tool_label">Text Selection Tool</span>
|
<button id="cursorSelectTool" class="secondaryToolbarButton selectTool toggled" title="Enable Text Selection Tool" tabindex="60" data-l10n-id="cursor_text_select_tool" role="radio" aria-checked="true">
|
||||||
</button>
|
<span data-l10n-id="cursor_text_select_tool_label">Text Selection Tool</span>
|
||||||
<button id="cursorHandTool" class="secondaryToolbarButton handTool" title="Enable Hand Tool" tabindex="61" data-l10n-id="cursor_hand_tool">
|
</button>
|
||||||
<span data-l10n-id="cursor_hand_tool_label">Hand Tool</span>
|
<button id="cursorHandTool" class="secondaryToolbarButton handTool" title="Enable Hand Tool" tabindex="61" data-l10n-id="cursor_hand_tool" role="radio" aria-checked="false">
|
||||||
</button>
|
<span data-l10n-id="cursor_hand_tool_label">Hand Tool</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="horizontalToolbarSeparator"></div>
|
<div class="horizontalToolbarSeparator"></div>
|
||||||
|
|
||||||
<button id="scrollPage" class="secondaryToolbarButton scrollPage" title="Use Page Scrolling" tabindex="62" data-l10n-id="scroll_page">
|
<div id="scrollModeButtons" role="radiogroup">
|
||||||
<span data-l10n-id="scroll_page_label">Page Scrolling</span>
|
<button id="scrollPage" class="secondaryToolbarButton scrollPage" title="Use Page Scrolling" tabindex="62" data-l10n-id="scroll_page" role="radio" aria-checked="false">
|
||||||
</button>
|
<span data-l10n-id="scroll_page_label">Page Scrolling</span>
|
||||||
<button id="scrollVertical" class="secondaryToolbarButton scrollVertical toggled" title="Use Vertical Scrolling" tabindex="63" data-l10n-id="scroll_vertical">
|
</button>
|
||||||
<span data-l10n-id="scroll_vertical_label">Vertical Scrolling</span>
|
<button id="scrollVertical" class="secondaryToolbarButton scrollVertical toggled" title="Use Vertical Scrolling" tabindex="63" data-l10n-id="scroll_vertical" role="radio" aria-checked="true">
|
||||||
</button>
|
<span data-l10n-id="scroll_vertical_label" >Vertical Scrolling</span>
|
||||||
<button id="scrollHorizontal" class="secondaryToolbarButton scrollHorizontal" title="Use Horizontal Scrolling" tabindex="64" data-l10n-id="scroll_horizontal">
|
</button>
|
||||||
<span data-l10n-id="scroll_horizontal_label">Horizontal Scrolling</span>
|
<button id="scrollHorizontal" class="secondaryToolbarButton scrollHorizontal" title="Use Horizontal Scrolling" tabindex="64" data-l10n-id="scroll_horizontal" role="radio" aria-checked="false">
|
||||||
</button>
|
<span data-l10n-id="scroll_horizontal_label">Horizontal Scrolling</span>
|
||||||
<button id="scrollWrapped" class="secondaryToolbarButton scrollWrapped" title="Use Wrapped Scrolling" tabindex="65" data-l10n-id="scroll_wrapped">
|
</button>
|
||||||
<span data-l10n-id="scroll_wrapped_label">Wrapped Scrolling</span>
|
<button id="scrollWrapped" class="secondaryToolbarButton scrollWrapped" title="Use Wrapped Scrolling" tabindex="65" data-l10n-id="scroll_wrapped" role="radio" aria-checked="false">
|
||||||
</button>
|
<span data-l10n-id="scroll_wrapped_label">Wrapped Scrolling</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="horizontalToolbarSeparator"></div>
|
<div class="horizontalToolbarSeparator"></div>
|
||||||
|
|
||||||
<button id="spreadNone" class="secondaryToolbarButton spreadNone toggled" title="Do not join page spreads" tabindex="66" data-l10n-id="spread_none">
|
<div id="spreadModeButtons" role="radiogroup">
|
||||||
<span data-l10n-id="spread_none_label">No Spreads</span>
|
<button id="spreadNone" class="secondaryToolbarButton spreadNone toggled" title="Do not join page spreads" tabindex="66" data-l10n-id="spread_none" role="radio" aria-checked="true">
|
||||||
</button>
|
<span data-l10n-id="spread_none_label">No Spreads</span>
|
||||||
<button id="spreadOdd" class="secondaryToolbarButton spreadOdd" title="Join page spreads starting with odd-numbered pages" tabindex="67" data-l10n-id="spread_odd">
|
</button>
|
||||||
<span data-l10n-id="spread_odd_label">Odd Spreads</span>
|
<button id="spreadOdd" class="secondaryToolbarButton spreadOdd" title="Join page spreads starting with odd-numbered pages" tabindex="67" data-l10n-id="spread_odd" role="radio" aria-checked="false">
|
||||||
</button>
|
<span data-l10n-id="spread_odd_label">Odd Spreads</span>
|
||||||
<button id="spreadEven" class="secondaryToolbarButton spreadEven" title="Join page spreads starting with even-numbered pages" tabindex="68" data-l10n-id="spread_even">
|
</button>
|
||||||
<span data-l10n-id="spread_even_label">Even Spreads</span>
|
<button id="spreadEven" class="secondaryToolbarButton spreadEven" title="Join page spreads starting with even-numbered pages" tabindex="68" data-l10n-id="spread_even" role="radio" aria-checked="false">
|
||||||
</button>
|
<span data-l10n-id="spread_even_label">Even Spreads</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="horizontalToolbarSeparator"></div>
|
<div class="horizontalToolbarSeparator"></div>
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user