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

Convert accordions to accessible style #29448

Merged
merged 8 commits into from
Mar 2, 2024
Merged

Convert accordions to accessible style #29448

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
b58a2fe
Remove line breaks in accordion divs
aydun Feb 20, 2024
b9cd406
Fix missing end div
aydun Feb 22, 2024
3c07d6c
Convert accordions to `<details>`/`<summary>`
aydun Feb 29, 2024
0c41895
Fix expand/collapse all tabs
herbdool Feb 29, 2024
ab2a252
remove code that will never run from contact import form
highfalutin Mar 1, 2024
a23b61f
Removes outdated accordion classes in wrapper
vingle Mar 2, 2024
a342352
update crmAccordionToggle()
herbdool Mar 1, 2024
7d78fc0
Remove unneeded comments: <!-- /.crm-accordion-body -->
aydun Mar 2, 2024
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 templates/CRM/Activity/Form/Activity.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,7 +208,7 @@
$('.crm-accordion-body', $form).each( function() {
//open tab if form rule throws error
if ( $(this).children( ).find('span.crm-error').text( ).length > 0 ) {
$(this).parent('.collapsed').crmAccordionToggle();
$(this).parent('details').prop('open', true);
}
});
function toggleMultiActivityCheckbox() {
Expand Down
10 changes: 5 additions & 5 deletions templates/CRM/Activity/Form/FollowUp.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<div id="follow-up" class="crm-accordion-wrapper collapsed">
<div class="crm-accordion-header">
<details id="follow-up" class="crm-accordion-bold">
<summary>
{ts}Schedule Follow-up{/ts}
</div><!-- /.crm-accordion-header -->
</summary>
<div class="crm-accordion-body">
<table class="form-layout-compressed">
<tr class="crm-{$type}activity-form-block-followup_activity_type_id">
Expand All @@ -26,6 +26,6 @@
</td>
</tr>
</table>
</div><!-- /.crm-accordion-body -->
</div><!-- /.crm-accordion-wrapper -->
</div>
</details>

1 change: 0 additions & 1 deletion templates/CRM/Activity/Form/Search.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@
<summary class="crm-accordion-header crm-master-accordion-header">
{ts}Edit Search Criteria{/ts}
</summary>
<!-- /.crm-accordion-header -->
<div class="crm-accordion-body">
<div id="searchForm" class="form-item">
{strip}
Expand Down
10 changes: 5 additions & 5 deletions templates/CRM/Activity/Selector/Selector.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,10 @@
+--------------------------------------------------------------------+
*}
<div class="crm-activity-selector-{$context}">
<div class="crm-accordion-wrapper crm-search_filters-accordion">
<div class="crm-accordion-header">
<details class="crm-accordion-bold crm-search_filters-accordion" open>
<summary>
{ts}Filter by Activity{/ts}
</div><!-- /.crm-accordion-header -->
</summary>
<div class="crm-accordion-body">
<form><!-- form element is here to fool the datepicker widget -->
<table class="no-border form-layout-compressed activity-search-options">
Expand All @@ -29,8 +29,8 @@
</tr>
</table>
</form>
</div><!-- /.crm-accordion-body -->
</div><!-- /.crm-accordion-wrapper -->
</div>
</details>
<table class="contact-activity-selector-{$context} crm-ajax-table" style="width: 100%;">
<thead>
<tr>
Expand Down
30 changes: 15 additions & 15 deletions templates/CRM/Admin/Form/MessageTemplates.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,11 +65,11 @@
<tr>
</table>

<div id="msg_html_section" class="crm-accordion-wrapper crm-html_email-accordion ">
<div class="crm-accordion-header">
<details id="msg_html_section" class="crm-accordion-bold crm-html_email-accordion " open>
<summary>
{ts}HTML Format{/ts}
{help id="id-message-text" file="CRM/Contact/Form/Task/Email.hlp"}
</div><!-- /.crm-accordion-header -->
</summary>
<div class="crm-accordion-body">
<div class="helpIcon" id="helphtml">
<input class="crm-token-selector big" data-field="msg_html" />
Expand All @@ -79,14 +79,14 @@
<div class='html'>
{$form.msg_html.html|crmAddClass:huge}
</div>
</div><!-- /.crm-accordion-body -->
</div><!-- /.crm-accordion-wrapper -->
</div>
</details>

