Improve accessibility of server rules list in sign-up flow (#38257)

app/javascript/entrypoints/public.tsx

@@ -149,6 +149,8 @@ function loaded() {
     document.querySelector('#user_settings_attributes_default_privacy'),
   );
 
+  truncateRuleHints();
+
   const reactComponents = document.querySelectorAll('[data-component]');
 
   if (reactComponents.length > 0) {
@@ -425,21 +427,61 @@ on('submit', '#registration_new_user,#new_user', () => {
   });
 });
 
+// Truncate long rule hints
+
+const MAX_RULE_HINT_LENGTH = 100;
+
+function truncateRuleHints() {
+  const ruleListItems =
+    document.querySelectorAll<HTMLLIElement>('.rules-list li');
+  if (!ruleListItems.length) return;
+
+  ruleListItems.forEach((item) => {
+    toggleRuleHint(item, true);
+  });
+}
+
+function toggleRuleHint(listItem: HTMLLIElement, isInitialSetup?: boolean) {
+  const hint = listItem.querySelector<HTMLSpanElement>(
+    '.rules-list__hint-text',
+  );
+  if (!hint) return;
+
+  const hintText = hint.innerHTML;
+  const hintToggleButton = listItem.querySelector('button');
+
+  if (hintText.length > MAX_RULE_HINT_LENGTH) {
+    // Store full hint in a data attribute, then truncate it with an '…'
+    hint.dataset.fullHint = hintText;
+    hint.innerHTML = `${hintText.slice(0, MAX_RULE_HINT_LENGTH - 1).trim()}…`;
+
+    if (hintToggleButton) {
+      // Reveal toggle button if needed
+      hintToggleButton.removeAttribute('hidden');
+      hintToggleButton.setAttribute('aria-expanded', 'false');
+    }
+  } else if (!isInitialSetup) {
+    const { fullHint } = hint.dataset;
+    if (fullHint) {
+      // Restore full hint from data attribute, then delete attribute
+      hint.innerHTML = fullHint;
+      delete hint.dataset.fullHint;
+
+      hintToggleButton?.setAttribute('aria-expanded', 'true');
+      hint.parentElement?.focus();
+    }
+  }
+}
+
 on('click', '.rules-list button', ({ target }) => {
   if (!(target instanceof HTMLElement)) {
     return;
   }
 
-  const button = target.closest('button');
+  const listItem = target.closest('li');
 
-  if (!button) {
-    return;
-  }
-
-  if (button.ariaExpanded === 'true') {
-    button.ariaExpanded = 'false';
-  } else {
-    button.ariaExpanded = 'true';
+  if (listItem) {
+    toggleRuleHint(listItem);
   }
 });