Toggling the displaying of the caption

Created on 11 October 2024, 2 months ago

Problem/Motivation

The option to toggle the visibility of the caption does not display the caption.

When the caption visible is set to TRUE the visually-hidden class still remains resulting in a hidden caption
<caption class="visually-hidden">Caption text</caption>

When 'caption visible' is false (default) the `hide-class` is applied along side the visually-hidden.
<caption class="hide-caption visually-hidden">Caption text</caption>

Additionally, The css in css/responsiveTableStyles.css references a `figure` element that doesn't exist when I inspect the mark-up I see the following.

css/responsiveTableStyles.css

figure.table figcaption.hide-caption,
figure.table.hide-caption figcaption{
  display: none;
}

Displayed by the browser

<div class="tabled">
<div class="tabled__caption" aria-hidden="true">visible caption</div>
<div class="tabled__navigation">...</div>
<div class="tabled__wrapper" tabindex="0" id="tabled-n2499">
<table class="tabled__table">
<caption class="visually-hidden">visible caption</caption>
...
</table>
</div>
</div>

Steps to reproduce

This is reproducible at http://simplytest.me/ and using the stark theme.

Proposed resolution

Remove `visually-hidden` when caption visible is set to TRUE and apply it when set to FALSE. I figure hide-class isn't necessary, however I understand you would be relying on external code to handle the visibility.

πŸ› Bug report
Status

Active

Version

1.0

Component

Code

Created by

πŸ‡¨πŸ‡¦Canada delmarr

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @delmarr
  • πŸ‡ΊπŸ‡ΈUnited States bronzehedwick New York

    I'm seeing almost the opposite.

    1. When I set the caption to be visible, it stays visible
    2. When I set the caption to be hidden, is also stays visible (no visually-hidden class is applied)
    3. After setting the caption to be hidden, and editing the node again, the editor says the caption is visible

    Since the caption is always visible, and the editor always reflects that, my guess is that the caption visible state isn't being saved properly, and that could account for the display issue. Interesting that this is essentially the reverse of what you're seeing @delmarr. Are you still seeing the behavior you're describing in this ticket?

  • I'm also seeing the same issue with the latest version.

  • Merge request !8#3480235 Updating Tabled to 1.0.2 β†’ (Merged) created by javi-er
  • The problem was with the Tabled plugin, see: https://github.com/Lullabot/tabled/issues/7

    When the plugin was created, I didn't include the check for the `hide-caption` attribute that the CKE button adds to the `caption` element which is an indication that the user has choose to hide the caption.

  • The issue that was mentioned with styles at css/responsiveTableStyles.css that are referencing a figcation element that doesn't exists should be addressed in a different issue.

    There is also another issue with the Tabled plugin which is that the navigation should be set to display: none when it's not necessary since it's creating some white space between the caption and the table when the controls aren't present, this should be addressed as a new issue on the Tabled plugin.

  • πŸ‡ΊπŸ‡ΈUnited States bronzehedwick New York

    Hey @javi-er, thank you! After this update, I am seeing the caption be visually hidden if toggled off, and shown if not.

    However, if I try to change the setting from visible to hidden or vice versa after I've saved the node, the option doesn't change. I think this is a big improvement, though, so fine if we want to handle that in a separate issue.

  • Thanks for the review @bronzehedwick ! there was an extra issue that I fixed, could you take another look please?

  • πŸ‡ΊπŸ‡ΈUnited States bronzehedwick New York

    Re-tested and it's working great. Thanks @javi-er!

  • Pipeline finished with Skipped
    22 days ago
    #351050
  • Assigned to javi-er
  • Status changed to Fixed 8 days ago
  • Automatically closed - issue fixed for 2 weeks with no activity.

Production build 0.71.5 2024