Tweaks for JWT auth

src-web/components/core/Label.tsx

@@ -6,21 +6,33 @@ export function Label({
   className,
   optional,
   children,
+  visuallyHidden,
+  otherTags = [],
   ...props
-}: HTMLAttributes<HTMLLabelElement> & { htmlFor: string; optional?: boolean }) {
+}: HTMLAttributes<HTMLLabelElement> & {
+  htmlFor: string;
+  optional?: boolean;
+  otherTags?: string[];
+  visuallyHidden?: boolean;
+}) {
+  const tags = optional ? ['optional', ...otherTags] : otherTags;
   return (
     <label
-      className={classNames(className, 'text-text-subtle whitespace-nowrap flex items-center gap-1')}
+      className={classNames(
+        className,
+        visuallyHidden && 'sr-only',
+        'flex-shrink-0',
+        'text-text-subtle whitespace-nowrap flex items-center gap-1',
+      )}
       htmlFor={htmlFor}
       {...props}
     >
       {children}
-      {optional ? (
-        <>
-          {' '}
-          <span className="text-xs text-text-subtlest">(optional)</span>
-        </>
-      ) : null}
+      {tags.map((tag, i) => (
+        <span key={i} className="text-xs text-text-subtlest">
+          ({tag})
+        </span>
+      ))}
     </label>
   );
 }