Table: Footer-Bereich mit Abstand zum Body

[laske185]

Beschreibung

Um den Abstand zwischen dem Body und dem Footer der Table-Komponente zu ermöglichen, wird das HTML der Komponente angepasst. Im Default-Theme soll dann exemplarisch ein Abstand von rem(1.5) definiert werden.

Lösungsvorschlag

Eine leere Zeile wird im Footer-Bereich hinzugefügt, die durch eine spezifische CSS-Klasse den Abstand definiert. Diese Lösung wird exemplarisch im Default-Theme umgesetzt und kann leicht auf andere Themes übertragen werden.

• HTML-Anpassung in der Komponente:

  • In der Table-Komponente wird im Footer-Bereich eine leere Zeile eingefügt:

    <tr class="foot-spacer" aria-hidden="true"></tr>

  • Die Row ist mit aria-hidden="true" versehen, damit sie von Screen-Readern ignoriert wird.

• CSS-Anpassung im Default-Theme:

  • Im Default-Theme wird die CSS-Klasse .foot-spacer definiert, um den Abstand zum Table-Body zu steuern:

    .foot-spacer {
        height: 1.5rem; /* Beispielwert, der den Abstand festlegt */
    }

  • Dieser Abstand kann je nach Designanforderungen angepasst werden.

Erwartetes Verhalten

Im Default-Theme wird durch die eingefügte leere Zeile und die zugehörige CSS-Klasse ein standardisierter Abstand zwischen dem Body und dem Footer der Tabelle hergestellt. Andere Themes können diese Implementierung übernehmen und bei Bedarf eigene Abstände definieren. Es muss sichergestellt werden, dass die leere Zeile vom Screen-Reader ignoriert wird.

Umsetzung

1. Komponenten-Änderung:

   • In der Table-Komponente wird das HTML-Template um eine leere Zeile im Footer-Bereich ergänzt.
   • <tr class="foot-spacer" aria-hidden="true"></tr>

2. CSS-Anpassung im Default-Theme:

   • Definition und Styling der .foot-spacer-Klasse im Default-Theme, um den Abstand festzulegen.

Akzeptanzkriterien

• Das zugehörige Sample, die das Default-Theme der Table-Komponente verwendet, stellt den Footer mit korrektem Abstand zur restlichen Tabelle dar.
• Der Abstand zwischen dem letzten Eintrag im Table-Body und dem Footer ist durch die leere Zeile korrekt umgesetzt.
• Der Screen-Reader, ignoriert die leere Zeile.

Zusätzliche Informationen

Diese Anpassung stellt sicher, dass der Footer-Abstand in der KoliBri-Table-Komponente an die Designrichtlinien der verschiedenen Styleguides angepasst werden kann.

Verworfener Lösungsansatz

Abbilden über Footer. Mit border-spacing versuchen die Abstände zwischen body und footer zu ermöglichen.

Beispiel

Skizze

<table border="1">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
    <tr aria-hidden="true" class="head-spacer">
      <td colspan="2"></td> <!-- Leere Zeile als Abstandshalter -->
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
    <tr>
      <td>Data 3</td>
      <td>Data 4</td>
    </tr>
  </tbody>
  <tfoot>
    <tr aria-hidden="true" class="foot-spacer">
      <td colspan="2"></td> <!-- Leere Zeile als Abstandshalter -->
    </tr>
    <tr>
      <td>Footer 1</td>
      <td>Footer 2</td>
    </tr>
  </tfoot>
</table>

.foot-spacer,
.head-spacer {
  height: 20px; /* Die Höhe definiert den Abstand zwischen tbody und tfoot */
}

.spacer-row td {
  border: none; /* Entfernt alle Ränder, damit nur der Abstand sichtbar ist */
  padding: 0; /* Entfernt das Padding für eine präzise Steuerung des Abstands */
}

[github-actions]

This issue has been automatically marked as stale and will be closed in 10 days because it has not had recent activity and is much likely outdated. If you think this issue is still relevant and applicable, please post a comment or remove the Stale label.