Missing required asterisk in Claro
>>> [!note] Migrated issue
<!-- Drupal.org comment -->
<!-- Migrated from issue #3526345. -->
Reported by: [maskedjellybean](https://www.drupal.org/user/2402554)
Related to !8
>>>
<h3 id="summary-problem-motivation">Problem/Motivation</h3>
<p>When using a Draggable Table field widget on a required field, the table header markup for a tabledrag table differs from a the markup seen in Claro and Classy, resulting in a missing required asterisk.</p>
<p>Compare this markup for a required multi-value Autocomplete widget field in Claro where the required asterisk appears as expected:<br>
<img src="https://www.drupal.org/files/issues/2025-05-23/Screenshot%202025-05-23%20at%2011.34.43%E2%80%AFAM.png" alt="Tabledrag thead markup for multi-value Autocomplete widget field in Claro."><br>
To the markup for a required Draggable Table field in Claro where the required asterisk does not appear:<br>
<img src="https://www.drupal.org/files/issues/2025-05-23/Screenshot%202025-05-23%20at%2011.35.12%E2%80%AFAM.png" alt="Tabledrag thead markup for Draggable Table widget field in Claro."></p>
<p>Both use this template:<br>
docroot/themes/contrib/classy/templates/dataset/table.html.twig</p>
<p>In all of Claro's CSS the only styling for required asterisks is this:</p>
<div class="codeblock">
<pre><span style="color: #000000"><span style="color: #0000BB"><?php<br></span><span style="color: #007700">.</span><span style="color: #0000BB">form</span><span style="color: #007700">-</span><span style="color: #0000BB">item__label</span><span style="color: #007700">.</span><span style="color: #0000BB">form</span><span style="color: #007700">-</span><span style="color: #0000BB">required</span><span style="color: #007700">::</span><span style="color: #0000BB">after</span><span style="color: #007700">,<br>.</span><span style="color: #0000BB">fieldset__label</span><span style="color: #007700">.</span><span style="color: #0000BB">form</span><span style="color: #007700">-</span><span style="color: #0000BB">required</span><span style="color: #007700">::</span><span style="color: #0000BB">after </span><span style="color: #007700">{<br> </span><span style="color: #0000BB">display</span><span style="color: #007700">: </span><span style="color: #0000BB">inline</span><span style="color: #007700">-</span><span style="color: #0000BB">block</span><span style="color: #007700">;<br> </span><span style="color: #0000BB">margin</span><span style="color: #007700">-</span><span style="color: #0000BB">inline</span><span style="color: #007700">: </span><span style="color: #0000BB">0.15em</span><span style="color: #007700">;<br> </span><span style="color: #0000BB">content</span><span style="color: #007700">: </span><span style="color: #DD0000">"*"</span><span style="color: #007700">;<br> </span><span style="color: #0000BB">color</span><span style="color: #007700">: var(--</span><span style="color: #0000BB">color</span><span style="color: #007700">-</span><span style="color: #0000BB">maximumred</span><span style="color: #007700">);<br> </span><span style="color: #0000BB">font</span><span style="color: #007700">-</span><span style="color: #0000BB">size</span><span style="color: #007700">: </span><span style="color: #0000BB">0.875rem</span><span style="color: #007700">;<br>}<br></span><span style="color: #0000BB">?></span></span></pre></div>
<p>Which means that unless the Draggable Table <code>thead th</code> contains an element with the classes <code>.form-item__label.form-required</code>, it will be missing the required asterisk.</p>
<h4 id="summary-steps-reproduce">Steps to reproduce</h4>
<h3 id="summary-proposed-resolution">Proposed resolution</h3>
<h3 id="summary-remaining-tasks">Remaining tasks</h3>
<h3 id="summary-ui-changes">User interface changes</h3>
<h3 id="summary-api-changes">API changes</h3>
<h3 id="summary-data-model-changes">Data model changes</h3>
issue