<div id="msg_text_section" class="crm-accordion-wrapper crm-plaint_text_email-accordion ">
<div class="crm-accordion-header">
<details id="msg_text_section" class="crm-accordion-bold crm-plaint_text_email-accordion " open>
<summary>
{ts}Optional Plain-Text Format{/ts}
{help id="id-message-plain" file="CRM/Contact/Form/Task/Email.hlp"}
</div><!-- /.crm-accordion-header -->
</summary>
<div class="crm-accordion-body">
<div class="helpIcon" id="helptext">
<input class="crm-token-selector big" data-field="msg_text" />
Expand All @@ -96,22 +96,22 @@
<div class='text'>
{$form.msg_text.html|crmAddClass:huge}
</div>
</div><!-- /.crm-accordion-body -->
</div><!-- /.crm-accordion-wrapper -->
</div>
</details>

<div id="pdf_format" class="crm-accordion-wrapper crm-html_email-accordion ">
<div class="crm-accordion-header">
<details id="pdf_format" class="crm-accordion-bold crm-html_email-accordion " open>
<summary>
{$form.pdf_format_id.label}
</div><!-- /.crm-accordion-header -->
</summary>
<div class="crm-accordion-body">
<div class="spacer"></div>
<div class='html'>
{$form.pdf_format_id.html}
{help id="id-msg-template" file="CRM/Contact/Form/Task/PDFLetterCommon.hlp"}
<div class="description">{ts}Page format to use when creating PDF files using this template.{/ts}</div>
</div>
</div><!-- /.crm-accordion-body -->
</div><!-- /.crm-accordion-wrapper -->
</div>
</details>

{if !$isWorkflow}
<table class="form-layout-compressed">
Expand Down
2 changes: 1 addition & 1 deletion templates/CRM/Campaign/Form/Gotv.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@

//collapse the search form.
var searchFormName = '#search_form_' + {/literal}'{$searchVoterFor}'{literal};
CRM.$( searchFormName + '.crm-accordion-wrapper:not(.collapsed)').crmAccordionToggle();
CRM.$( searchFormName + 'details').prop('open', false);
}, 'html' );
}

Expand Down
8 changes: 4 additions & 4 deletions templates/CRM/Campaign/Form/Search/Common.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,10 @@
{if $searchVoterFor}
{assign var='searchForm' value="search_form_$searchVoterFor"}
{/if}
<div id="{$searchForm}" class="crm-accordion-wrapper crm-contribution_search_form-accordion {if $rows}collapsed{/if}">
<div class="crm-accordion-header {if !$votingTab} crm-master-accordion-header{/if}">
<details id="{$searchForm}" class="{if !$votingTab} crm-accordion-light{else}crm-accordion-bold{/if} crm-contribution_search_form-accordion" {if $rows}{else}open{/if}>
<summary>
{ts}Edit Search Criteria{/ts}
</div><!-- /.crm-accordion-header -->
</summary>

<div class="crm-accordion-body">
{strip}
Expand Down Expand Up @@ -142,7 +142,7 @@
{/strip}

</div>
</div>
</details>
</div>

{literal}
Expand Down
6 changes: 3 additions & 3 deletions templates/CRM/Campaign/Form/Survey/Results.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@
{* Create Report *}
<tr id='showoption'>
<td colspan="2">
<div id="new-group" class="crm-accordion-wrapper">
<div class="crm-accordion-header">{ts}Create Report{/ts}</div>
<details id="new-group" class="crm-accordion-bold" open>
<summary>{ts}Create Report{/ts}</summary>
<div class="crm-accordion-body">
<table class="form-layout-compressed">
<tr>
Expand All @@ -34,7 +34,7 @@
</tr>
</table>
</div>
</div>
</details>
</td>
</tr>
</table>
Expand Down
14 changes: 7 additions & 7 deletions templates/CRM/Campaign/Form/Task/Reserve.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@
{include file="CRM/Contact/Form/Task.tpl"}

