Contact Summary address: make accordion more accessible

[highfalutin]

Overview

Toward user-interface#60 / core#3294 -- replaces the last remaining instance of .crm-collapsible, a less-accessible accordion pattern, with <details><summary>

Before

.crm-collapsible plus JS controls

After

<details><summary>, with css class to play well with existing JS

[civibot]

🤖 Thank you for contributing to CiviCRM! ❤️ We will need to test and review this PR. 👷

Introduction for new contributors...

• If this is your first PR, an admin will greenlight automated testing with the command ok to test or add to whitelist.
• A series of tests will automatically run. You can see the results at the bottom of this page (if there are any problems, it will include a link to see what went wrong).
• A demo site will be built where anyone can try out a version of CiviCRM that includes your changes.
• If this process needs to be repeated, an admin will issue the command test this please to rerun tests and build a new demo site.
• Before this PR can be merged, it needs to be reviewed. Please keep in mind that reviewers are volunteers, and their response time can vary from a few hours to a few weeks depending on their availability and their knowledge of this particular part of CiviCRM.
• A great way to speed up this process is to "trade reviews" with someone - find an open PR that you feel able to review, and leave a comment like "I'm reviewing this now, could you please review mine?" (include a link to yours). You don't have to wait for a response to get started (and you don't have to stop at one!) the more you review, the faster this process goes for everyone 😄
• To ensure that you are credited properly in the final release notes, please add yourself to contributor-key.yml
• For more information about contributing, see CONTRIBUTING.md.

Quick links for reviewers...

• ➡️ PR Demo site (can be rebuilt with the command test this please).
• 📖 Review standards
• 🗒️ Review template (brief or verbose)

➡️ Online demo of this PR 🔗

[highfalutin]

@herbdool this is currently broken due to some interactions with JS -- do you want to investigate?

[highfalutin]

Actually @herbdool I figured out the js issue. The class .collapsible-title needed to be present on the <summary> element so that clicks wouldn't trigger online edit (see the relevant js).

@vingle can you help us to make it look good? See demo

[herbdool]

@highfalutin the PR works for me. (Just tested while waiting for the train to start 😉)

I'm wondering if we want to add <summary> to that JS so .collapsible-title doesn't need to be added? Would this work:

 .on('mousedown', '.crm-inline-edit:not(.form) a, .crm-inline-edit:not(.form) .crm-accordion-header, .crm-inline-edit:not(.form) summary', function(event) {

I'm guessing there aren't any situations when clicking on an accordion should force in-place editing.

[highfalutin]

@herbdool that's a great idea. I think maybe it belongs in a separate PR, where we can wipe out all instances of the collapsible-title class and the references to it.

[vingle]

That works really well, thanks for persevering to figure it out. Have added a small styling PR here.