Skip to content

Add translations to improve accessibility for account/list checkboxes #2982

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

Merged
demiankatz merged 23 commits into from
Sep 11, 2023
Merged

Add translations to improve accessibility for account/list checkboxes #2982

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
5022d66
add translations to improve accessibility for checkboxes in account a…
RLangeUni Jul 7, 2023
7c501d1
Merge branch 'dev' into pull-request-select-helper-texts
demiankatz Jul 8, 2023
56a8a70
change confounded / old transloations of select_page and select_page_…
RLangeUni Jul 14, 2023
866144d
use select_page for selecting all items on page (might be confusing?)
RLangeUni Jul 14, 2023
17a12f1
normalized languages
RLangeUni Jul 14, 2023
a585412
Update en.ini
demiankatz Jul 18, 2023
871e14a
Adjust language files.
demiankatz Jul 18, 2023
828ae1f
add missing language token
elsenhans Jul 19, 2023
3c809fb
undo changes for checkbox.phtml
elsenhans Jul 20, 2023
dc0bb1c
add non generic aria-label to checkbox
elsenhans Jul 20, 2023
8c1197b
Merge branch 'dev' into pull-request-select-helper-texts
demiankatz Jul 20, 2023
3bb4467
fix translations in history and list
elsenhans Jul 20, 2023
f433f7d
add aria-label to checkouts/history.phtml
elsenhans Jul 24, 2023
96d6c06
fix order in language files
elsenhans Jul 24, 2023
8b122bf
Merge branch 'dev' into pull-request-select-helper-texts
demiankatz Sep 1, 2023
ec40b0f
Merge branch 'dev' into pull-request-select-helper-texts
demiankatz Sep 5, 2023
faf62d6
feat: wrap cart checkbox below toolbar buttons.
crhallberg Sep 8, 2023
18e3f44
feat: add ul semantics to cart buttons.
crhallberg Sep 8, 2023
7147be0
feat: wrap checkbox on search toolbar.
crhallberg Sep 8, 2023
be2f815
feat: wrap checkbox and add ul in checkouts history.
crhallberg Sep 8, 2023
6aa8540
refactor: simplify cart menu dropdown syntax
crhallberg Sep 8, 2023
bbcb32f
Merge remote-tracking branch 'origin/dev' into pull-request-select-he…
demiankatz Sep 11, 2023
cbf363b
lessToSass
demiankatz Sep 11, 2023
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
8 changes: 8 additions & 0 deletions languages/de.ini
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1186,7 +1186,15 @@ See also = "Siehe auch"
see_all_ellipsis = "Alle anzeigen …"
Select this record = "Datensatz auswählen"
Select your carrier = "Wählen Sie Ihren Telefonanbieter aus"
select_all_on_page = "Alle Einträge der Seite auswählen"
select_item = "Titel für weitere Aktion auswählen"
select_item_checked_out_renew = "Titel zum Verlängern auswählen"
select_item_hold_cancel = "Titel auswählen, um Bestellung oder Vormerkung zu stornieren"
select_item_ill_request_cancel = "Titel auswählen, um Fernleihanfrage zu stornieren"
select_item_purge = "Titel zum Entfernen auswählen"
select_item_storage_retrieval_request_cancel = "Titel auswählen, um Magazinbestellung zu stornieren"
select_page = "Alles auswählen"
select_page_cart = "Alle Einträge der Zwischenablage auswählen"
select_pickup_location = "Abholort auswählen"
select_request_group = "Abholstelle auswählen"
Selected = "Ausgewählt"
Expand Down
8 changes: 8 additions & 0 deletions languages/en.ini
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1206,7 +1206,15 @@ See also = "See also"
see_all_ellipsis = "see all…"
Select this record = "Select this record"
Select your carrier = "Select your carrier"
select_all_on_page = "Select all entries on the page"
select_item = "Select item for further action"
select_item_checked_out_renew = "Select item for renewing"
select_item_hold_cancel = "Select item for canceling holds or recalls"
select_item_ill_request_cancel = "Select item for canceling interlibrary loan requests"
select_item_purge = "Select item for purging"
select_item_storage_retrieval_request_cancel = "Select item for canceling storage retrieval requests"
select_page = "Select Page"
select_page_cart = "Select all entries in the book bag"
select_pickup_location = "Select Pick Up Location"
select_request_group = "Select Request Group"
Selected = "Selected"
Expand Down
2 changes: 1 addition & 1 deletion themes/bootprint3/css/compiled.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion themes/bootstrap3/css/compiled.css
View file
Open in desktop

