Skip to content

Commit 7af3b44

Browse files
cdrinicdrini
authored
Merge pull request #1491 from cdrini/a11y/bookmarks-panel
Bookmarks panel accessibility improvements
2 parents c370aee + 02ceb4c commit 7af3b44

File tree

11 files changed

+330
-158
lines changed

11 files changed

+330
-158
lines changed

‎package-lock.json‎

Lines changed: 210 additions & 45 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -34,14 +34,14 @@
3434
"@internetarchive/bergamot-translator": "^0.4.9-ia.1",
3535
"@internetarchive/ia-activity-indicator": "^0.0.4",
3636
"@internetarchive/ia-item-navigator": "2.2.2",
37-
"@internetarchive/icon-bookmark": "^1.3.4",
38-
"@internetarchive/icon-dl": "^1.3.4",
39-
"@internetarchive/icon-edit-pencil": "^1.3.4",
40-
"@internetarchive/icon-magnify-minus": "^1.3.4",
41-
"@internetarchive/icon-magnify-plus": "^1.3.4",
42-
"@internetarchive/icon-search": "^1.3.4",
43-
"@internetarchive/icon-toc": "^1.3.4",
44-
"@internetarchive/icon-visual-adjustment": "^1.3.4",
37+
"@internetarchive/icon-bookmark": "^1.4.0",
38+
"@internetarchive/icon-dl": "^1.4.0",
39+
"@internetarchive/icon-edit-pencil": "^1.4.1",
40+
"@internetarchive/icon-magnify-minus": "^1.4.0",
41+
"@internetarchive/icon-magnify-plus": "^1.4.0",
42+
"@internetarchive/icon-search": "^1.4.0",
43+
"@internetarchive/icon-toc": "^1.4.0",
44+
"@internetarchive/icon-visual-adjustment": "^1.4.0",
4545
"@internetarchive/modal-manager": "^0.2.12",
4646
"@internetarchive/shared-resize-observer": "^0.2.0",
4747
"lit": "^2.5.0"

‎src/BookNavigator/bookmarks/bookmark-button.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ export default class BookmarkButton extends LitElement {
5656
const position = this.side || 'right';
5757
return html`
5858
<button title=${this.title} @click=${this.handleClick} class=${position}>
59-
<icon-bookmark state=${this.state}></icon-bookmark>
59+
<icon-bookmark state=${this.state} aria-hidden="true"></icon-bookmark>
6060
</button>
6161
`;
6262
}

‎src/BookNavigator/bookmarks/bookmark-edit.js‎

