Skip to content

[Fix] Added key accessibility for most LFD features #416

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

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

[Fix] Added key accessibility for most LFD features #416

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0563b0a
fixed key access
YaroslavOvdii Aug 13, 2020
abaf7de
added new utils function to manage event keydown
YaroslavOvdii Aug 17, 2020
d9aefc5
changed keydown handler
YaroslavOvdii Aug 17, 2020
7f174b3
Merge branch 'master' into new-keyaccess-fix
YaroslavOvdii Sep 11, 2020
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
50 changes: 25 additions & 25 deletions js/build.templates.js
View file
Open in desktop

Large diffs are not rendered by default.

13 changes: 7 additions & 6 deletions js/layout-javascript/agenda-code.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -236,6 +236,7 @@ DynamicList.prototype.attachObservers = function() {

_this.$container.find('.hidden-filter-controls').addClass('active');
_this.$container.find('.list-search-cancel').addClass('active');
_this.$container.find('[data-filter-group]').show();
$el.addClass('active');

_this.toggleListView();
Expand Down Expand Up @@ -449,14 +450,14 @@ DynamicList.prototype.attachObservers = function() {
: 'bookmarks_hide'
});
})
.on('click', '.toggle-agenda, .toggle-bookmarks', function(event) {
e.stopPropagation();

.on('click keydown', '.toggle-agenda, .toggle-bookmarks', function(event) {
if (!_this.Utils.Event.isExecute(event)) {
return;
}

var $toggle = _this.$container.find(e.handleObj.selector);
event.stopPropagation();

var $toggle = _this.$container.find(event.handleObj.selector);

$toggle.toggleClass('mixitup-control-active');
_this.$container.find('.new-agenda-list-container').toggleClass('show-bookmarks');
Expand Down Expand Up @@ -1827,8 +1828,8 @@ DynamicList.prototype.setupBookmarkButton = function(options) {
name: Fliplet.Env.get('pageTitle') + '/' + title,
likeLabel: '<span class="fa fa-bookmark-o"></span>',
likedLabel: '<span class="fa fa-bookmark"></span>',
likeWrapper: '<div class="bookmark-wrapper btn-bookmark"></div>',
likedWrapper: '<div class="bookmark-wrapper btn-bookmarked"></div>',
likeWrapper: '<div class="bookmark-wrapper btn-bookmark focus-outline" tabindex="0"></div>',
likedWrapper: '<div class="bookmark-wrapper btn-bookmarked focus-outline" tabindex="0"></div>',
addType: 'prepend',
getAllCounts: false,
liked: record.bookmarked,
Expand Down
14 changes: 9 additions & 5 deletions js/layout-javascript/news-feed-code.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -221,6 +221,8 @@ DynamicList.prototype.attachObservers = function() {
return;
}

_this.$container.find('.news-feed-list-wrapper').hide();
Copy link
Contributor

Choose a reason for hiding this comment

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

This looks like the main the list being toggled on and off. Why?

And when the list is shown again, does it restore its scroll position? e.g. if the list was previously scrolled to 30% down the list, does it restore to the same point?


var entryId = $(this).data('entry-id');
var entryTitle = $(this).find('.news-feed-item-title').text().trim();
var beforeOpen = Promise.resolve();
Expand Down Expand Up @@ -269,6 +271,8 @@ DynamicList.prototype.attachObservers = function() {
return;
}

_this.$container.find('.news-feed-list-wrapper').show();

var result;

if ($(this).hasClass('go-previous-screen')) {
Expand Down Expand Up @@ -326,7 +330,7 @@ DynamicList.prototype.attachObservers = function() {

$parentElement.find('.hidden-filter-controls').addClass('active');
$parentElement.find('.list-search-cancel').addClass('active');
$parentElement.find('[data-filter-group]').prop('hidden', null);
$parentElement.find('[data-filter-group]').show();
$elementClicked.addClass('active');

_this.calculateFiltersHeight($parentElement);
Expand Down Expand Up @@ -1849,8 +1853,8 @@ DynamicList.prototype.setupLikeButton = function(options) {
name: Fliplet.Env.get('pageTitle') + '/' + title,
likeLabel: '<span class="count">{{#if count}}{{count}}{{/if}}</span><i class="fa fa-heart-o fa-lg"></i>',
likedLabel: '<span class="count">{{#if count}}{{count}}{{/if}}</span><i class="fa fa-heart fa-lg animated bounceIn"></i>',
likeWrapper: '<div class="news-feed-like-wrapper btn-like"></div>',
likedWrapper: '<div class="news-feed-like-wrapper btn-liked"></div>',
likeWrapper: '<div class="news-feed-like-wrapper btn-like focus-outline" tabindex="0"></div>',
likedWrapper: '<div class="news-feed-like-wrapper btn-liked focus-outline" tabindex="0"></div>',
addType: 'html',
liked: record.liked,
count: record.likeCount
Expand Down Expand Up @@ -2032,8 +2036,8 @@ DynamicList.prototype.setupBookmarkButton = function(options) {
name: Fliplet.Env.get('pageTitle') + '/' + title,
likeLabel: '<i class="fa fa-bookmark-o fa-lg"></i>',
likedLabel: '<i class="fa fa-bookmark fa-lg animated fadeIn"></i>',
likeWrapper: '<div class="news-feed-bookmark-wrapper btn-bookmark"></div>',
likedWrapper: '<div class="news-feed-bookmark-wrapper btn-bookmarked"></div>',
likeWrapper: '<div class="news-feed-bookmark-wrapper btn-bookmark focus-outline" tabindex="0"></div>',
likedWrapper: '<div class="news-feed-bookmark-wrapper btn-bookmarked focus-outline" tabindex="0"></div>',
addType: 'html',
getAllCounts: false,
liked: record.bookmarked
Expand Down
14 changes: 9 additions & 5 deletions js/layout-javascript/simple-list-code.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -194,6 +194,8 @@ DynamicList.prototype.attachObservers = function() {
return;
}

_this.$container.find('.simple-list-wrapper').hide();

if ($(event.target).hasClass('simple-list-social-holder') || $(event.target).parents('.simple-list-social-holder').length) {
return;
}
Expand Down Expand Up @@ -244,6 +246,8 @@ DynamicList.prototype.attachObservers = function() {
return;
}

_this.$container.find('.simple-list-wrapper').show();

var result;

if ($(this).hasClass('go-previous-screen')) {
Expand Down Expand Up @@ -302,7 +306,7 @@ DynamicList.prototype.attachObservers = function() {
$parentElement.find('.hidden-filter-controls').addClass('active');
$parentElement.find('.list-search-cancel').addClass('active');
$elementClicked.addClass('active');
$parentElement.find('[data-filter-group]').prop('hidden', null);
$parentElement.find('[data-filter-group]').show();

_this.calculateFiltersHeight($parentElement);

Expand Down Expand Up @@ -1618,8 +1622,8 @@ DynamicList.prototype.setupLikeButton = function(options) {
name: Fliplet.Env.get('pageTitle') + '/' + title,
likeLabel: '<span class="count">{{#if count}}{{count}}{{/if}}</span><i class="fa fa-heart-o fa-lg"></i>',
likedLabel: '<span class="count">{{#if count}}{{count}}{{/if}}</span><i class="fa fa-heart fa-lg animated bounceIn"></i>',
likeWrapper: '<div class="simple-list-like-wrapper btn-like"></div>',
likedWrapper: '<div class="simple-list-like-wrapper btn-liked"></div>',
likeWrapper: '<div class="simple-list-like-wrapper btn-like focus-outline" tabindex="0"></div>',
likedWrapper: '<div class="simple-list-like-wrapper btn-liked focus-outline" tabindex="0"></div>',
addType: 'html',
liked: record.liked,
count: record.likeCount
Expand Down Expand Up @@ -1800,8 +1804,8 @@ DynamicList.prototype.setupBookmarkButton = function(options) {
name: Fliplet.Env.get('pageTitle') + '/' + title,
likeLabel: '<i class="fa fa-bookmark-o fa-lg"></i>',
likedLabel: '<i class="fa fa-bookmark fa-lg animated fadeIn"></i>',
likeWrapper: '<div class="simple-list-bookmark-wrapper btn-bookmark"></div>',
likedWrapper: '<div class="simple-list-bookmark-wrapper btn-bookmarked"></div>',
likeWrapper: '<div class="simple-list-bookmark-wrapper btn-bookmark focus-outline" tabindex="0"></div>',
likedWrapper: '<div class="simple-list-bookmark-wrapper btn-bookmarked focus-outline" tabindex="0"></div>',
addType: 'html',
getAllCounts: false,
liked: record.bookmarked
Expand Down
10 changes: 7 additions & 3 deletions js/layout-javascript/small-card-code.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -247,6 +247,8 @@ DynamicList.prototype.attachObservers = function() {
return;
}

_this.$container.find('.small-card-list-wrapper').hide();

var entryId = $(this).data('entry-id');
var entryTitle = $(this).find('.small-card-list-name').text().trim();
var beforeOpen = Promise.resolve();
Expand Down Expand Up @@ -302,6 +304,8 @@ DynamicList.prototype.attachObservers = function() {
return;
}

_this.$container.find('.small-card-list-wrapper').show();

var result;

if ($(this).hasClass('go-previous-screen')) {
Expand Down Expand Up @@ -373,7 +377,7 @@ DynamicList.prototype.attachObservers = function() {
$parentElement.find('.hidden-filter-controls').addClass('active');
$parentElement.find('.list-search-cancel').addClass('active');
$elementClicked.addClass('active');
$parentElement.find('[data-filter-group]').prop('hidden', null);
$parentElement.find('[data-filter-group]').show();

_this.calculateFiltersHeight($parentElement);

Expand Down Expand Up @@ -1471,8 +1475,8 @@ DynamicList.prototype.setupBookmarkButton = function(options) {
name: Fliplet.Env.get('pageTitle') + '/' + title,
likeLabel: '<i class="fa fa-bookmark-o"></i>',
likedLabel: '<i class="fa fa-bookmark animated fadeIn"></i>',
likeWrapper: '<div class="small-card-bookmark-wrapper btn-bookmark"></div>',
likedWrapper: '<div class="small-card-bookmark-wrapper btn-bookmarked"></div>',
likeWrapper: '<div class="small-card-bookmark-wrapper btn-bookmark focus-outline" tabindex="0"></div>',
likedWrapper: '<div class="small-card-bookmark-wrapper btn-bookmarked focus-outline" tabindex="0"></div>',
addType: 'html',
getAllCounts: false,
liked: record.bookmarked
Expand Down
4 changes: 4 additions & 0 deletions js/layout-javascript/small-h-card-code.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,8 @@ DynamicList.prototype.attachObservers = function() {
return;
}

_this.$container.find('.small-h-card-list-wrapper').hide();

var _that = $(this);
var entryId = $(this).data('entry-id');
var entryTitle = $(this).find('.small-h-card-list-item-text').text().trim();
Expand Down Expand Up @@ -160,6 +162,8 @@ DynamicList.prototype.attachObservers = function() {
return;
}

_this.$container.find('.small-h-card-list-wrapper').show();

var result;

if ($(this).hasClass('go-previous-screen')) {
Expand Down
16 changes: 8 additions & 8 deletions templates/build/agenda-base.build.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,22 +35,22 @@
\{{#if searchEnabled}}
<div class="search-holder">
<i class="fa fa-search"></i>
<input type="search" name="search-feed" class="form-control search-feed" placeholder="Search..." required tabindex="0">
<input type="search" name="search-feed" class="form-control search-feed focus-outline" placeholder="Search..." required tabindex="0">
<div class="btn btn-default search-btn">Search</div>
<div class="btn btn-default search-btn searching-btn"><i class="fa fa-spinner fa-pulse fa-fw"></i></div>
</div>
\{{/if}}
\{{#ifCond filtersEnabled '||' bookmarksEnabled}}
<div class="list-search-icon">
\{{#ifCond bookmarksEnabled '&&' hasTopBar}}
<div class="toggle-bookmarks" data-mixitup-control="\{{id}}" data-toggle=".bookmarked" tabindex="0">
<div class="toggle-bookmarks focus-outline" data-mixitup-control="\{{id}}" data-toggle=".bookmarked" tabindex="0">
<span class="fa fa-bookmark-o"></span>
<span class="fa fa-bookmark"></span>
</div>
\{{/ifCond}}
<div class="list-search-cancel" tabindex="0"><span class="fa fa-times"></span></div>
<div class="list-search-cancel focus-outline" tabindex="0"><span class="fa fa-times"></span></div>
\{{#if filtersEnabled}}
<i class="fa fa-sliders" tabindex="0"></i>
<i class="fa fa-sliders focus-outline" tabindex="0"></i>
\{{/if}}
</div>
\{{/ifCond}}
Expand Down Expand Up @@ -99,7 +99,7 @@
<div class="hidden-filter-controls-search">
<div class="search-query-holder">
<div class="search-query">
Searching for <span class="current-query-wrapper"><span class="current-query"></span><span class="clear-search"><i class="fa fa-times"></i></span></span>
Searching for <span class="current-query-wrapper"><span class="current-query"></span><span class="clear-search focus-outline" tabindex="0"><i class="fa fa-times"></i></span></span>
</div>
</div>
</div>
Expand Down Expand Up @@ -129,7 +129,7 @@
<div class="agenda-detail-overlay" id="agenda-detail-overlay-\{{id}}">
<div class="agenda-detail-overlay-wrapper">
<div class="agenda-detail-overlay-panel">
<div class="agenda-detail-overlay-close \{{#if previousScreen}}go-previous-screen\{{/if}}" tabindex="0">
<div class="agenda-detail-overlay-close focus-outline \{{#if previousScreen}}go-previous-screen\{{/if}}" tabindex="0">
<img src="\{{closeIcon.black.url}}" alt="close icon" class="close-icon">
</div>
<div class="agenda-detail-overlay-content">
Expand All @@ -138,15 +138,15 @@
</div>
</div>
</div>
<div class="agenda-detail-overlay-close tablet \{{#if previousScreen}}go-previous-screen\{{/if}}" tabindex="0">
<div class="agenda-detail-overlay-close tablet focus-outline \{{#if previousScreen}}go-previous-screen\{{/if}}" tabindex="0">
<img src="\{{closeIcon.black.url}}" alt="close icon" class="close-icon">
</div>
</div>
<div class="agenda-detail-overlay-screen \{{#if previousScreen}}go-previous-screen\{{/if}}"></div>
</div>

\{{#if showAddEntry}}
<div class="dynamic-list-add-item">
<div class="dynamic-list-add-item focus-outline" tabindex="0">
<i class="fa fa-plus"></i>
</div>
\{{/if}}
20 changes: 10 additions & 10 deletions templates/build/agenda-cards-detail.build.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,27 +12,27 @@

<div class="agenda-item-bookmark \{{#if agendaButtonsEnabled}}more-buttons\{{/if}}">
<div class="agenda-item-bookmark-holder agenda-item-bookmark-holder-\{{id}}">
<div class="bookmark-wrapper btn-bookmark">
<div class="bookmark-wrapper btn-bookmark focus-outline" tabindex="0">
<i class="fa fa-bookmark-o"></i>Bookmark
</div>
<div class="bookmark-wrapper btn-bookmarked">
<div class="bookmark-wrapper btn-bookmarked focus-outline" tabindex="0">
<i class="fa fa-bookmark"></i>Bookmarked
</div>

<div class="agenda-item-add-agenda"></div>
</div>
\{{#if pollButton}}
<div class="go-to-poll session-button">
<div class="go-to-poll session-button focus-outline" tabindex="0">
<i class="fa fa-pie-chart"></i>Poll
</div>
\{{/if}}
\{{#if surveyButton}}
<div class="go-to-survey session-button">
<div class="go-to-survey session-button focus-outline" tabindex="0">
<i class="fa fa-pencil-square-o"></i>Survey
</div>
\{{/if}}
\{{#if questionsButton}}
<div class="go-to-questions session-button">
<div class="go-to-questions session-button focus-outline" tabindex="0">
<i class="fa fa-question-circle-o"></i>Questions
</div>
\{{/if}}
Expand Down Expand Up @@ -83,7 +83,7 @@
\{{/if}}

<div class="agenda-item-detail-body-text">
<a href="\{{{auth content}}}" target="_blank">Tap to open</a>
<a class="focus-outline" href="\{{{auth content}}}" target="_blank">Tap to open</a>
</div>
\{{/if}}
\{{/ifCond}}
Expand All @@ -96,7 +96,7 @@
\{{/if}}

<div class="agenda-item-detail-body-text">
<a href="tel:\{{removeSpaces content}}" target="_blank">\{{content}}</a>
<a class="focus-outline" href="tel:\{{removeSpaces content}}" target="_blank">\{{content}}</a>
</div>
\{{/if}}
\{{/ifCond}}
Expand All @@ -109,7 +109,7 @@
\{{/if}}

<div class="agenda-item-detail-body-text">
<a href="mailto:\{{content}}" target="_blank">\{{content}}</a>
<a class="focus-outline" href="mailto:\{{content}}" target="_blank">\{{content}}</a>
</div>
\{{/if}}
\{{/ifCond}}
Expand All @@ -131,10 +131,10 @@
\{{#ifCond editEntry '||' deleteEntry}}
<div class="dynamic-list-controls">
\{{#if editEntry}}
<div class="btn btn-default dynamic-list-edit-item">Edit</div>
<div class="btn btn-default dynamic-list-edit-item focus-outline" tabindex="0">Edit</div>
\{{/if}}
\{{#if deleteEntry}}
<div class="btn btn-danger dynamic-list-delete-item">Delete</div>
<div class="btn btn-danger dynamic-list-delete-item focus-outline" tabindex="0">Delete</div>
\{{/if}}
</div>
\{{/ifCond}}
Expand Down
4 changes: 2 additions & 2 deletions templates/build/agenda-cards-loop.build.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
\{{#each this}}
<div class="agenda-list-day-holder" tabindex="0" role="listitem">
<div class="agenda-list-day-holder focus-outline" tabindex="0" role="listitem">
<div id="contentArea-\{{@index}}" class="agenda-list-card-holder">
\{{#each this}}
<div class="agenda-list-item" data-entry-id="\{{id}}">
<div class="agenda-list-item focus-outline" data-entry-id="\{{id}}" tabindex="0">
<div class="agenda-list-item-content">
<div class="container-fluid slide-over session-container">
<div class="agenda-item-inner-content clearfix">
Expand Down
2 changes: 1 addition & 1 deletion templates/build/agenda-cards-search-results.build.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<h3 class="search-results-list-date">\{{moment this.0.[Full Date] format="ddd D MMM"}}</h3>
<div class="search-results-list-day-holder">
\{{#each this}}
<div class="agenda-list-item" data-entry-id="\{{id}}">
<div class="agenda-list-item focus-outline" data-entry-id="\{{id}}" tabindex="0">
<div class="agenda-list-item-content">
<div class="container-fluid slide-over session-container">
<div class="agenda-item-inner-content clearfix">
Expand Down
2 changes: 1 addition & 1 deletion templates/build/agenda-dates-loop.build.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
\{{#each this}}
<li class="\{{#if placeholder}}placeholder\{{/if}}" id="\{{@index}}" tabindex="0">
<li class="\{{#if placeholder}}placeholder\{{/if}} focus-outline" id="\{{@index}}" tabindex="0">
<div class="week">\{{week}}</div>
<div class="day">\{{day}}</div>
<div class="month">\{{month}}</div>
Expand Down
4 changes: 2 additions & 2 deletions templates/build/agenda-filters.build.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
<div class="panel-body">
<fieldset hidden data-filter-group>
\{{#each [data]}}
<div class="btn hidden-filter-controls-filter" data-toggle="\{{[class]}}" data-field="\{{../name}}" data-value="\{{[name]}}" tabindex="0">\{{[name]}}</div>
<div class="btn hidden-filter-controls-filter focus-outline" data-toggle="\{{[class]}}" data-field="\{{../name}}" data-value="\{{[name]}}" tabindex="0">\{{[name]}}</div>
\{{/each}}
</fieldset>
</div>
Expand All @@ -29,7 +29,7 @@
<div class="hidden-filter-controls-filter-wrapper">
<fieldset hidden data-filter-group>
\{{#each [data]}}
<div class="btn hidden-filter-controls-filter" data-toggle="\{{[class]}}" data-field="\{{../name}}" data-value="\{{[name]}}" tabindex="0">\{{[name]}}</div>
<div class="btn hidden-filter-controls-filter focus-outline" data-toggle="\{{[class]}}" data-field="\{{../name}}" data-value="\{{[name]}}" tabindex="0">\{{[name]}}</div>
\{{/each}}
</fieldset>
</div>
Expand Down
Loading