[AX] <table> should be taken out of <figure> and the <figcaption> should become the table’s <caption>

[marinaaisa]

Bug/issue #30234820, if applicable:

Summary

Tables were contained within a <figure> element. However, there is no need for this and it was making the tables much less accessible. Tables should stand on their own with the previous <figcaption> as the table’s <caption>.

This is a improved implementation of #40 that was not taking into account #404 and had to be reverted.

Dependencies

NA

Testing

Use the provided fixture folder:
manual-fixtures.zip

Steps:

1. Run VUE_APP_DEV_SERVER_PROXY=/path/to/manual-fixtures/ npm run serve
2. Go to http://localhost:8080/documentation/framework/sloth
3. Assert that tables' markup is as described in the Summary.

Checklist

• Added tests
• Ran npm test, and it succeeded
• Updated documentation if necessary

[marinaaisa]

@swift-ci test

[dobromir-hristov]

Left a few minor comments, but I think we are in a good shape here.

[dobromir-hristov]

LGTM

[marinaaisa]

@swift-ci test

[marinaaisa]

@swift-ci test

[mportiz08]

I think this resolves the previous issue with crashing regression for certain content.

I did find a couple of very minor styling regressions with the font and spacing that we should fix before merging.

[mportiz08]

I think we only want a top margin to be applied if it is preceded by some other content, right?

It might be worth looking at the way this is/was done for the figcaption/figure spacing in Figure.vue. It sounds like we would want to do something similar for the caption element and the contents within a table.

[marinaaisa]

Because we are adding the caption inside the table, I couldn't apply the margin to its siblings, it won't work in a display table, so I applied it to the component itself checking if there are siblings, using the has pseudo-class. It's widely supported now (only Firefox is missing) https://caniuse.com/css-has d814cd8

Can we use has?

[mportiz08]

I started reviewing this again, but I found out that the <caption> element has to be the first element of the <table>, regardless of whether or not it is displayed on the top or the bottom. 🤦‍♂️🥲

I was going to make some suggestions to this PR, but it turned out to be easier to just create a new PR. Hopefully we finally have it right now! #706

I also ran into issues you probably did where our normal block-level spacing helpers don't work due to specific issues with certain elements, but I was able to address them without :has().

[marinaaisa]

Closing in favor of #706 (review)