Tracker for making CiviCRM's accordions accessible
In #60 at least eight accordion markup patterns were identified, demonstrated in ThemeTest. This issue is to track progress on updating all Civi accordion markup to being accessible.
The table below tracks the progress of all of these patterns: bundling pattern 1 and 8 which use the same JS, then there's just three patterns left to make accessible (four, if another instance of an accordion fieldset can be found).
Statuses are either:
- Recommended - a new/agreed pattern, themes should support
- Supported - old pattern but it's still being used, so themes need to support
- Deprecated - old pattern, not being used, so themes can drop support
Pattern | Status | Initial PR | Current PR |
---|---|---|---|
1. crm-accordion-wrapper & crm-accordion-master-wrapper | Supported | 28415 | 64 instances - 29448 |
2. crm-dashlet | Supported | 29613 | (only instance, so same) |
3. crm-collapsible | Supported | 28430 | 9 instances - 8 fixed in 29533 |
4. fieldset | Deprecated (?) | 28441 | That PR might have been only instance |
5. Extensions table | Deprecated | 28473 | Was only instance |
6. Angular directive | Deprecated | 28467 | Was only instance |
7. FormBuilder generated accordion | Deprecated | 28449 | Was only instance |
8. crm-accordion-master-wrapper | Supported | 28421 | Bundled with pattern 1 |
Testing of new patterns should be on all CMSs with their default admin theme (e.g. Claro on Drupal 9+) and Civi's Greenwich (default) theme.
29533
TestingFile | Testing URL | UI works? | likely related JS? | status | notes |
---|---|---|---|---|---|
templates/CRM/Admin/Form/ScheduleReminders.tpl | civicrm/admin/scheduleReminders?reset=1 & click 'add reminder' | yes: d7+d10+sa+wp | none | functional | tested with and without an sms provider enabled |
templates/CRM/Admin/Page/APIExplorer.tpl | civicrm/api3 & then select an Entity, such as ACLRole | breaks: d7+d10+sa+wp | yes, APIExplorer.js, broken | broken | documentation tab content appears below explorer tab content; entity dropdowns don't have intended behavior |
templates/CRM/Case/Form/ActivityTab.tpl | civicrm/contact/view/case?reset=1 under Activities/SearchFilters | yes: d7 | none that controls the accordion | functional | some extra borders appear around the details |
29448
TestingWould remove all instances of pattern 1 and pattern 8 (the majority of Civi's accordions).
-
CRMAccordionToggle - Contact/Import/Form/Preview.tpl - civicrm/import/contact > page 3 -
CRMAccordionToggle - Financial/Form/BatchTransaction.tpl - civicrm/batchtransaction?reset=1&bid=1 (after creating a batch) -
Contact dashboard issues - Contact/Form/Contact.tpl -
Contact dashboard issues - Contact/Form/Edit/Address.tpl -
Contact dashboard issues - Contact/Form/Edit/CommunicationPreferences.tpl -
Contact dashboard issues - Contact/Form/Edit/CustomData.tpl -
Contact dashboard issues - Contact/Form/Edit/Demographics.tpl -
Contact dashboard issues - Contact/Form/Edit/Notes.tpl -
Contact dashboard issues - Contact/Form/Edit/TagsAndGroups.tpl -
Doesn't open on validation error - Activity/Form/FollowUp.tpl - civicrm/activity?reset=1&action=add&context=standalone -
Doesn't open on validation error - Core/Form/RecurringEntity.tpl - civicrm/activity?reset=1&action=add&context=standalone -
Doesn't open on validation error - Form/attachment.tpl - civicrm/activity?reset=1&action=add&context=standalone, civicrm/activity/email/add -
Other issue - common/fatal.tpl - make an error, ie civicrm/payment -
Other markup issue - Contribute/Form/AdditionalPayment.tpl - civicrm/payment?action=add&reset=1&id=1 -
Other markup issue - Custom/Page/CustomDataView.tpl - tested by @shaneonabike and requesting feedback (seems ok) -
Other markup issue - Contribute/Form/Contribution.tpl - civicrm/contribute/add -
Other UX issue - Case/Form/Activity.tpl - civicrm/contact/view/case (add activity modal) -
Other tiny issue - Pledge/Form/Search.tpl - civicrm/pledge/search?reset=1 - tested by @shaneonabike and requesting feedback (seems ok) -
Ajax issue - Contact/Page/View/GroupContact.tpl - civicrm/contact/view -> Groups -
Ajax issue - Pledge/Form/Pledge.tpl - civicrm/pledge/add?reset=1&action=add&context=standalone -
Remove from PR - Case/Form/ActivityTab.tpl - civicrm/contact/view/case -
This shouldn't be accordion - Financial/Form/FinancialAccount.tpl - civicrm/admin/financial/financialAccount?reset=1 + addsee #68 -
Does this need to be an accordion? - Case/Form/CaseFilter.tpl - civicrm/casesee #68 -
Does this need to be an accordion? - Contribute/Form/ContributionPage/Premium.tpl - civicrm/admin/contribute/custom?action=update&reset=1&id=1&selectedChild=premiumsee #68 -
Does this need to be an accordion? - SMS/Form/Group.tpl - civicrm/sms/send?reset=1 (install & config SMS dummy ext)see #68 -
Does this need to be an accordion? - SMS/Form/Schedule.tpl - civicrm/sms/send?reset=1see #68 -
Custom/Form/Search.tpl (e.g. civicrm/activity/search?reset=1) -
Cannot find to test - Mailing/Form/Approve.tpl(there is a path but class isn't called anywhere, does it do anything? New issue core#5055) -
Create membership, and then click Edit/View and see the Related Contributions - Member/Form/Membership.tpl -
Create report, click a report like Constituent Summary, and view Custom fields in Field selection- Report/Form/Tabs/FieldSelection.tpl -
Create report, click a report like Constituent Summary, and view fields in Filter - Report/Form/Tabs/Filters.tpl
Edit: moved review summary to a comment.
Related class issues
These files are not affected by 29448 but have references to .crm-accordion-wrapper
, .crm-accordion-header
or .crm-master-accordion-header
and need attention to eliminate those classes.
- Activity/Form/Search.tpl
- Case/Form/CaseView.js
- Campaign/Form/Gotv.tpl
- Contact/Form/Search/AdvancedCriteria.tpl
- Contact/Page/View/CustomDataView.tpl
- Contact/Page/View/Summary.js
- Dashlet/Page/Blog.tpl
- Financial/Form/FinancialAccount.tpl - see above
We will need to merge 29563 as well for theming issue fix.