Skip to content

Commit 4570107

Browse files
lfarrelllfarrell
authored
Pdfjs accessibility (#1254)
* Update layout to fix tab ordering * Fix tabbing of dropdown * Fix toolbar focus background color
1 parent 094d8d9 commit 4570107

File tree

2 files changed

+107
-106
lines changed

2 files changed

+107
-106
lines changed

‎access/src/main/webapp/WEB-INF/jsp/fullRecord/pdfViewer.jsp

Lines changed: 105 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -86,86 +86,7 @@
8686
</div>
8787
</div> <!-- findbar -->
8888

89-
<div id="secondaryToolbar" class="secondaryToolbar hidden doorHangerRight">
90-
<div id="secondaryToolbarButtonContainer">
91-
<button id="secondaryPresentationMode" class="secondaryToolbarButton presentationMode visibleLargeView" title="Switch to Presentation Mode">
92-
<span data-l10n-id="presentation_mode_label">Presentation Mode</span>
93-
</button>
94-
95-
<button id="secondaryOpenFile" class="secondaryToolbarButton openFile visibleLargeView" title="Open File">
96-
<span data-l10n-id="open_file_label">Open</span>
97-
</button>
98-
99-
<button id="secondaryPrint" class="secondaryToolbarButton print visibleMediumView" title="Print">
100-
<span data-l10n-id="print_label">Print</span>
101-
</button>
102-
103-
<button id="secondaryDownload" class="secondaryToolbarButton download visibleMediumView" title="Download">
104-
<span data-l10n-id="download_label">Download</span>
105-
</button>
106-
107-
<a href="#" id="secondaryViewBookmark" class="secondaryToolbarButton bookmark visibleSmallView" title="Current view (copy or open in new window)">
108-
<span data-l10n-id="bookmark_label">Current View</span>
109-
</a>
110-
111-
<div class="horizontalToolbarSeparator visibleLargeView"></div>
112-
113-
<button id="firstPage" class="secondaryToolbarButton firstPage" title="Go to First Page">
114-
<span data-l10n-id="first_page_label">Go to First Page</span>
115-
</button>
116-
<button id="lastPage" class="secondaryToolbarButton lastPage" title="Go to Last Page">
117-
<span data-l10n-id="last_page_label">Go to Last Page</span>
118-
</button>
119-
120-
<div class="horizontalToolbarSeparator"></div>
121-
122-
<button id="pageRotateCw" class="secondaryToolbarButton rotateCw" title="Rotate Clockwise">
123-
<span data-l10n-id="page_rotate_cw_label">Rotate Clockwise</span>
124-
</button>
125-
<button id="pageRotateCcw" class="secondaryToolbarButton rotateCcw" title="Rotate Counterclockwise">
126-
<span data-l10n-id="page_rotate_ccw_label">Rotate Counterclockwise</span>
127-
</button>
12889

129-
<div class="horizontalToolbarSeparator"></div>
130-
131-
<button id="cursorSelectTool" class="secondaryToolbarButton selectTool toggled" title="Enable Text Selection Tool">
132-
<span data-l10n-id="cursor_text_select_tool_label">Text Selection Tool</span>
133-
</button>
134-
<button id="cursorHandTool" class="secondaryToolbarButton handTool" title="Enable Hand Tool">
135-
<span data-l10n-id="cursor_hand_tool_label">Hand Tool</span>
136-
</button>
137-
138-
<div class="horizontalToolbarSeparator"></div>
139-
140-
<button id="scrollVertical" class="secondaryToolbarButton scrollModeButtons scrollVertical toggled" title="Use Vertical Scrolling">
141-
<span data-l10n-id="scroll_vertical_label">Vertical Scrolling</span>
142-
</button>
143-
<button id="scrollHorizontal" class="secondaryToolbarButton scrollModeButtons scrollHorizontal" title="Use Horizontal Scrolling">
144-
<span data-l10n-id="scroll_horizontal_label">Horizontal Scrolling</span>
145-
</button>
146-
<button id="scrollWrapped" class="secondaryToolbarButton scrollModeButtons scrollWrapped" title="Use Wrapped Scrolling">
147-
<span data-l10n-id="scroll_wrapped_label">Wrapped Scrolling</span>
148-
</button>
149-
150-
<div class="horizontalToolbarSeparator scrollModeButtons"></div>
151-
152-
<button id="spreadNone" class="secondaryToolbarButton spreadModeButtons spreadNone toggled" title="Do not join page spreads">
153-
<span data-l10n-id="spread_none_label">No Spreads</span>
154-
</button>
155-
<button id="spreadOdd" class="secondaryToolbarButton spreadModeButtons spreadOdd" title="Join page spreads starting with odd-numbered pages">
156-
<span data-l10n-id="spread_odd_label">Odd Spreads</span>
157-
</button>
158-
<button id="spreadEven" class="secondaryToolbarButton spreadModeButtons spreadEven" title="Join page spreads starting with even-numbered pages">
159-
<span data-l10n-id="spread_even_label">Even Spreads</span>
160-
</button>
161-
162-
<div class="horizontalToolbarSeparator spreadModeButtons"></div>
163-
164-
<button id="documentProperties" class="secondaryToolbarButton documentProperties" title="Document Properties…">
165-
<span data-l10n-id="document_properties_label">Document Properties…</span>
166-
</button>
167-
</div>
168-
</div> <!-- secondaryToolbar -->
16990

17091
<div class="toolbar">
17192
<div id="toolbarContainer">
@@ -190,6 +111,34 @@
190111
<input type="number" id="pageNumber" class="toolbarField pageNumber" title="Page" value="1" size="4" min="1">
191112
<span id="numPages" class="toolbarLabel"></span>
192113
</div>
114+
<div id="toolbarViewerMiddle">
115+
<div class="splitToolbarButton">
116+
<button id="zoomOut" class="toolbarButton zoomOut" title="Zoom Out">
117+
<span data-l10n-id="zoom_out_label">Zoom Out</span>
118+
</button>
119+
<div class="splitToolbarButtonSeparator"></div>
120+
<button id="zoomIn" class="toolbarButton zoomIn" title="Zoom In">
121+
<span data-l10n-id="zoom_in_label">Zoom In</span>
122+
</button>
123+
</div>
124+
<span id="scaleSelectContainer" class="dropdownToolbarButton">
125+
<select id="scaleSelect" title="Zoom">
126+
<option id="pageAutoOption" title="" value="auto" selected="selected" data-l10n-id="page_scale_auto">Automatic Zoom</option>
127+
<option id="pageActualOption" title="" value="page-actual" data-l10n-id="page_scale_actual">Actual Size</option>
128+
<option id="pageFitOption" title="" value="page-fit" data-l10n-id="page_scale_fit">Page Fit</option>
129+
<option id="pageWidthOption" title="" value="page-width" data-l10n-id="page_scale_width">Page Width</option>
130+
<option id="customScaleOption" title="" value="custom" disabled="disabled" hidden="true"></option>
131+
<option title="" value="0.5" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 50 }'>50%</option>
132+
<option title="" value="0.75" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 75 }'>75%</option>
133+
<option title="" value="1" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 100 }'>100%</option>
134+
<option title="" value="1.25" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 125 }'>125%</option>
135+
<option title="" value="1.5" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 150 }'>150%</option>
136+
<option title="" value="2" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 200 }'>200%</option>
137+
<option title="" value="3" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 300 }'>300%</option>
138+
<option title="" value="4" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 400 }'>400%</option>
139+
</select>
140+
</span>
141+
</div>
193142
<div id="toolbarViewerRight">
194143
<button id="presentationMode" class="toolbarButton presentationMode hiddenLargeView" title="Switch to Presentation Mode">
195144
<span data-l10n-id="presentation_mode_label">Presentation Mode</span>
@@ -216,34 +165,86 @@
216165
<span data-l10n-id="tools_label">Tools</span>
217166
</button>
218167
</div>
219-
<div id="toolbarViewerMiddle">
220-
<div class="splitToolbarButton">
221-
<button id="zoomOut" class="toolbarButton zoomOut" title="Zoom Out">
222-
<span data-l10n-id="zoom_out_label">Zoom Out</span>
168+
<div id="secondaryToolbar" class="secondaryToolbar hidden doorHangerRight">
169+
<div id="secondaryToolbarButtonContainer">
170+
<button id="secondaryPresentationMode" class="secondaryToolbarButton presentationMode visibleLargeView" title="Switch to Presentation Mode">
171+
<span data-l10n-id="presentation_mode_label">Presentation Mode</span>
223172
</button>
224-
<div class="splitToolbarButtonSeparator"></div>
225-
<button id="zoomIn" class="toolbarButton zoomIn" title="Zoom In">
226-
<span data-l10n-id="zoom_in_label">Zoom In</span>
173+
174+
<button id="secondaryOpenFile" class="secondaryToolbarButton openFile visibleLargeView" title="Open File">
175+
<span data-l10n-id="open_file_label">Open</span>
176+
</button>
177+
178+
<button id="secondaryPrint" class="secondaryToolbarButton print visibleMediumView" title="Print">
179+
<span data-l10n-id="print_label">Print</span>
180+
</button>
181+
182+
<button id="secondaryDownload" class="secondaryToolbarButton download visibleMediumView" title="Download">
183+
<span data-l10n-id="download_label">Download</span>
184+
</button>
185+
186+
<a href="#" id="secondaryViewBookmark" class="secondaryToolbarButton bookmark visibleSmallView" title="Current view (copy or open in new window)">
187+
<span data-l10n-id="bookmark_label">Current View</span>
188+
</a>
189+
190+
<div class="horizontalToolbarSeparator visibleLargeView"></div>
191+
192+
<button id="firstPage" class="secondaryToolbarButton firstPage" title="Go to First Page">
193+
<span data-l10n-id="first_page_label">Go to First Page</span>
194+
</button>
195+
<button id="lastPage" class="secondaryToolbarButton lastPage" title="Go to Last Page">
196+
<span data-l10n-id="last_page_label">Go to Last Page</span>
197+
</button>
198+
199+
<div class="horizontalToolbarSeparator"></div>
200+
201+
<button id="pageRotateCw" class="secondaryToolbarButton rotateCw" title="Rotate Clockwise">
202+
<span data-l10n-id="page_rotate_cw_label">Rotate Clockwise</span>
203+
</button>
204+
<button id="pageRotateCcw" class="secondaryToolbarButton rotateCcw" title="Rotate Counterclockwise">
205+
<span data-l10n-id="page_rotate_ccw_label">Rotate Counterclockwise</span>
206+
</button>
207+
208+
<div class="horizontalToolbarSeparator"></div>
209+
210+
<button id="cursorSelectTool" class="secondaryToolbarButton selectTool toggled" title="Enable Text Selection Tool">
211+
<span data-l10n-id="cursor_text_select_tool_label">Text Selection Tool</span>
212+
</button>
213+
<button id="cursorHandTool" class="secondaryToolbarButton handTool" title="Enable Hand Tool">
214+
<span data-l10n-id="cursor_hand_tool_label">Hand Tool</span>
215+
</button>
216+
217+
<div class="horizontalToolbarSeparator"></div>
218+
219+
<button id="scrollVertical" class="secondaryToolbarButton scrollModeButtons scrollVertical toggled" title="Use Vertical Scrolling">
220+
<span data-l10n-id="scroll_vertical_label">Vertical Scrolling</span>
221+
</button>
222+
<button id="scrollHorizontal" class="secondaryToolbarButton scrollModeButtons scrollHorizontal" title="Use Horizontal Scrolling">
223+
<span data-l10n-id="scroll_horizontal_label">Horizontal Scrolling</span>
224+
</button>
225+
<button id="scrollWrapped" class="secondaryToolbarButton scrollModeButtons scrollWrapped" title="Use Wrapped Scrolling">
226+
<span data-l10n-id="scroll_wrapped_label">Wrapped Scrolling</span>
227+
</button>
228+
229+
<div class="horizontalToolbarSeparator scrollModeButtons"></div>
230+
231+
<button id="spreadNone" class="secondaryToolbarButton spreadModeButtons spreadNone toggled" title="Do not join page spreads">
232+
<span data-l10n-id="spread_none_label">No Spreads</span>
233+
</button>
234+
<button id="spreadOdd" class="secondaryToolbarButton spreadModeButtons spreadOdd" title="Join page spreads starting with odd-numbered pages">
235+
<span data-l10n-id="spread_odd_label">Odd Spreads</span>
236+
</button>
237+
<button id="spreadEven" class="secondaryToolbarButton spreadModeButtons spreadEven" title="Join page spreads starting with even-numbered pages">
238+
<span data-l10n-id="spread_even_label">Even Spreads</span>
239+
</button>
240+
241+
<div class="horizontalToolbarSeparator spreadModeButtons"></div>
242+
243+
<button id="documentProperties" class="secondaryToolbarButton documentProperties" title="Document Properties…">
244+
<span data-l10n-id="document_properties_label">Document Properties…</span>
227245
</button>
228246
</div>
229-
<span id="scaleSelectContainer" class="dropdownToolbarButton">
230-
<select id="scaleSelect" title="Zoom">
231-
<option id="pageAutoOption" title="" value="auto" selected="selected" data-l10n-id="page_scale_auto">Automatic Zoom</option>
232-
<option id="pageActualOption" title="" value="page-actual" data-l10n-id="page_scale_actual">Actual Size</option>
233-
<option id="pageFitOption" title="" value="page-fit" data-l10n-id="page_scale_fit">Page Fit</option>
234-
<option id="pageWidthOption" title="" value="page-width" data-l10n-id="page_scale_width">Page Width</option>
235-
<option id="customScaleOption" title="" value="custom" disabled="disabled" hidden="true"></option>
236-
<option title="" value="0.5" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 50 }'>50%</option>
237-
<option title="" value="0.75" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 75 }'>75%</option>
238-
<option title="" value="1" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 100 }'>100%</option>
239-
<option title="" value="1.25" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 125 }'>125%</option>
240-
<option title="" value="1.5" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 150 }'>150%</option>
241-
<option title="" value="2" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 200 }'>200%</option>
242-
<option title="" value="3" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 300 }'>300%</option>
243-
<option title="" value="4" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 400 }'>400%</option>
244-
</select>
245-
</span>
246-
</div>
247+
</div> <!-- secondaryToolbar -->
247248
</div>
248249
<div id="loadingBar">
249250
<div class="progress">

