Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bookmark all can be activated by spacebar #4770

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Bookmark all can be activated by spacebar #4770

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
15e446e
Bookmark all can be activated by spacebar
Mar 4, 2025
73753e8
Merge branch 'main' into 4760-bookmark-all-tab-order
rladdusaw Mar 5, 2025
a249082
Use enter key for bookmark all
Mar 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions app/javascript/orangelight/bookmark_all.es6
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,16 @@ export default class BookmarkAllManager {
this.prepopulate_value();
}
});
$('.bookmark_all').on('keydown', (e) => {
e.preventDefault();
if (e.which === 32 || e.which === 13) {
if (!$(e.target).find('input')[0].checked) {
this.bookmark_all();
} else {
this.unbookmark_all();
}
}
});
this.element.on('change', (c) => {
if (c.target.checked) {
this.bookmark_all();
Expand Down
2 changes: 1 addition & 1 deletion app/views/catalog/_bookmark_all.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="checkbox bookmark_all">
<div class="checkbox bookmark_all" tabindex='0'>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we use a button, rather than a div here? Then we could listen for a click event to catch either the space bar or the enter key. It would also get added to the tab order automatically, without having to specify tabindex.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I gave this a quick test, but it messed up the styling pretty badly. I could do it, but it might take a while to sort out the css.

I added the enter key to the event listener.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for looking into this! I think the button would be better long term (we wouldn't need to remember the tabindex if we refactor this code in the future, for example), if you can get the CSS sorted. Another benefit is that the button would be navigable by assistive technologies that allow you to navigate by form control (like NVDA).

<label for="bookmark_all_input">
<input type="checkbox" id="bookmark_all_input">
<span>Bookmark all</span>
Expand Down
153 changes: 153 additions & 0 deletions spec/javascript/orangelight/bookmark_all.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
import BookmarkAllManager from '../../../app/javascript/orangelight/bookmark_all.es6';
describe('BookmarkAllManager', () => {
beforeEach(() => {
document.body.innerHTML = `
<div id="content" class="col-12 col-md-8">
<div id="sortAndPerPage" class="clearfix">
<div class="search-widgets float-end">
<div class="checkbox bookmark_all" tabindex="0">
<label for="bookmark_all_input">
<input type="checkbox" id="bookmark_all_input">
<span>Bookmark all</span>
</label>
</div>
</div>
</div>
<h2 class="visually-hidden visually-hidden">Search Results</h2>
<div id="documents" class="documents-list">
<article data-document-id="99122304923506421" data-document-counter="1" itemscope="itemscope" itemtype="http://schema.org/Thing" class="blacklight-book document document-position-1">
<div class="row search-result-wrapper">
<div class="record-wrapper">
<header class="documentHeader">
<h3 class="index_title document-title-heading col">
<span class="document-counter">1. </span><a data-context-href="/catalog/99122304923506421/track?counter=1&amp;document_id=99122304923506421&amp;per_page=20&amp;search_id=111" data-context-method="post" data-turbo-prefetch="false" itemprop="name" dir="ltr" href="/catalog/99122304923506421">Ahmet Kutsi Tecer sempozyum bildirileri : Sıvas 24 - 27 Nisan 2018 / editör Teoman Karaca.</a></h3>
</header>
<ul class="document-metadata dl-horizontal dl-invert">
<li><ul><li><a class="search-name" data-original-title="Search: Ahmet Kutsi Tecer Sempozyumu (2018 : Sivas, Turkey)" href="/?f[author_s][]=Ahmet+Kutsi+Tecer+Sempozyumu+%282018+%3A+Sivas%2C+Turkey%29">Ahmet Kutsi Tecer Sempozyumu (2018 : Sivas, Turkey)</a> <a class="browse-name" data-original-title="Browse: Ahmet Kutsi Tecer Sempozyumu (2018 : Sivas, Turkey)" dir="ltr" href="/browse/names?q=Ahmet+Kutsi+Tecer+Sempozyumu+%282018+%3A+Sivas%2C+Turkey%29">[Browse]</a></li></ul></li>
<li><ul><li>Sıvas : Sıvas İl Kültür Turizm Müdürlüğü, [2019]</li></ul></li>
<li><ul><li><ul><li class="blacklight-format" dir="ltr"> <span class="icon icon-book" aria-hidden="true"></span> Book </li></ul></li></ul></li>
</ul>
</div>
<div class="thumbnail-wrapper">
<form class="bookmark-toggle" data-present="In Bookmarks" data-absent="Bookmark" data-inprogress="Saving..." action="/bookmarks/99127972072106421" accept-charset="UTF-8" method="post">
<input type="hidden" name="_method" value="put" autocomplete="off">
<div class="checkbox toggle-bookmark">
<label class="toggle-bookmark" data-checkboxsubmit-target="label">
<input type="checkbox" class="toggle-bookmark " data-checkboxsubmit-target="checkbox">
<span data-checkboxsubmit-target="span">Bookmark</span>
</label>
</div>
<input type="submit" name="commit" value="Bookmark" class="bookmark-add btn btn-outline-secondary" data-disable-with="Bookmark">
</form>
</div>
</div>
</article>
<article data-document-id="99127972072106421" data-document-counter="2" itemscope="itemscope" itemtype="http://schema.org/Thing" class="blacklight-book document document-position-2">
<div class="row search-result-wrapper">
<div class="record-wrapper">
<header class="documentHeader">
<h3 class="index_title document-title-heading col">
<span class="document-counter">2. </span><a data-context-href="/catalog/99127972072106421/track?counter=2&amp;document_id=99127972072106421&amp;per_page=20&amp;search_id=111" data-context-method="post" data-turbo-prefetch="false" itemprop="name" dir="ltr" href="/catalog/99127972072106421">Dancing Black, dancing White : rock 'n' roll, race, and youth culture of the 1950s and early 1960s / Julie Malnig.</a></h3>
</header>
<ul class="document-metadata dl-horizontal dl-invert">
<li><ul><li><a class="search-name" data-original-title="Search: Malnig, Julie" href="/?f[author_s][]=Malnig%2C+Julie">Malnig, Julie</a> <a class="browse-name" data-original-title="Browse: Malnig, Julie" dir="ltr" href="/browse/names?q=Malnig%2C+Julie">[Browse]</a></li></ul></li>
<li><ul><li>New York, NY : Oxford University Press, [2023]</li></ul></li>
<li><ul><li><ul><li class="blacklight-format" dir="ltr"> <span class="icon icon-book" aria-hidden="true"></span> Book </li></ul></li></ul></li>
</ul>
</div>
<div class="thumbnail-wrapper">
<form class="bookmark-toggle" data-present="In Bookmarks" data-absent="Bookmark" data-inprogress="Saving..." action="/bookmarks/99127972072106421" accept-charset="UTF-8" method="post">
<input type="hidden" name="_method" value="put" autocomplete="off">
<div class="checkbox toggle-bookmark">
<label class="toggle-bookmark" data-checkboxsubmit-target="label">
<input type="checkbox" class="toggle-bookmark " data-checkbox submit-target="checkbox">
<span data-checkboxsubmit-target="span">Bookmark</span>
</label>
</div>
<input type="submit" name="commit" value="Bookmark" class="bookmark-add btn btn-outline-secondary" data-disable-with="Bookmark">
</form>
</div>
</div>
</article>
<article data-document-id="99125476820706421" data-document-counter="3" itemscope="itemscope" itemtype="http://schema.org/Thing" class="blacklight-book document document-position-3">
<div class="row search-result-wrapper">
<div class="record-wrapper">
<header class="documentHeader">
<h3 class="index_title document-title-heading col">
<span class="document-counter">3. </span><a data-context-href="/catalog/99125476820706421/track?counter=3&amp;document_id=99125476820706421&amp;per_page=20&amp;search_id=111" data-context-method="post" data-turbo-prefetch="false" itemprop="name" dir="ltr" href="/catalog/99125476820706421">Black youth aspirations : imagined futures and transitions into adulthood / by Botshabelo Maja (Independent Scholar, Republic of South Africa).</a></h3>
</header>
<ul class="document-metadata dl-horizontal dl-invert">
<li><ul><li><a class="search-name" data-original-title="Search: Maja, Botshabelo" href="/?f[author_s][]=Maja%2C+Botshabelo">Maja, Botshabelo</a> <a class="browse-name" data-original-title="Browse: Maja, Botshabelo" dir="ltr" href="/browse/names?q=Maja%2C+Botshabelo">[Browse]</a></li></ul></li>
<li><ul><li><ul id="pub_created_display-list"><li class="blacklight-pub_created_display" dir="ltr">United Kingdom : Emerald Publishing Limited, 2022.</li><li class="blacklight-pub_created_display" dir="ltr">©2022</li></ul></li></ul></li>
<li><ul><li><ul><li class="blacklight-format" dir="ltr"> <span class="icon icon-book" aria-hidden="true"></span> Book </li></ul></li></ul></li>
</ul>
</div>
<div class="thumbnail-wrapper">
<form class="bookmark-toggle" data-present="In Bookmarks" data-absent="Bookmark" data-inprogress="Saving..." action="/bookmarks/99125476820706421" accept-charset="UTF-8" method="post">
<input type="hidden" name="_method" value="put" autocomplete="off">
<div class="checkbox toggle-bookmark">
<label class="toggle-bookmark" data-checkboxsubmit-target="label">
<input type="checkbox" class="toggle-bookmark " data-checkboxsubmit-target="checkbox">
<span data-checkboxsubmit-target="span">Bookmark</span>
</label>
</div>
<input type="submit" name="commit" value="Bookmark" class="bookmark-add btn btn-outline-secondary" data-disable-with="Bookmark">
</form>
</div>
</div>
</article>
</div>
</div>`;
new BookmarkAllManager();
});
describe('Use keyboard on bookmark all button', () => {
it('Selects all the bookmark checkboxes using space', () => {
const bookmark_all_div = document.querySelector('.bookmark_all');
const press_space = new KeyboardEvent('keydown', {
key: ' ',
code: 'Space',
which: 32,
keyCode: 32,
});
expect(bookmark_all_input.checked).toBe(false);
let bookmark_checkboxes = document.querySelectorAll(
'input.toggle-bookmark:not(:checked)'
);
expect(bookmark_checkboxes.length).toBe(3);
bookmark_all_div.dispatchEvent(press_space);
bookmark_checkboxes = document.querySelectorAll(
'input.toggle-bookmark:checked'
);
expect(bookmark_checkboxes.length).toBe(3);
bookmark_all_div.dispatchEvent(press_space);
bookmark_checkboxes = document.querySelectorAll(
'input.toggle-bookmark:not(:checked)'
);
expect(bookmark_checkboxes.length).toBe(3);
});
it('Selects all the bookmark checkboxes using enter', () => {
const bookmark_all_div = document.querySelector('.bookmark_all');
const press_enter = new KeyboardEvent('keydown', {
key: 'Enter',
code: 'Enter',
which: 13,
keyCode: 13,
});
expect(bookmark_all_input.checked).toBe(false);
let bookmark_checkboxes = document.querySelectorAll(
'input.toggle-bookmark:not(:checked)'
);
expect(bookmark_checkboxes.length).toBe(3);
bookmark_all_div.dispatchEvent(press_enter);
bookmark_checkboxes = document.querySelectorAll(
'input.toggle-bookmark:checked'
);
expect(bookmark_checkboxes.length).toBe(3);
bookmark_all_div.dispatchEvent(press_enter);
bookmark_checkboxes = document.querySelectorAll(
'input.toggle-bookmark:not(:checked)'
);
expect(bookmark_checkboxes.length).toBe(3);
});
});
});