dev/user-interface#49 - SearchKit: improve tabbed interface

[colemanw]

Overview

This implements a bunch of the suggestions in https://lab.civicrm.org/dev/user-interface/-/issues/49 to reorganize the SK tabs.

Before

• Monolithic "Compose Search" tab.
• Top row is the title, entity, save button & forms
• Results table indented by the tab nav.

After

• Compose Search split into multiple tabs for different part of the search.
• Top row is title, save button, view button & forms; entity moved into the "search for" tab.
• Results table placed below tab nav for full-width.
• Select fields tab allows adding a field and reordering fields (same as column headers, but less cramped).

[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 🔗

[vingle]

That looks a big improvement.

Is it possible to make the tabs accessible? Civi's JQuery tabs on the contact dashboard are accessible (ie keyboard controllable, tab to select, arrow to move between) tho I don't think the Bootstrap 3 tabs (e.g. API4 explorer) are.

It doesn't look like there's unique ID's for each tab/panel - which is what ARIA wants (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role). I couldn't see from Angular's a11y docs if they simplify the process of this. But at a least making each tab a <button> should make them keyboard target-able, and giving them role=tab rather than role=presentation (and the panels with role=tabpanel) might at least indicate to screen readers what this part of the page is supposed to be doing.

[aydun]

I like it. Design isn't my thing so I'll leave it open for now for others to weigh in but it seems simple and straightforward.

One slight downside of this layout is that you can't see all the parts of the query on the screen at the same time, so eg screenshots on SE may need multiple screenshots in place of the current one. But that's not sufficient reason to hold back this change.

I wonder whether a few lines of boxing around tab headers and the content panel would make the tabbed structure more obvious.

[colemanw]

@vingle Is it possible to make the tabs accessible?

This PR takes a step in that direction by wrapping the tab <ul> inside a <nav> element, which is what the BS3 docs suggested for accessibility. But even before doing that, I'm able to navigate them with the keyboard. Pressing tab goes to the next, er, tab, and pressing enter opens it. Am I missing something?

[colemanw]

@aydun I wonder whether a few lines of boxing around tab headers and the content panel would make the tabbed structure more obvious.

I agree. But I'm not sure where my role as developer ends and the role of a themer begins. I tried to do everything with vanilla BS3. But if it makes sense we could add more styling?

[vingle]

But even before doing that, I'm able to navigate them with the keyboard. Pressing tab goes to the next, er, tab, and pressing enter opens it. Am I missing something?

@colemanw I'm not getting that on Firefox. Have just checked Safari and the same there. On both: keyboard tabbing skips the tabs and doesn't open it. Edit: if I turn on "Use tab key to move between forms and links" in FF settings, it works - I tend to test on defaults, but it makes sense this would be turned on for someone with accessibility needs.

NB - I see from the link that BS3 is the source of role='presentation' perhaps as role='tabs' 'tabpanel' and 'tablist' only become recommendations in 2021. As well as MDN, the W3C ARIA guidelines currently recommends using tabs, tablist and tabpanel. Tho it seems in lists it is good to use these with role='presentation'.

[vingle]

RE styling - what about adding Bootstrap Panel classes to the flex wrapper? ie <div class="crm-flex-4 panel panel-default panel-body"> to get the below:

[colemanw]

@vingle I've committed your suggestions, and with a touch more css was able to achieve a flowy look between the tabs and the panel (see updated screenshot in desc).

[vingle]

@colemanw Looks much improved.

[colemanw]

Thanks @vingle, I just pushed a few more tweaks (namely shifting the tabs down a few pixels so the rounded corner of the tab pane stays round) & updated the description.

[vingle]

@colemanw I'm still getting the line overlap on the merge demo (It's probably different with different themes)…

[colemanw]

@vingle ok I just pushed an update. I can't say I understand where that misalignment is coming from in your testing, but what I just pushed should be more forgiving.

[vingle]

@vingle ok I just pushed an update. I can't say I understand where that misalignment is coming from in your testing, but what I just pushed should be more forgiving.

@colemanw (edit) I think this is specific to Drupal Gardland in the generated demo. All the other <li>s have their left margin set to 0 by Bootstrap, so only the first <li> gets the 0.5em yellow margin below:

With latest commit (NB - this is around 1400px width viewport):

With margin-left: 0;:

[colemanw]

Ok @vingle and I resolved this over chat & seems to be good now.
I think this PR is now merge-ready.

[aydun]

I like those updates. A good step forward for the UI!