Revert "fix: table rows with breakout trigger are not accessible belo…

…w fold" This reverts commit db338b3.
czabaj · Aug 26, 2024 · 015b0cc · 015b0cc
1 parent db338b3
commit 015b0cc
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 10 deletions.
diff --git a/src/pages/PlacePersonsSetting/PlacePersonsSetting.module.css b/src/pages/PlacePersonsSetting/PlacePersonsSetting.module.css
@@ -1,8 +1,12 @@
 .table {
   --breakout-hover-overlay: hsl(47deg 100% 62% / 0.1);
 }
-.table [role="row"] {
+.table tr {
   position: relative;
+  /* FIX: Safari does not support positioning of <tr> 
+     @see https://github.com/w3c/csswg-drafts/issues/1899
+  */
+  clip-path: inset(0);
 }
 .table :where(td, th) {
   text-align: left;

diff --git a/src/pages/PlacePersonsSetting/PlacePersonsSetting.res b/src/pages/PlacePersonsSetting/PlacePersonsSetting.res
@@ -112,9 +112,7 @@ let make = (~placeId) => {
               <tbody>
                 {personsAll
                 ->Array.map(((personId, person)) => {
-                  /* FIX: Safari does not support relative positioning of <tr>, div[role=row] is a workaround
-                   @see https://github.com/w3c/csswg-drafts/issues/1899 */
-                  <div key=personId role="row">
+                  <tr key=personId>
                     <th scope="row">
                       {React.string(person.name)}
                       <button
@@ -142,7 +140,7 @@ let make = (~placeId) => {
                         format={FormattedCurrency.formatAccounting} value=person.balance
                       />
                     </td>
-                  </div>
+                  </tr>
                 })
                 ->React.array}
               </tbody>

diff --git a/src/pages/PlaceSetting/ChargedKegs.module.css b/src/pages/PlaceSetting/ChargedKegs.module.css
@@ -9,8 +9,12 @@
 .table > * {
   display: contents;
 }
-.table :where(tr, [role="row"]) {
+.table tr {
   position: relative;
+  /* FIX: Safari does not support positioning of <tr> 
+     @see https://github.com/w3c/csswg-drafts/issues/1899
+  */
+  clip-path: inset(0);
   display: grid;
   grid-template-areas: "serial beer volume created price remains";
   grid-template-columns: 5ch 22ch 7ch 12ch 12ch 1fr;

diff --git a/src/pages/PlaceSetting/ChargedKegs.res b/src/pages/PlaceSetting/ChargedKegs.res
@@ -31,9 +31,7 @@ let make = (~chargedKegs: array<Db.kegConverted>, ~onAddNewKeg, ~onKegDetail) =>
           ->Array.map(keg => {
             let kegId = Db.getUid(keg)
             let volume = keg.milliliters
-            /* FIX: Safari does not support relative positioning of <tr>, div[role=row] is a workaround
-             @see https://github.com/w3c/csswg-drafts/issues/1899 */
-            <div key={kegId} role="row">
+            <tr key={kegId}>
               <th scope="row">
                 {React.string(keg.serialFormatted)}
                 <button
@@ -56,7 +54,7 @@ let make = (~chargedKegs: array<Db.kegConverted>, ~onAddNewKeg, ~onKegDetail) =>
               <td>
                 <MeterKeg ariaLabelledby="remaining_th" keg />
               </td>
-            </div>
+            </tr>
           })
           ->React.array}
         </tbody>