Skip to content

Use <caption> for table captions instead of <figcaption> #706

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

Conversation

mportiz08
Copy link
Contributor

Bug/issue #, if applicable: 30234820

Summary

Use <caption> for tables instead of <figcaption>.

Tables with captions will no longer be embedded in a <figure> with a <figcaption>. Instead, the <table> will simply have a <caption> as its first element when needed.

For table captions, the position of the caption must be done in CSS since the <caption> is always required to be the first element of the <table> and cannot be moved to the end like they can with figure captions.

Testing

Steps:

  1. Find a page with a captioned table
  2. Verify that the DOM structure now looks like <table><caption> instead of <figure><figcaption><table>
  3. Verify that there are no visual regressions with figures, captions, or tables

Checklist

Make sure you check off the following items. If they cannot be completed, provide a reason.

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

Tables with captions will no longer be embedded in a <figure> with a
<figcaption>. Instead, the <table> will simply have a <caption> as its
first element when needed.

For table captions, the position of the caption must be done in CSS
since the <caption> is always required to be the first element of the
<table> and cannot be moved to the end like they can with figure
captions.
Copy link
Member

@marinaaisa marinaaisa left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks Marcus for reviewing #692 and submitting this new PR!

Since caption element has to be the first element of the table, this makes much more sense!

I reflected on the centered prop and I proposed a refactor in the CSS. Let me know if it makes sense or I'm missing some use case. (Hopefully not!)

mportiz08 and others added 2 commits June 30, 2023 10:28
Co-authored-by: Marina Aísa <[email protected]>
* replace `centered` prop with `position`
* simplify margin styling
@mportiz08 mportiz08 requested a review from marinaaisa June 30, 2023 20:45
Copy link
Contributor

@dobromir-hristov dobromir-hristov left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested in various scenarios, looks great!

Copy link
Member

@marinaaisa marinaaisa left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👏

@mportiz08
Copy link
Contributor Author

@swift-ci test

@mportiz08 mportiz08 merged commit 4a7e16b into swiftlang:main Jul 3, 2023
@mportiz08 mportiz08 deleted the ax/improve-table-caption-semantics branch July 3, 2023 17:05
mportiz08 added a commit to mportiz08/swift-docc-render that referenced this pull request Jul 3, 2023
Use <caption> for tables instead of <figcaption>.

Tables with captions will no longer be embedded in a <figure> with a
<figcaption>. Instead, the <table> will simply have a <caption> as its
first element when needed.

Co-authored-by: Marina Aísa <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants