Make Autotoc tab markup compatible with Bootstrap

[cihanandac]

This fixes first part of the plone/Products.CMFPlone#4106

This change updates the markup and behavior of the AutoTOC to make it more compatible with Bootstrap's tab component. Key changes:

• Moves all fieldset elements inside a tab-content parent element.
• Replaces anchor () tab triggers with Bootstrap-compatible elements, utilizes data-bs-toggle, data-bs-target, and other related attributes.
• Adds appropriate aria attributes for accessibility and correct tab behavior.
• Updates tab-click handling to use Bootstrap's tab JavaScript API, replacing the previous custom logic.

[ale-rt]

Thanks a lot @cihanandac
This LGTM, but I leave the review to @thet and @petschki

[petschki]

I have tried this out and have found some issues:

editform tabs

• the active tab bottom border isn't transparent anymore
• the tabs have too much horizontal spacing (compared to classic demo site)

new:

original:

table of contents

the table_of_contents display is now a tabbed display instead of a vertical link list:

new:

original:

[petschki]

One more thing: if I edit a doc, the focus is now on the first tab instead of the first input element of the form. Not sure who is responsible for that... maybe because of the <button> implementation -> check pat-formautofocus ...

[cihanandac]

@petschki Thank you so much for the review. I really appreciated the suggestions.

• Changing the button tag back to a tag, solved the bottom border and horizontal spacing problem.
• Using the vertical version of the Bootstrap Nav element for the table of contents was a good idea and I think it fit the need perfectly.
• Also, now the focus when it is opened is at the first input element of the form.

[petschki]

@cihanandac thanks for taking care of the Bootstrap tabs here, but I'd really like to cut this a bit more.

You already use the Bootstrap Tab library and the ul -> li -> a markup with its css classes correctly. So I think we should try to remove our custom css code (in autotoc.scss) completely and go with all the standard Bootstrap stylings. Also the right floated vertical autotocs could be solved with Bootstraps float-end or even responsive with float-md-end css-classes. I think we can cut this pat-autotoc pattern to a minimum here. What you think?

[cihanandac]

@petschki I agree with you; there are many redundant or overwritten parts of the styling and It is much better/clear to use standard Bootstrap styling instead.

I have added two more commits to the PR related to this:

1. Add "float-end", "border" classes to the tab of content version, and hide "legend" titles in the JS and remove redundant styling from the SCSS file.
2. Move rest of the paddings, margins, and text decorations to the Bootstrap classes.

Some of the margin and padding values are not possible to replicate but I have tried to protect the same stylings for all the elements as much as possible. For example, the indentation of the table of content was 1, 2, and 3 rem, but bootstrap classes doesn't have 2 rem out of box so currently it is 1, 1.5, and 3 rem.

Please let me know about your thoughts if we should either keep both commits or leave the styling of margins/paddings same by keeping it on the SCSS file.

[petschki]

A general note: instead of merging master branch into the PR, try to rebase your changes onto master. This keeps the history cleaner (yeah I know, rebasing can be painful, but for encapsulated pattern changes it works nice) ...

Second note: you can add commits with git commit -n to bypass the commitlint rules ... then the changelog doesn't get polluted with non-relevant commit messages. I'll take care of cleaning up the messages here before merging. So no need for you to do that ...

[cihanandac]

@petschki Thanks so much for the suggestions. I have applied your last suggested changes and rebased all them onto the master branch.

Also, thanks for the tip about "git commit -n", I will use it next time :)

[thet]

Thanks for the PR 🎉

But please bring back the <nav> element.

Other than that, there is a lot of DOM manipulation going on here. I'd prefer having that in templates, e.g. the backend-rendered forms. But I think that's going beyond the scope of this PR and off the track of the original autotoc concept.

So fine for me with the <nav> introduced back.

[petschki]

Thanks! 🎉