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

Update: Add missing aria attribution for tabs #78

Merged
merged 4 commits into from
Aug 1, 2022
Merged

Update: Add missing aria attribution for tabs #78

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c3a3bd7
Add missing aria attribution and keyboard controls for tabs
chris-steele Jul 1, 2022
d88704a
removed key event handlers
chris-steele Jul 8, 2022
7c78d3e
Update README.md
chris-steele Jul 18, 2022
df50e96
Update bower.json
chris-steele Jul 18, 2022
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
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ The attributes listed below are used in *course.json* to configure **Resources**
No known limitations.

----------------------------
**Version number:** 5.0.1 <a href="https://community.adaptlearning.org/" target="_blank"><img src="https://github.com/adaptlearning/documentation/blob/master/04_wiki_assets/plug-ins/images/adapt-logo-mrgn-lft.jpg" alt="adapt learning logo" align="right"></a>
**Version number:** 5.0.2 <a href="https://community.adaptlearning.org/" target="_blank"><img src="https://github.com/adaptlearning/documentation/blob/master/04_wiki_assets/plug-ins/images/adapt-logo-mrgn-lft.jpg" alt="adapt learning logo" align="right"></a>
**Framework versions:** 5.19.1+
**Author / maintainer:** Adapt Core Team with [contributors](https://github.com/adaptlearning/adapt-contrib-resources/graphs/contributors)
**Accessibility support:** WAI AA
Expand Down
2 changes: 1 addition & 1 deletion bower.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "adapt-contrib-resources",
"version": "5.0.1",
"version": "5.0.2",
"framework": ">=5.19.1",
"homepage": "https://github.com/adaptlearning/adapt-contrib-resources",
"bugs": "https://github.com/adaptlearning/adapt-contrib-resources/issues",
Expand Down
57 changes: 55 additions & 2 deletions js/ResourcesView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,12 @@ export default class ResourcesView extends Backbone.View {
initialize() {
this.listenTo(Adapt, 'remove', this.remove);
this.render();
this.addEventListeners();
}

remove() {
this.removeEventListeners();
super.remove();
}

events() {
Expand All @@ -18,6 +24,47 @@ export default class ResourcesView extends Backbone.View {
};
}

addEventListeners() {
this.removeEventListeners();
$(window).on('keyup', this.onKeyUp);
}

removeEventListeners() {
$(window).off('keyup', this.onKeyUp);
}

onKeyUp(event) {
if (event.which === 9) return; // tab key
if (!$(document.activeElement).is('.js-resources-filter-btn-click')) return;

const prevAll = $(document.activeElement).prevAll('.js-resources-filter-btn-click');
const nextAll = $(document.activeElement).nextAll('.js-resources-filter-btn-click');

if (this.$('[role="tablist"]').attr('aria-orientation') === 'vertical') {
switch (event.which) {
case 38: // ↑ up
event.preventDefault();
a11y.focus(prevAll.length > 0 ? prevAll.first() : nextAll.last());
break;
case 40: // ↓ down
event.preventDefault();
a11y.focus(nextAll.length > 0 ? nextAll.first() : prevAll.last());
break;
}
} else {
switch (event.which) {
case 37: // ← left
event.preventDefault();
a11y.focus(prevAll.length > 0 ? prevAll.first() : nextAll.last());
break;
case 39: // → right
event.preventDefault();
a11y.focus(nextAll.length > 0 ? nextAll.first() : prevAll.last());
break;
}
}
}

render() {
this.$el.html(Handlebars.templates.resources({
model: this.model.toJSON(),
Expand All @@ -34,11 +81,17 @@ export default class ResourcesView extends Backbone.View {
onFilterClicked(e) {
if (e && e.preventDefault) e.preventDefault();

const $resources = this.$('#resources');
const $clickedButton = this.$(e.currentTarget);
const clickedTabId = $clickedButton.attr('id');

this.$('.js-resources-filter-btn-click').removeClass('is-selected').attr('aria-selected', false);
this.$(e.currentTarget).attr('aria-selected', true);

$resources.attr('aria-labelledby', clickedTabId);
$clickedButton.attr('aria-selected', true);

let items;
const filter = $(e.currentTarget).addClass('is-selected').attr('data-filter');
const filter = $clickedButton.addClass('is-selected').attr('data-filter');
if (filter === 'all') {
items = this.$('.js-resources-item').removeClass('u-display-none');
} else {
Expand Down
63 changes: 34 additions & 29 deletions templates/resources.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,30 +2,31 @@
{{import_globals}}

<div class="resources__inner">
{{{a11y_aria_label _globals._extensions._resources.resources}}}

{{#resources_has_multiple_types resources}}
<div class="resources__filter has-{{resources_get_column_count resources}}-columns">
<div class="resources__filter-inner" role="tablist">

<button class="resources__filter-btn resources__show-all is-selected js-resources-filter-btn-click" data-filter="all" aria-label="{{model._filterAria.allAria}}" role="tab" aria-selected="true">
<div class="aria-label" aria-label="{{{ _globals._extensions._resources.resources}}}"></div>

<button id="resources__show-all" class="resources__filter-btn resources__show-all is-selected js-resources-filter-btn-click" data-filter="all" aria-label="{{model._filterAria.allAria}}" role="tab" aria-selected="true" aria-controls="resources">
{{{model._filterButtons.all}}}
</button>

{{#resources_has_type resources 'document'}}
<button class="resources__filter-btn resources__show-document js-resources-filter-btn-click" data-filter="document" aria-label="{{model._filterAria.documentAria}}" role="tab" aria-selected="false">
<button id="resources__document" class="resources__filter-btn resources__show-document js-resources-filter-btn-click" data-filter="document" aria-label="{{model._filterAria.documentAria}}" role="tab" aria-selected="false" aria-controls="resources">
{{{model._filterButtons.document}}}
</button>
{{/resources_has_type}}

{{#resources_has_type resources 'media'}}
<button class="resources__filter-btn resources__show-media js-resources-filter-btn-click" data-filter="media" aria-label="{{model._filterAria.mediaAria}}" role="tab" aria-selected="false">
<button id="resources__media" class="resources__filter-btn resources__show-media js-resources-filter-btn-click" data-filter="media" aria-label="{{model._filterAria.mediaAria}}" role="tab" aria-selected="false" aria-controls="resources">
{{{model._filterButtons.media}}}
</button>
{{/resources_has_type}}

{{#resources_has_type resources 'link'}}
<button class="resources__filter-btn resources__show-link js-resources-filter-btn-click" data-filter="link" aria-label="{{model._filterAria.linkAria}}" role="tab" aria-selected="false">
<button id="resources__link" class="resources__filter-btn resources__show-link js-resources-filter-btn-click" data-filter="link" aria-label="{{model._filterAria.linkAria}}" role="tab" aria-selected="false" aria-controls="resources">
{{{model._filterButtons.link}}}
</button>
{{/resources_has_type}}
Expand All @@ -34,39 +35,43 @@
</div>
{{/resources_has_multiple_types}}

<div class="resources__item-container" role="list">
<div id="resources" class="resources__item-container" role="tabpanel" aria-labelledby="resources__show-all">

<div role="list">

{{#each resources}}
<div class="resources__item drawer__item is-{{_type}} js-resources-item" role="listitem">
{{#each resources}}
<div class="resources__item drawer__item is-{{_type}} js-resources-item" role="listitem">

<a href="{{_link}}" class="resources__item-btn drawer__item-btn js-resources-item-btn-click"
data-type="{{_type}}"
{{#resources_force_download this}}
download="{{filename}}"
{{/resources_force_download}}
target="_blank"
aria-label="{{{title}}}. {{lookup ../model._filterButtons _type}}.{{#if description}} {{{description}}}.{{/if}}">
<a href="{{_link}}" class="resources__item-btn drawer__item-btn js-resources-item-btn-click"
data-type="{{_type}}"
{{#resources_force_download this}}
download="{{filename}}"
{{/resources_force_download}}
target="_blank"
aria-label="{{{title}}}. {{lookup ../model._filterButtons _type}}.{{#if description}} {{{description}}}.{{/if}}">

{{#if title}}
<div class="resources__item-title drawer__item-title">
<div class="resources__item-title-inner drawer__item-title-inner">
{{{compile title}}}
{{#if title}}
<div class="resources__item-title drawer__item-title">
<div class="resources__item-title-inner drawer__item-title-inner">
{{{compile title}}}
</div>
</div>
</div>
{{/if}}
{{/if}}

{{#if description}}
<div class="resources__item-body drawer__item-body">
<div class="resources__item-body-inner drawer__item-body-inner">
{{{compile description}}}
{{#if description}}
<div class="resources__item-body drawer__item-body">
<div class="resources__item-body-inner drawer__item-body-inner">
{{{compile description}}}
</div>
</div>
</div>
{{/if}}
{{/if}}

</a>

</a>
</div>
{{/each}}

</div>
{{/each}}

</div>

Expand Down