Add various attributes to help with testing & CSS selectors (#906)

Author: bpierre

frontend/app/src/comps/ErrorBox/ErrorBox.tsx

@@ -1,9 +1,9 @@
 import type { ReactNode } from "react";
 
-import { css } from "@/styled-system/css";
+import { css, cx } from "@/styled-system/css";
 import { IconChevronDown, useElementSize } from "@liquity2/uikit";
 import { a, useSpring } from "@react-spring/web";
-import { useRef, useState } from "react";
+import { useId, useRef, useState } from "react";
 
 export function ErrorBox({
   children,
@@ -29,19 +29,26 @@ export function ErrorBox({
     },
   });
 
+  const detailsId = useId();
+
   return (
     <section
-      className={css({
-        width: "100%",
-        minWidth: 0,
-        background: "negativeSurface",
-        color: "negative",
-        fontSize: 14,
-        border: "1px solid token(colors.negativeSurfaceBorder)",
-        borderRadius: 8,
-      })}
+      className={cx(
+        "error-box",
+        css({
+          width: "100%",
+          minWidth: 0,
+          background: "negativeSurface",
+          color: "negative",
+          fontSize: 14,
+          border: "1px solid token(colors.negativeSurfaceBorder)",
+          borderRadius: 8,
+        }),
+      )}
     >
       <button
+        aria-expanded={expanded}
+        aria-controls={detailsId}
         onClick={() => setExpanded(!expanded)}
         className={css({
           display: "flex",
@@ -87,6 +94,7 @@ export function ErrorBox({
         </div>
       </button>
       <a.div
+        id={detailsId}
         style={{
           overflow: "hidden",
           willChange: "height",

frontend/app/src/comps/Field/Field.tsx

@@ -20,17 +20,20 @@ type FooterRow = {
 export function Field({
   field,
   footer,
+  id,
   label,
 }: {
   field: ReactNode;
   footer?: FooterRow | FooterRow[];
+  id?: string;
   label?: ReactNode;
 }) {
   if (footer && !Array.isArray(footer)) {
     footer = [footer];
   }
   return (
     <div
+      id={id}
       className={css({
         display: "flex",
         flexDirection: "column",

frontend/app/src/comps/FlowButton/FlowButton.tsx

@@ -31,6 +31,7 @@ export function FlowButton({
     >
       <ConnectWarningBox />
       <Button
+        className="flow-button"
         disabled={disabled || !request}
         label={label ?? "Next: Summary"}
         mode="primary"

frontend/app/src/comps/Positions/PositionCard.tsx

@@ -75,6 +75,7 @@ export function PositionCard({
       onMouseUp={() => setActive(false)}
       className={cx(
         "group",
+        anchorProps.className,
         css({
           position: "relative",
           overflow: "hidden",

frontend/app/src/comps/Positions/PositionCardBorrow.tsx

@@ -58,6 +58,7 @@ export function PositionCardBorrow({
 
   return (
     <PositionCard
+      className="position-card position-card-loan position-card-borrow"
       href={`/loan?id=${branchId}:${troveId}`}
       title={title.join("\n")}
       heading={

frontend/app/src/comps/Positions/PositionCardEarn.tsx

@@ -20,6 +20,7 @@ export function PositionCardEarn({
   const earnPosition = useEarnPosition(branchId, owner ?? null);
   return (
     <PositionCard
+      className="position-card position-card-earn"
       href={token ? `/earn/${token.symbol.toLowerCase()}` : ""}
       heading={[
         <div

frontend/app/src/comps/Positions/PositionCardLeverage.tsx

@@ -49,6 +49,7 @@ export function PositionCardLeverage({
 
   return (
     <PositionCard
+      className="position-card  position-card-loan position-card-leverage"
       href={`/loan?id=${branchId}:${troveId}`}
       heading={[
         <div

frontend/app/src/comps/Positions/PositionCardStake.tsx

@@ -37,6 +37,7 @@ export function PositionCardStake({
   });
   return (
     <PositionCard
+      className="position-card position-card-stake"
       href="/stake"
       heading={[
         <div

frontend/app/src/comps/Screen/ScreenCard.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
 
 import { useBreakpoint } from "@/src/breakpoints";
-import { css } from "@/styled-system/css";
+import { css, cx } from "@/styled-system/css";
 import { LoadingSurface } from "@liquity2/uikit";
 import { a, useSpring } from "@react-spring/web";
 import { useState } from "react";
@@ -12,10 +12,12 @@ const FINAL_CARD_WIDTH = 534;
 
 export function ScreenCard({
   children,
+  className,
   finalHeight,
   mode,
 }: {
   children: ReactNode;
+  className?: string;
   finalHeight?: number;
   mode: "ready" | "loading" | "error";
 }) {
@@ -55,12 +57,15 @@ export function ScreenCard({
 
   return (
     <a.div
-      className={css({
-        flexShrink: 0,
-        display: "flex",
-        justifyContent: "center",
-        flexDirection: "column",
-      })}
+      className={cx(
+        className,
+        css({
+          flexShrink: 0,
+          display: "flex",
+          justifyContent: "center",
+          flexDirection: "column",
+        }),
+      )}
       style={{
         width: compactMode ? "100%" : FINAL_CARD_WIDTH,
         height: spring.containerHeight,

frontend/app/src/screens/AccountScreen/AccountScreen.tsx

@@ -11,7 +11,7 @@ import { CHAIN_ID } from "@/src/env";
 import { fmtnum } from "@/src/formatting";
 import { getBranches } from "@/src/liquity-utils";
 import { useAccount, useBalance } from "@/src/wagmi-utils";
-import { css } from "@/styled-system/css";
+import { css, cx } from "@/styled-system/css";
 import {
   addressesEqual,
   Button,
@@ -175,11 +175,14 @@ function Balance({
 
   return (
     <div
-      className={css({
-        display: "flex",
-        alignItems: "center",
-        gap: 8,
-      })}
+      className={cx(
+        `balance-${tokenSymbol.toLowerCase()}`,
+        css({
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+        }),
+      )}
     >
       <div
         title={`${fmtnum(balance.data, "full")} ${tokenSymbol}`}