Large diffs are not rendered by default.

27 changes: 23 additions & 4 deletions themes/bootstrap3/less/bootstrap.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -266,15 +266,23 @@ footer {
}

/* ------ Cart ------ */
.cart-controls {
.cart-controls,
.cart-control-btns {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
align-items: center;
}
.cart-controls .checkbox {
padding-right: 1rem;
padding-bottom: 0.25rem;
.cart-controls > .checkbox {
margin-top: 0.5rem;
/* wrap below */
order: 1;
flex-basis: 100%;
}
.cart-control-btns {
list-style: none;
margin: 0;
padding: 0;
}
.cart-controls .toolbar-btn {
&:extend(.toolbar-btn);
Expand All @@ -283,6 +291,17 @@ footer {
margin: 0;
}

@media (min-width: 992px) {
.cart-controls > .checkbox {
margin-block: 0;
padding-inline-end: 1rem;
padding-bottom: 0.25rem;
/* place inline */
order: unset;
flex-basis: auto;
}
}

.nav .btn-bookbag-toggle { float: left; }
.nav .btn-bookbag-toggle a {
display: block;
Expand Down
28 changes: 25 additions & 3 deletions themes/bootstrap3/less/components/search.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,16 +95,38 @@ header .container.navbar { margin-bottom: 0; }
}
}

.record-nav,
.bulkActionButtons {
.record-nav {
.clearfix();
margin: 1rem 0;
padding: 0;
}
.bulk-checkbox,
.bulkActionButtons,
.action-toolbar {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
align-items: center;
}
.bulkActionButtons {
margin-block: 1rem;
}
.bulk-checkbox {
padding-inline-end: 1rem;
/* wrap below */
order: 1;
flex-basis: 100%;
}
.bulkActionButtons label { display: inline-block; }
.bulkActionButtons label input { margin-top: 2px; }

@media (min-width: 1200px) {
.bulk-checkbox {
/* place inline */
order: unset;
flex-basis: auto;
}
}

.action-toolbar {
display: inline-block;
margin: 0;
Expand Down
27 changes: 23 additions & 4 deletions themes/bootstrap3/scss/bootstrap.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -266,15 +266,23 @@ footer {
}

/* ------ Cart ------ */
.cart-controls {
.cart-controls,
.cart-control-btns {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
align-items: center;
}
.cart-controls .checkbox {
padding-right: 1rem;
padding-bottom: 0.25rem;
.cart-controls > .checkbox {
margin-top: 0.5rem;
/* wrap below */
order: 1;
flex-basis: 100%;
}
.cart-control-btns {
list-style: none;
margin: 0;
padding: 0;
}
.cart-controls .toolbar-btn {
@extend .toolbar-btn;
Expand All @@ -283,6 +291,17 @@ footer {
margin: 0;
}

@media (min-width: 992px) {
.cart-controls > .checkbox {
margin-block: 0;
padding-inline-end: 1rem;
padding-bottom: 0.25rem;
/* place inline */
order: unset;
flex-basis: auto;
}
}

.nav .btn-bookbag-toggle { float: left; }
.nav .btn-bookbag-toggle a {
display: block;
Expand Down
28 changes: 25 additions & 3 deletions themes/bootstrap3/scss/components/search.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,16 +95,38 @@ header .container.navbar { margin-bottom: 0; }
}
}

.record-nav,
.bulkActionButtons {
.record-nav {
@include clearfix();
margin: 1rem 0;
padding: 0;
}
.bulk-checkbox,
.bulkActionButtons,
.action-toolbar {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
align-items: center;
}
.bulkActionButtons {
margin-block: 1rem;
}
.bulk-checkbox {
padding-inline-end: 1rem;
/* wrap below */
order: 1;
flex-basis: 100%;
}
.bulkActionButtons label { display: inline-block; }
.bulkActionButtons label input { margin-top: 2px; }

@media (min-width: 1200px) {
.bulk-checkbox {
/* place inline */
order: unset;
flex-basis: auto;
}
}

.action-toolbar {
display: inline-block;
margin: 0;
Expand Down
98 changes: 54 additions & 44 deletions themes/bootstrap3/templates/cart/cart.phtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,54 +10,64 @@
<form class="form-inline" action="<?=$this->url('cart-processor')?>" method="post" name="cartForm" data-lightbox-onsubmit="cartFormHandler">
<input type="hidden" id="dropdown_value">
<?php if (!$this->cart()->isEmpty()): ?>
<div class="cart-controls clearfix">
<div class="checkbox pull-left flip">
<div class="cart-controls">
<div class="checkbox">
<label>
<input type="checkbox" name="selectAll" class="checkbox-select-all">
<?=$this->transEsc('select_page')?>
<?=$this->transEsc('select_page_cart')?>
</label>
</div>
<?php if ($this->userlist()->getMode() !== 'disabled'): ?>
<button type="submit" class="toolbar-btn" name="saveCart" title="<?=$this->transEscAttr('bookbag_save')?>" value="1">
<?=$this->icon('user-list-add', 'icon-link__icon') ?>
<span class="icon-link__label"><?=$this->transEsc('Save')?></span>
</button>
<?php endif; ?>
<button type="submit" class="toolbar-btn" name="email" title="<?=$this->transEscAttr('bookbag_email')?>" value="1">
<?=$this->icon('send-email', 'icon-link__icon') ?>
<span class="icon-link__label"><?=$this->transEsc('Email')?></span>
</button>
<?php $exportOptions = $this->export()->getActiveFormats('bulk'); ?>
<?php if (count($exportOptions) > 0): ?>
<button type="submit" class="toolbar-btn" name="export" title="<?=$this->transEscAttr('bookbag_export')?>" value="1">
<?=$this->icon('export', 'icon-link__icon') ?>
<span class="icon-link__label"><?=$this->transEsc('Export')?></span>
</button>
<?php endif; ?>
<button type="submit" class="toolbar-btn" name="print" title="<?=$this->transEscAttr('print_selected')?>" value="1">
<?=$this->icon('print', 'icon-link__icon') ?>
<span class="icon-link__label"><?=$this->transEsc('Print')?></span>
</button>
<div class="btn-group" id="cartDelete">
<button type="submit" name="delete" class="toolbar-btn dropdown-toggle" data-toggle="dropdown" id="cart-delete-label" value="1">
<?=$this->icon('cart-remove', 'icon-link__icon') ?>
<span class="icon-link__label"><?=$this->transEsc('Delete')?></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="cart-delete-label">
<li><a id="cart-confirm-delete" title="<?=$this->transEscAttr('confirm_delete')?>"><?=$this->transEsc('confirm_dialog_yes')?></a></li>
<li><a><?=$this->transEsc('confirm_dialog_no')?></a></li>
</ul>
</div>
<div class="btn-group">
<button type="submit" class="toolbar-btn dropdown-toggle" name="empty" data-toggle="dropdown" id="cart-empty-label" value="1">
<?=$this->icon('cart-empty', 'icon-link__icon') ?>
<span class="icon-link__label"><?=$this->transEsc('Empty Book Bag')?></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="cart-empty-label">
<li><a id="cart-confirm-empty" title="<?=$this->transEscAttr('bookbag_confirm_empty')?>"><?=$this->transEsc('confirm_dialog_yes')?></a></li>
<li><a id="cart-refuse-empty"><?=$this->transEsc('confirm_dialog_no')?></a></li>
</ul>
</div>
<ul class="cart-control-btns">
<?php if ($this->userlist()->getMode() !== 'disabled'): ?>
<li>
<button type="submit" class="toolbar-btn" name="saveCart" title="<?=$this->transEscAttr('bookbag_save')?>" value="1">
<?=$this->icon('user-list-add', 'icon-link__icon') ?>
<span class="icon-link__label"><?=$this->transEsc('Save')?></span>
</button>
</li>
<?php endif; ?>
<li>
<button type="submit" class="toolbar-btn" name="email" title="<?=$this->transEscAttr('bookbag_email')?>" value="1">
<?=$this->icon('send-email', 'icon-link__icon') ?>
<span class="icon-link__label"><?=$this->transEsc('Email')?></span>
</button>
</li>
<?php $exportOptions = $this->export()->getActiveFormats('bulk'); ?>
<?php if (count($exportOptions) > 0): ?>
<li>
<button type="submit" class="toolbar-btn" name="export" title="<?=$this->transEscAttr('bookbag_export')?>" value="1">
<?=$this->icon('export', 'icon-link__icon') ?>
<span class="icon-link__label"><?=$this->transEsc('Export')?></span>
</button>
</li>
<?php endif; ?>
<li>
<button type="submit" class="toolbar-btn" name="print" title="<?=$this->transEscAttr('print_selected')?>" value="1">
<?=$this->icon('print', 'icon-link__icon') ?>
<span class="icon-link__label"><?=$this->transEsc('Print')?></span>
</button>
</li>
<li class="btn-group" id="cartDelete">
<button type="submit" name="delete" class="toolbar-btn dropdown-toggle" data-toggle="dropdown" id="cart-delete-label" value="1">
<?=$this->icon('cart-remove', 'icon-link__icon') ?>
<span class="icon-link__label"><?=$this->transEsc('Delete')?></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="cart-delete-label">
<li><a id="cart-confirm-delete" title="<?=$this->transEscAttr('confirm_delete')?>"><?=$this->transEsc('confirm_dialog_yes')?></a></li>
<li><a><?=$this->transEsc('confirm_dialog_no')?></a></li>
</ul>
</li>
<li class="btn-group">
<button type="submit" class="toolbar-btn dropdown-toggle" name="empty" data-toggle="dropdown" id="cart-empty-label" value="1">
<?=$this->icon('cart-empty', 'icon-link__icon') ?>
<span class="icon-link__label"><?=$this->transEsc('Empty Book Bag')?></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="cart-empty-label">
<li><a id="cart-confirm-empty" title="<?=$this->transEscAttr('bookbag_confirm_empty')?>"><?=$this->transEsc('confirm_dialog_yes')?></a></li>
<li><a id="cart-refuse-empty"><?=$this->transEsc('confirm_dialog_no')?></a></li>
</ul>
</li>
</ul>
</div>
<?php endif; ?>
<?=$this->render('cart/contents.phtml')?>
Expand Down
55 changes: 30 additions & 25 deletions themes/bootstrap3/templates/checkouts/history.phtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,34 +42,39 @@
<form name="purge_history" method="post" action="<?=$this->url('checkouts-purgehistory')?>" id="purge_history" data-disable-on-submit>
<input type="hidden" id="submitType" name="purgeSelected" value="1">
<input type="hidden" name="csrf" value="<?=$this->escapeHtmlAttr($this->auth()->getManager()->getCsrfHash())?>">
<div class="toolbar">
<div class="checkbox">
<?php if ($purgeSelectedAllowed): ?>
<?php if ($purgeSelectedAllowed || $purgeAllAllowed): ?>
<div class="toolbar">
<div class="bulk-checkbox">
<label>
<input type="checkbox" name="selectAll" class="checkbox-select-all">
<?=$this->transEsc('select_page')?>
<?=$this->transEsc('select_all_on_page')?>
</label>
Copy link
Copy Markdown
Contributor

@crhallberg crhallberg Aug 31, 2023

Choose a reason for hiding this comment

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

It looks like the .checkbox on line 46 can be closed here instead of line... actually it may not be closed...

Copy link
Copy Markdown
Member

@demiankatz demiankatz Sep 1, 2023

Choose a reason for hiding this comment

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

The checkbox div is closed, but it is wrapped around not just the checkbox but also all of the buttons. This is consistent with the markup style in holds/list.phtml, myresearch/checkedout.phtml, myresearch/illrequests.phtml and myresearch/storageretrievalrequests.phtml as well. As a result, buttons do not wrap as a group, which is inconsistent with the desired behavior we're working on elsewhere. However, because these templates have comparatively few buttons, it is less likely to cause problems in these contexts. It is probably worth making our checkbox+button markup consistent everywhere, but I think fixing this immediately is less critical.

<div class="btn-group">
<input type="submit" id="purgeSelected" name="purgeSelected" value="<?=$this->transEscAttr('loan_history_purge_selected')?>" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-lightbox-ignore>
<ul class="dropdown-menu">
<li class="disabled"><span class="prompt-text"><?=$this->transEsc('loan_history_confirm_purge_selected')?></span></li>
<li><a href="#" id="confirm_purge_selected_yes"><?=$this->transEsc('confirm_dialog_yes')?></a></li>
<li><a href="#" class="confirm_purge_no"><?=$this->transEsc('confirm_dialog_no')?></a></li>
</ul>
</div>
<?php endif; ?>
<?php if ($purgeAllAllowed): ?>
<div class="btn-group">
<input type="submit" id="purgeAll" name="purgeAll" value="<?=$this->transEscAttr('loan_history_purge_all')?>" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-lightbox-ignore>
<ul class="dropdown-menu">
<li class="disabled"><span class="prompt-text"><?=$this->transEsc('loan_history_confirm_purge_all')?></span></li>
<li><a href="#" id="confirm_purge_all_yes"><?=$this->transEsc('confirm_dialog_yes')?></a></li>
<li><a href="#" class="confirm_purge_no"><?=$this->transEsc('confirm_dialog_no')?></a></li>
</ul>
</div>
<?php endif; ?>
</div>
<ul class="action-toolbar">
<?php if ($purgeSelectedAllowed): ?>
<li class="btn-group">
<input type="submit" id="purgeSelected" name="purgeSelected" value="<?=$this->transEscAttr('loan_history_purge_selected')?>" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-lightbox-ignore>
<ul class="dropdown-menu">
<li class="disabled"><span class="prompt-text"><?=$this->transEsc('loan_history_confirm_purge_selected')?></span></li>
<li><a href="#" id="confirm_purge_selected_yes"><?=$this->transEsc('confirm_dialog_yes')?></a></li>
<li><a href="#" class="confirm_purge_no"><?=$this->transEsc('confirm_dialog_no')?></a></li>
</ul>
</li>
<?php endif; ?>

<?php if ($purgeAllAllowed): ?>
<li class="btn-group">
<input type="submit" id="purgeAll" name="purgeAll" value="<?=$this->transEscAttr('loan_history_purge_all')?>" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-lightbox-ignore>
<ul class="dropdown-menu">
<li class="disabled"><span class="prompt-text"><?=$this->transEsc('loan_history_confirm_purge_all')?></span></li>
<li><a href="#" id="confirm_purge_all_yes"><?=$this->transEsc('confirm_dialog_yes')?></a></li>
<li><a href="#" class="confirm_purge_no"><?=$this->transEsc('confirm_dialog_no')?></a></li>
</ul>
</li>
<?php endif; ?>
</ul>
</div>
</div>
<?php endif; ?>
<?php endif; ?>

<ul class="record-list">
Expand All @@ -82,7 +87,7 @@
<?php if (isset($ilsDetails['row_id'])): ?>
<?php $safeId = preg_replace('/[^a-zA-Z0-9]/', '', $ilsDetails['row_id']); ?>
<label>
<input class="checkbox-select-item" type="checkbox" name="purgeSelectedIDs[]" value="<?=$this->escapeHtmlAttr($ilsDetails['row_id'])?>" id="checkbox_<?=$safeId?>">
<input class="checkbox-select-item" type="checkbox" name="purgeSelectedIDs[]" value="<?=$this->escapeHtmlAttr($ilsDetails['row_id'])?>" id="checkbox_<?=$safeId?>" aria-label="<?=$this->transEscAttr('select_item_purge')?>">
</label>
<?php else: ?>
<label> </label>
Expand Down
Loading