entrouvert/wcs
entrouvert
/
wcs
14
1
Fork 0
Code Issues Pull Requests 39 Releases Activity

misc: improve a11y of timetable widget (#74067) #592

Merged
fpeters merged 1 commits from wip/74067-timetable-a11y into main 2023-10-02 17:52:46 +02:00
Conversation 2 Commits 1 Files Changed 2 +18 -5
2 changed files with 18 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
wcs/qommon/static/css/dc2/admin.scss
View File

@ -2397,6 +2397,11 @@ div.timetable-widget {
div.head {
padding-bottom: 1ex;
h5 {
font-size: inherit;
font-weight: inherit;
margin: 0;
}
}
}

18
wcs/qommon/templates/qommon/forms/widgets/select-timetable.html
View File

@ -65,13 +65,14 @@
var nb_days = 0;
var has_timeslots = false;
var day_label = null;
for (var i=0; i<options.length; i++) {
var $option = $(options[i]);
if ($option.attr('value') == '') continue;
has_timeslots = true;
var option_date = $option.data('date');
if (option_date !== current_date) {
var day_label = $option.text().split(' ', 3).join(' ');
day_label = $option.text().split(' ', 3).join(' ');
if (Intl && Intl.DateTimeFormat) {
// create day label from actual date, this works for event agendas.
var date = new Date(option_date);
@ -80,12 +81,15 @@
}
var weekday = $option.data('weekday');
nb_days += 1;
current_day_div = $('<div><div class="head">' + weekday + '<br>' + day_label + '</div></div>');
current_day_div = $('<div><div class="head"><h5>' + weekday + '<br>' + day_label + '</h5></div></div>');
current_day_div.appendTo($table);
current_date = option_date;
}
var day_time = $option.data('time');
var option_span = $('<span class="timetable-cell selectable" tabindex="0" role="button" data-idx="' + i + '"><span>' + day_time + '</span></span>').appendTo(current_day_div);
var option_span = $(
'<span class="timetable-cell selectable" tabindex="0" role="button" data-idx="' + i + '">' +
'<span class="sr-only">' + day_label + '</span>' +
'<span>' + day_time + '</span></span>').appendTo(current_day_div);
if ($option.attr('disabled')) {
$(option_span).addClass('disabled').removeClass('selectable');
}
@ -108,8 +112,12 @@
if (! has_timeslots) {
$('<p class="timetable-widget--nothing">{% trans "No available timeslots." %}</p>').appendTo($table);
}
var go_prev = $('<button class="prev" title="{% trans "Previous week" %}">←</button>');
var go_next = $('<button class="next" title="{% trans "Next week" %}">→</button>');
var go_prev = $('<button class="prev" title="{% trans "Previous days" %}">' +
'<span aria-hidden="true">←</span>' +
'<span class="sr-only">{% trans "Previous days" %}</span></button>');
var go_next = $('<button class="next" title="{% trans "Next days" %}">' +
'<span aria-hidden="true">→</span>' +
'<span class="sr-only">{% trans "Next days" %}</span></button>');
go_prev.prependTo($table);
go_next.appendTo($table);
go_prev.on('click', function() {