a11y: add accordion pattern to form view sections (#73116)
gitea/wcs/pipeline/head This commit looks good
Details
gitea/wcs/pipeline/head This commit looks good
Details
This commit is contained in:
parent
29772800e9
commit
ea157971fc
|
@ -636,8 +636,12 @@ class FormStatusPage(Directory, FormTemplateMixin):
|
|||
return
|
||||
r = TemplateIO(html=True)
|
||||
r += htmltext('<div class="section foldable">')
|
||||
r += htmltext('<h2>%s</h2>') % _('Backoffice Data')
|
||||
r += htmltext('<div class="dataview">')
|
||||
r += htmltext(
|
||||
'<h2><span role="button" aria-expanded="true" '
|
||||
'aria-controls="sect-backoffice-data" '
|
||||
'id="sect-backoffice-data-label">%s</span></h2>'
|
||||
) % _('Backoffice Data')
|
||||
r += htmltext('<div class="dataview" id="sect-backoffice-data">')
|
||||
r += content
|
||||
r += htmltext('</div>')
|
||||
r += htmltext('</div>')
|
||||
|
|
|
@ -124,10 +124,22 @@ Responsive_table_widget.prototype.init = function () {
|
|||
};
|
||||
|
||||
$(function() {
|
||||
$('.section.foldable > h2').click(function() {
|
||||
if (document.body.dataset.gadjo !== 'true') {
|
||||
$(this).parent().toggleClass('folded');
|
||||
$('.section.foldable > h2 [role=button]').each(function() {
|
||||
$(this).attr('tabindex', '0');
|
||||
});
|
||||
$('.section.foldable > h2 [role=button]').on('keydown', function(ev) {
|
||||
if (ev.keyCode == 13 || ev.keyCode == 32) { // enter || space
|
||||
$(this).trigger('click');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
$('.section.foldable > h2').off('click').click(function() {
|
||||
var folded = $(this).parent().hasClass('folded');
|
||||
var $button = $(this).find('[role=button]').first();
|
||||
if ($button.length) {
|
||||
$button[0].setAttribute('aria-expanded', `${folded}`);
|
||||
}
|
||||
$(this).parent().toggleClass('folded');
|
||||
$(this).parent().find('.qommon-map').trigger('qommon:invalidate');
|
||||
});
|
||||
|
||||
|
|
|
@ -1,9 +1,10 @@
|
|||
{% load i18n %}
|
||||
<div class="section foldable {% if view.should_fold_history %}folded{% endif %}" id="evolution-log">
|
||||
{% block log-section-title %}
|
||||
<h2>{% trans "Log" %}</h2>
|
||||
<h2><span role="button" aria-expanded="{{ view.should_fold_history|yesno:'false,true' }}"
|
||||
aria-controls="sect-evolutions" id="sect-evolutions-label">{% trans "Log" %}</span></h2>
|
||||
{% endblock %}
|
||||
<div>
|
||||
<div id="sect-evolutions" role="region" aria-labelledby="sect-evolutions-label">
|
||||
<ul id="evolutions">
|
||||
{% for evolution in formdata.get_visible_evolution_parts %}
|
||||
{% with status=evolution.get_status display_parts=evolution.display_parts %}
|
||||
|
|
|
@ -1,11 +1,12 @@
|
|||
{% load i18n %}
|
||||
<div class="section foldable {% if should_fold_summary %}folded{% endif %}" id="summary">
|
||||
<h2>{% trans "Summary" %}
|
||||
<h2><span role="button" aria-expanded="{{ should_fold_summary|yesno:'false,true' }}"
|
||||
aria-controls="sect-dataview" id="sect-dataview-label">{% trans "Summary" %}</span>
|
||||
{% if not publisher.get_request.is_in_backoffice %}
|
||||
<span class="disclose-message">({% trans "display form details" %})</span>
|
||||
{% endif %}
|
||||
</h2>
|
||||
<div class="dataview">
|
||||
<div id="sect-dataview" role="region" aria-labelledby="sect-dataview-label" class="dataview">
|
||||
{% if user %}
|
||||
<div class="field username">
|
||||
<p class="label">{% trans "User name" %}</p>
|
||||
|
|
Loading…
Reference in New Issue