‎static/plugins/pdfjs/web/viewer.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -362,7 +362,7 @@
362362
--sidebar-bg-color: rgba(245, 246, 247, 1);
363363
--toolbar-bg-color: rgba(249, 249, 250, 1);
364364
--toolbar-border-color: rgba(204, 204, 204, 1);
365-
--button-hover-color: rgba(221, 222, 223, 1);
365+
--button-hover-color: #13294B;
366366
--toggled-btn-bg-color: rgba(0, 0, 0, 0.3);
367367
--dropdown-btn-bg-color: rgba(215, 215, 219, 1);
368368
--separator-color: rgba(0, 0, 0, 0.3);
@@ -430,7 +430,7 @@
430430
--sidebar-bg-color: rgba(50, 50, 52, 1);
431431
--toolbar-bg-color: rgba(56, 56, 61, 1);
432432
--toolbar-border-color: rgba(12, 12, 13, 1);
433-
--button-hover-color: rgba(102, 102, 103, 1);
433+
--button-hover-color: #13294B;
434434
--toggled-btn-bg-color: rgba(0, 0, 0, 0.3);
435435
--dropdown-btn-bg-color: rgba(74, 74, 79, 1);
436436
--separator-color: rgba(0, 0, 0, 0.3);

0 commit comments

Comments
 (0)