Improve accessibility for checkboxes #2874
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -6,7 +6,7 @@ | |
| <nav class="bulkActionButtons"> | ||
| <div class="bulk-checkbox"> | ||
| <input type="checkbox" name="selectAll" class="checkbox-select-all" id="myresearchCheckAll"> | ||
| <label for="myresearchCheckAll"><?=$this->transEsc('select_page')?>:</label> | ||
|
Member
There was a problem hiding this comment. Why are you removing the with_selected text? I think the purpose of this is to indicate that the buttons in this region only impact selected items. I admit that this may not be the most clear way to accomplish that clarification, but I'm not sure if completely removing it makes things better.
Contributor
Author
There was a problem hiding this comment. This part of the label ("| Selection:") is misleading because it refers to the following buttons/checkboxes. It does not refer to the checkbox where the label is. That's why this part of the caption should be removed from the label element.
Member
There was a problem hiding this comment. That makes sense, but should we just move it outside of the label tag rather than deleting it entirely?
Contributor
Author
There was a problem hiding this comment. Well, the label consisted of 2 parts:
Does that make sense for you @demiankatz ?
Member
There was a problem hiding this comment. The "with_selected" part is misleading when it's included as part of the label for the "select all" checkbox, but I think it is helpful to provide context for the buttons. I'm just suggesting you change:
to:
Also, I think "Select all entries of the page" seems very verbose for a short inline checkbox -- we chose "Select Page" to be as concise as possible. Maybe there's a middle ground that's more clear but also shorter. We can't use "Select All" because that might imply "all items in result set" and we need to be clear that it's only "all items on current page." But maybe "Select All on Page" would be a happier middle ground? Also note that significantly changing an existing translation string can be problematic, because it won't automatically trigger translations of all the other languages. If we really do want to significantly change this label, we might want to rename it as well to ensure that appropriate matching translations are created (e.g. select_all_on_page instead of select_page).
Contributor
There was a problem hiding this comment.
EDIT: DK helped me see that that "with_selected" is for the buttons and not the checkbox. It does need to stay but maybe wrapping the buttons in an element like a div would make the separation more clear for future development.
Member
There was a problem hiding this comment. @crhallberg, @sturkel89 and I just looked at some other examples of controls similar to these in different sites. It does seem like we can safely drop the "with_selected" part, since it doesn't really add much clarity. If we get rid of it in both places where it is used, we should also remove it from the language files -- you can do it automatically with I think the relationship between the select boxes and the buttons may be more clear if the buttons are disabled when no boxes are checked. That is probably out of scope for this PR, but it might be something we should consider as a follow-up. Some systems display a message after or below the buttons indicating how many items are selected (e.g. "You have selected X items."). That might be a useful addition. (Again, possibly a follow-up PR rather than part of this one). In situations where results are numbered, using those numbers for the select all label might be more clear and concise than the other options we have discussed -- e.g. "Select 1-20." However, not every listing in VuFind is numbered, so this idea may have limited applications. Maybe we should consider adding more numbers to help accommodate it. If we can't, though, I at least have some further suggestions for refining your proposed language strings, which I will propose above. What do you think, @elsenhans?
Contributor
Author
There was a problem hiding this comment. Thanks, @demiankatz I did remove "with_selected" from the language files. To disable the buttons if no checkbox is selected sounds good to me.
Member
There was a problem hiding this comment. Thanks for the language file update. I think you may have meant to tag @ckaz here.
Contributor
Author
There was a problem hiding this comment. @ckaz Do you have an opinion on this: |
||
| </div> | ||
| <ul class="action-toolbar"> | ||
| <li><button class="toolbar-btn" type="submit" name="email" value="1" title="<?=$this->transEscAttr('email_selected')?>"><?=$this->icon('send-email') ?> <?=$this->transEsc('Email') ?></button> | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -2,11 +2,11 @@ | |
| <?php if ($cart->isActive()): ?> | ||
| <?php $cartId = $this->source . '|' . $this->id; ?> | ||
| <span class="btn-bookbag-toggle" data-cart-id="<?=$this->escapeHtmlAttr($this->id)?>" data-cart-source="<?=$this->escapeHtmlAttr($this->source)?>"> | ||
| <a href="#" class="cart-add result-link icon-link hidden<?php if (!$cart->contains($cartId)): ?> correct<?php endif ?>" aria-describedby="<?=$cartId?>"> | ||
|
Member
There was a problem hiding this comment. We should Also note that this template can be rendered as part of the record view as well as in the search results. In the context of the record view, there will be no element with the ID of
Contributor
Author
There was a problem hiding this comment. @RLangeUni do you know about that problem in our environment?
Contributor
Author
There was a problem hiding this comment. Well, the examples I just checked have the ID of the record as
Member
There was a problem hiding this comment.
Contributor
Author
There was a problem hiding this comment. @RLangeUni do you know how we handle that? Do you have an idea how to solve this? There was a problem hiding this comment. Indeed in finc we are using an extra attribut in cart/contents. I added it in commit c42074dde3. There was a problem hiding this comment. But we could ignore the buttons / leave them out for a later PR and concentrate on the checkboxes only. There was a problem hiding this comment. As for now there is no unique-id on the detail record page and the aria-describedby within the cart button is useless, but it should do no harm? Eventually we must avoid duplicate ids (I think the case should not occur).
Contributor
Author
There was a problem hiding this comment. Maybe for this PR we can just move the
Member
There was a problem hiding this comment. I don't think that helps -- the issue is that aria-describedby needs to refer to an HTML element ID, but |
||
| <?=$this->icon('cart-add', 'icon-link__icon') ?> | ||
| <span class="icon-link__label"><?=$this->transEsc('Add to Book Bag') ?></span> | ||
| </a> | ||
| <a href="#" class="cart-remove result-link icon-link hidden<?php if ($cart->contains($cartId)): ?> correct<?php endif ?>" aria-describedby="<?=$cartId?>"> | ||
| <?=$this->icon('cart-remove', 'icon-link__icon') ?> | ||
| <span class="icon-link__label"><?=$this->transEsc('Remove from Book Bag') ?></span> | ||
| </a> | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,6 @@ | ||
| <?php $label = isset($this->context) ? 'select_item_' . $this->context : 'select_item'; ?> | ||
| <label class="record-checkbox hidden-print"> | ||
| <input class="checkbox-select-item" type="checkbox" name="ids[]" value="<?=$this->escapeHtmlAttr($this->id) ?>"<?php if (isset($this->formAttr)): ?> form="<?=$this->formAttr ?>"<?php endif; ?> aria-describedby="<?=$this->escapeHtmlAttr($this->id) ?>" aria-label="<?=$this->transEscAttr($label)?>"> | ||
|
demiankatz marked this conversation as resolved.
Outdated
|
||
| <span class="checkbox-icon"></span> | ||
| </label> | ||
| <input type="hidden" name="idsAll[]" value="<?=$this->escapeHtmlAttr($this->id) ?>"<?php if (isset($this->formAttr)): ?> form="<?=$this->formAttr ?>"<?php endif; ?>> | ||
Uh oh!
There was an error while loading. Please reload this page.