Toggling the displaying of the caption

Created on 11 October 2024, 3 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

Production build 0.71.5 2024