Lines changed: 39 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -64,12 +64,12 @@ export class IABookmarkEdit extends LitElement {
6464

6565
bookmarkColor(color) {
6666
return html`
67-
<li>
67+
<div class="color-option">
6868
<input type="radio" name="color" id="color_${color.id}" .value=${color.id} @change=${() => this.changeColorTo(color.id)} ?checked=${this.bookmark.color === color.id}>
69-
<label for="color_${color.id}">
70-
<icon-bookmark class=${color.className}></icon-bookmark>
69+
<label for="color_${color.id}" title=${color.className}>
70+
<icon-bookmark class=${color.className} aria-hidden="true"></icon-bookmark>
7171
</label>
72-
</li>
72+
</div>
7373
`;
7474
}
7575

@@ -87,18 +87,18 @@ export class IABookmarkEdit extends LitElement {
8787
${this.renderHeader ? IABookmarkEdit.headerSection : nothing}
8888
${this.showBookmark ? this.bookmarkTemplate : nothing}
8989
<form action="" method="put" @submit=${this.emitSaveEvent}>
90+
<label for="note">Note <small>(optional)</small></label>
91+
<textarea rows="4" cols="80" name="note" id="note" @change=${this.updateNote}>${this.bookmark.note}</textarea>
9092
<fieldset>
91-
<label for="note">Note <small>(optional)</small></label>
92-
<textarea rows="4" cols="80" name="note" id="note" @change=${this.updateNote}>${this.bookmark.note}</textarea>
93-
<label for="color">Bookmark color</label>
94-
<ul>
93+
<legend>Bookmark color</legend>
94+
<div class="color-options">
9595
${repeat(this.bookmarkColors, color => color.id, this.bookmarkColor.bind(this))}
96-
</ul>
97-
<div class="actions">
98-
<button type="button" class="ia-button cancel" @click=${this.emitDeleteEvent}>Delete</button>
99-
<input class="ia-button" type="submit" value="Save">
10096
</div>
10197
</fieldset>
98+
<div class="actions">
99+
<button type="button" class="ia-button cancel" @click=${this.emitDeleteEvent}>Delete</button>
100+
<input class="ia-button" type="submit" value="Save">
101+
</div>
102102
</form>
103103
`;
104104
}
@@ -128,11 +128,11 @@ export class IABookmarkEdit extends LitElement {
128128
}
129129
130130
fieldset {
131-
padding: 2rem 0 0 0;
131+
padding: 0;
132132
border: none;
133133
}
134134
135-
label {
135+
label, legend {
136136
display: block;
137137
font-weight: bold;
138138
}
@@ -152,21 +152,24 @@ export class IABookmarkEdit extends LitElement {
152152
resize: vertical;
153153
}
154154
155-
ul {
156-
display: grid;
157-
grid-template-columns: repeat(3, auto);
158-
grid-gap: 0 2rem;
159-
justify-content: start;
160-
padding: 1rem 0 0 0;
161-
margin: 0 0 2rem 0;
162-
list-style: none;
155+
.color-options {
156+
display: flex;
157+
gap: 10px;
158+
}
159+
160+
.color-option {
161+
position: relative;
163162
}
164163
165-
li input {
166-
display: none;
164+
.color-option input {
165+
position: absolute;
166+
opacity: 0;
167+
width: 0;
168+
height: 0;
169+
pointer-events: none;
167170
}
168171
169-
li label {
172+
.color-option label {
170173
display: block;
171174
min-width: 50px;
172175
padding-top: .4rem;
@@ -176,10 +179,19 @@ export class IABookmarkEdit extends LitElement {
176179
cursor: pointer;
177180
}
178181
179-
li input:checked + label {
182+
.color-option input:checked + label {
180183
border-color: var(--primaryTextColor);
181184
}
182185
186+
.color-option input:focus + label {
187+
outline: 2px solid currentColor;
188+
outline-offset: 2px;
189+
}
190+
191+
.color-option input:focus:not(:focus-visible) + label {
192+
outline: none;
193+
}
194+
183195
input[type="submit"] {
184196
background: var(--primaryCTAFill);
185197
border-color: var(--primaryCTABorder);
@@ -202,6 +214,7 @@ export class IABookmarkEdit extends LitElement {
202214
}
203215
204216
.actions {
217+
margin-top: 20px;
205218
display: grid;
206219
grid-template-columns: auto auto;
207220
grid-gap: 0 1rem;

‎src/BookNavigator/bookmarks/bookmarks-list.js‎

Lines changed: 45 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -99,24 +99,23 @@ export class IABookmarksList extends LitElement {
9999
const { className } = this.bookmarkColorInfo(bookmark.color);
100100
const activeClass = bookmark.id === this.activeBookmarkID ? 'active' : '';
101101
return html`
102-
<li
103-
@click=${() => this.emitSelectedEvent(bookmark)}
104-
tabindex="0"
105-
data-pageIndex=${bookmark.id}
106-
>
102+
<li data-pageIndex=${bookmark.id}>
107103
<div class="separator"></div>
108-
<div class="content ${activeClass}">
109-
<button
110-
class="edit"
111-
@click=${e => this.editBookmark(e, bookmark)}
112-
title="Edit this bookmark"
113-
>
114-
<ia-icon-edit-pencil></ia-icon-edit-pencil>
115-
</button>
116-
<h4>
117-
<icon-bookmark class=${className}></icon-bookmark>
118-
<span> Page ${bookmark.page}</span>
119-
</h4>
104+
<div class="bookmark-card ${activeClass}">
105+
<div class="bookmark-header" @click=${() => this.emitSelectedEvent(bookmark)}>
106+
<button>
107+
<icon-bookmark class=${className} aria-label="${className} bookmark"></icon-bookmark>
108+
<span> Page ${bookmark.page}</span>
109+
</button>
110+
<button
111+
class="edit"
112+
@click=${e => this.editBookmark(e, bookmark)}
113+
title="Edit this bookmark"
114+
aria-expanded=${editMode ? 'true' : 'false'}
115+
>
116+
<ia-icon-edit-pencil aria-hidden="true"></ia-icon-edit-pencil>
117+
</button>
118+
</div>
120119
${!editMode && bookmark.note ? html`<p>${bookmark.note}</p>` : nothing}
121120
${editMode ? this.editBookmarkComponent : nothing}
122121
</div>
@@ -208,19 +207,24 @@ export class IABookmarksList extends LitElement {
208207
font-style: italic;
209208
}
210209
211-
h4 {
210+
.bookmark-header {
211+
display: flex;
212+
align-items: center;
212213
margin: 0;
213214
font-size: 1.4rem;
215+
font-weight: bold;
214216
}
215-
h4 * {
216-
display: inline-block;
217-
}
218-
h4 icon-bookmark {
219-
vertical-align: bottom;
217+
218+
.bookmark-header > button:first-child {
219+
flex: 1;
220+
display: flex;
221+
align-items: center;
222+
gap: 4px;
223+
padding: 4px;
220224
}
221-
h4 span {
222-
vertical-align: top;
223-
padding-top: 1%;
225+
226+
ia-icon-edit-pencil {
227+
pointer-events: none;
224228
}
225229
226230
p {
@@ -243,38 +247,34 @@ export class IABookmarksList extends LitElement {
243247
display: none;
244248
}
245249
li {
246-
cursor: pointer;
247-
outline: none;
248250
position: relative;
249251
}
250-
li .content {
251-
padding: 2px 0 4px 2px;
252+
253+
li .bookmark-card {
252254
border: var(--activeBorderWidth) solid transparent;
253-
padding: .2rem 0 .4rem .2rem;
255+
border-radius: 4px;
254256
}
255-
li .content.active {
257+
258+
li .bookmark-card.active {
256259
border: var(--activeBorderWidth) solid #538bc5;
257260
}
258-
li button.edit {
259-
padding: 5px 2px 0 0;
261+
262+
.bookmark-header button {
260263
background: transparent;
261264
cursor: pointer;
262-
height: 40px;
263-
width: 40px;
264-
position: absolute;
265-
right: 2px;
266-
top: 2px;
267-
text-align: right;
268265
-webkit-appearance: none;
269266
appearance: none;
270-
outline: none;
271267
box-sizing: border-box;
272268
border: none;
269+
padding: 0;
270+
text-align: left;
273271
}
274-
li button.edit > * {
275-
display: block;
276-
height: 100%;
277-
width: 100%;
272+
273+
li button.edit {
274+
height: 34px;
275+
width: 34px;
276+
flex-shrink: 0;
277+
text-align: center;
278278
}
279279
`;
280280

‎src/BookNavigator/bookmarks/ia-bookmarks.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,7 @@ class IABookmarks extends LitElement {
109109

110110
this.bookmarkColors = [{
111111
id: 0,
112+
// FIXME: This is also used as the aria-label
112113
className: 'red',
113114
}, {
114115
id: 1,
@@ -500,7 +501,6 @@ class IABookmarks extends LitElement {
500501
return html`
501502
<button
502503
class="ia-button primary"
503-
tabindex="-1"
504504
?disabled=${this.shouldEnableAddBookmarkButton}
505505
@click=${this.addBookmark}>
506506
Add bookmark

‎src/BookNavigator/search/search-results.js‎

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import checkmarkIcon from '../assets/icon_checkmark.js';
66
import closeIcon from '../assets/icon_close.js';
77
import buttonCSS from '../assets/button-base.js';
88
import { ifDefined } from 'lit/directives/if-defined.js';
9+
import { sharedStyles } from '../sharedStyles.js';
910
/** @typedef {import('@/src/plugins/search/plugin.search.js').SearchInsideMatch} SearchInsideMatch */
1011

1112
export class IABookSearchResults extends LitElement {
@@ -376,20 +377,8 @@ export class IABookSearchResults extends LitElement {
376377
height: 40px;
377378
margin: 0 auto;
378379
}
379-
380-
.sr-only {
381-
position: absolute !important;
382-
width: 1px !important;
383-
height: 1px !important;
384-
padding: 0 !important;
385-
margin: -1px !important;
386-
overflow: hidden !important;
387-
clip: rect(0 0 0 0) !important;
388-
white-space: nowrap !important;
389-
border: 0 !important;
390-
}
391380
`;
392-
return [buttonCSS, mainCSS];
381+
return [sharedStyles, buttonCSS, mainCSS];
393382
}
394383
}
395384
customElements.define('ia-book-search-results', IABookSearchResults);

‎src/BookNavigator/sharedStyles.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { css } from "lit";
2+
3+
export const sharedStyles = css`
4+
.sr-only {
5+
position: absolute !important;
6+
width: 1px !important;
7+
height: 1px !important;
8+
padding: 0 !important;
9+
margin: -1px !important;
10+
overflow: hidden !important;
11+
clip: rect(0 0 0 0) !important;
12+
white-space: nowrap !important;
13+
border: 0 !important;
14+
}
15+
`;

‎src/BookNavigator/visual-adjustments/visual-adjustments.js‎

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { css, html, LitElement, nothing } from "lit";
22
import { classMap } from 'lit/directives/class-map.js';
33
import { repeat } from "lit/directives/repeat.js";
4+
import { sharedStyles } from '../sharedStyles.js';
45
import "@internetarchive/icon-magnify-minus/icon-magnify-minus.js";
56
import "@internetarchive/icon-magnify-plus/icon-magnify-plus.js";
67

@@ -184,7 +185,7 @@ export class IABookVisualAdjustments extends LitElement {
184185
}
185186

186187
static get styles() {
187-
return css`
188+
const main = css`
188189
:host {
189190
display: block;
190191
height: 100%;
@@ -280,19 +281,8 @@ export class IABookVisualAdjustments extends LitElement {
280281
button:hover {
281282
background-color: rgba(255, 255, 255, 0.1);
282283
}
283-
284-
.sr-only {
285-
position: absolute !important;
286-
width: 1px !important;
287-
height: 1px !important;
288-
padding: 0 !important;
289-
margin: -1px !important;
290-
overflow: hidden !important;
291-
clip: rect(0 0 0 0) !important;
292-
white-space: nowrap !important;
293-
border: 0 !important;
294-
}
295-
`;
284+
`;
285+
return [sharedStyles, main];
296286
}
297287
}
298288
customElements.define('ia-book-visual-adjustments', IABookVisualAdjustments);

‎tests/jest/BookNavigator/bookmarks/bookmark-edit.test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ describe('<ia-bookmark-edit>', () => {
7474
const el = await fixture(container(bookmark));
7575

7676
setTimeout(() => (
77-
el.shadowRoot.querySelector('li input').dispatchEvent(new Event('change'))
77+
el.shadowRoot.querySelector('.color-option input').dispatchEvent(new Event('change'))
7878
));
7979
const response = await oneEvent(el, 'bookmarkColorChanged');
8080

0 commit comments

Comments
 (0)