{* New Group *}
<div id="new-group" class="crm-accordion-wrapper collapsed">
<div class="crm-accordion-header">{ts}Add respondent(s) to a new group{/ts}</div>
<details id="new-group" class="crm-accordion-bold">
<summary>{ts}Add respondent(s) to a new group{/ts}</summary>
<div class="crm-accordion-body">
<table class="form-layout-compressed">
<tr>
Expand All @@ -30,11 +30,11 @@
</tr>
</table>
</div>
</div>
</details>

{* Existing Group *}
<div class="crm-accordion-wrapper crm-existing_group-accordion {if $hasExistingGroups} {else}collapsed{/if}">
<div class="crm-accordion-header">{ts}Add respondent(s) to existing group(s){/ts}</div>
<details class="crm-accordion-bold crm-existing_group-accordion" {if $hasExistingGroups}open{/if}>
<summary>{ts}Add respondent(s) to existing group(s){/ts}</summary>
<div class="crm-accordion-body">
<table class="form-layout-compressed">
<tr>
Expand All @@ -43,7 +43,7 @@
</tr>
</table>
</div>
</div>
</details>

<div class="crm-submit-buttons">{include file="CRM/common/formButtons.tpl" location="bottom"}</div>
</div>
Expand All @@ -57,7 +57,7 @@
function setDefaultGroup() {
var invalidGroupName = {/literal}'{$invalidGroupName}'{literal};
if (invalidGroupName) {
cj("#new-group.collapsed").crmAccordionToggle();
cj("#new-group").prop('open', true);
} else {
cj("#newGroupName").val('');
cj("#newGroupDesc").val('');
Expand Down
24 changes: 12 additions & 12 deletions templates/CRM/Case/Form/Activity.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,10 +41,10 @@
{* Added Activity Details accordion tab *}
<tr class="crm-case-activity-form-block-activity-details">
<td colspan="2">
<div id="activity-details" class="crm-accordion-wrapper collapsed">
<div class="crm-accordion-header">
<details id="activity-details" class="crm-accordion-bold">
<summary>
{ts}Activity Details{/ts}
</div><!-- /.crm-accordion-header -->
</summary>
<div class="crm-accordion-body">
{else}
<tr class="crm-case-activity-form-block-activity-details">
Expand Down Expand Up @@ -160,8 +160,8 @@
{if $activityTypeFile EQ 'ChangeCaseStatus'
|| $activityTypeFile EQ 'ChangeCaseType'
|| $activityTypeFile EQ 'ChangeCaseStartDate'}
</div><!-- /.crm-accordion-body -->
</div><!-- /.crm-accordion-wrapper -->
</div>
</details>
{* End of Activity Details accordion tab *}
{/if}
</td>
Expand All @@ -172,10 +172,10 @@
{if $searchRows} {* We have got case role rows to display for "Send Copy To" feature *}
<tr class="crm-case-activity-form-block-send_copy">
<td colspan="2">
<div id="sendcopy" class="crm-accordion-wrapper collapsed">
<div class="crm-accordion-header">
<details id="sendcopy" class="crm-accordion-bold">
<summary>
{ts}Send a Copy{/ts}
</div><!-- /.crm-accordion-header -->
</summary>
<div id="sendcopy-body" class="crm-accordion-body">

<div class="description">{ts}Email a complete copy of this activity record to other people involved with the case. Click the top left box to select all.{/ts}</div>
Expand All @@ -201,8 +201,8 @@
{/foreach}
</table>
{/strip}
</div><!-- /.crm-accordion-body -->
</div><!-- /.crm-accordion-wrapper -->
</div>
</details>
</td>
</tr>
{/if}
Expand Down Expand Up @@ -268,10 +268,10 @@
{if $action neq 8 and $action neq 32768 and empty($activityTypeFile)}
<script type="text/javascript">
{if $searchRows}
cj('#sendcopy').crmAccordionToggle();
cj('#sendcopy').prop('open', function(i, val) {return !val;});
{/if}

cj('#follow-up').crmAccordionToggle();
cj('#follow-up').prop('open', function(i, val) {return !val;});
</script>
{/if}

Expand Down
10 changes: 5 additions & 5 deletions templates/CRM/Case/Form/CaseFilter.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,10 @@
+--------------------------------------------------------------------+
*}
<div class="crm-case-filter-{$list}">
<div class="crm-accordion-wrapper crm-search_filters-accordion">
<div class="crm-accordion-header">
<details class="crm-accordion-bold crm-search_filters-accordion" open>
<summary>
{ts}Filter by Case{/ts}</a>
</div><!-- /.crm-accordion-header -->
</summary>
<div class="crm-accordion-body">
<table class="no-border form-layout-compressed case-search-options-{$list}">
<tr>
Expand All @@ -29,7 +29,7 @@
{/if}
</tr>
</table>
</div><!-- /.crm-accordion-body -->
</div><!-- /.crm-accordion-wrapper -->
</div>
</details>
</div>
<div class="spacer"></div>
30 changes: 15 additions & 15 deletions templates/CRM/Case/Form/CaseView.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,10 +128,10 @@
<div class="clear"></div>
{include file="CRM/Case/Page/CustomDataView.tpl"}

<div class="crm-accordion-wrapper collapsed crm-case-roles-block">
<div class="crm-accordion-header">
<details class="crm-accordion-bold crm-case-roles-block">
<summary>
{ts}Roles{/ts}
</div><!-- /.crm-accordion-header -->
</summary>
<div class="crm-accordion-body">

{if $hasAccessToAllCases}
Expand Down Expand Up @@ -185,14 +185,14 @@
{ts}Are you sure you want to end this relationship?{/ts}
</div>

</div><!-- /.crm-accordion-body -->
</div><!-- /.crm-accordion-wrapper -->
</div>
</details>

{if $hasAccessToAllCases}
<div class="crm-accordion-wrapper collapsed crm-case-other-relationships-block">
<div class="crm-accordion-header">
<details class="crm-accordion-bold crm-case-other-relationships-block">
<summary>
{ts}Other Relationships{/ts}
</div><!-- /.crm-accordion-header -->
</summary>
<div class="crm-accordion-body">
<div class="crm-submit-buttons">
{crmButton p='civicrm/contact/view/rel' q="action=add&reset=1&cid=`$contactId`&caseID=`$caseID`" icon="plus-circle"}{ts}Add client relationship{/ts}{/crmButton}
Expand Down Expand Up @@ -252,18 +252,18 @@
{/literal}
{/if}

</div><!-- /.crm-accordion-body -->
</div><!-- /.crm-accordion-wrapper -->
</div>
</details>

{/if} {* other relationship section ends *}
{include file="CRM/Case/Form/ActivityToCase.tpl"}

{* pane to display / edit regular tags or tagsets for cases *}
{if $showTags}
<div id="casetags" class="crm-accordion-wrapper crm-case-tags-block">
<div class="crm-accordion-header">
<details id="casetags" class="crm-accordion-bold crm-case-tags-block" open>
<summary>
{ts}Case Tags{/ts}
</div><!-- /.crm-accordion-header -->
</summary>
<div class="crm-accordion-body">
{if $tags}
<p class="crm-block crm-content-block crm-case-caseview-display-tags">
Expand Down Expand Up @@ -295,8 +295,8 @@
</a>
</div>

</div><!-- /.crm-accordion-body -->
</div><!-- /.crm-accordion-wrapper -->
</div>
</details>

<div id="manageTagsDialog" class="hiddenElement">
<div class="label">{$form.case_tag.label}</div>
Expand Down
Loading