[Glitch] Improve accessibility of server rules list in sign-up flow

Port 380b898d0d90da1d73db776243a24f0f4ac2a654 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/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) {
+  if (listItem) {
-    return;
+    toggleRuleHint(listItem);
-  }
-
-  if (button.ariaExpanded === 'true') {
-    button.ariaExpanded = 'false';
-  } else {
-    button.ariaExpanded = 'true';
   }
 });
 

app/javascript/flavours/glitch/styles/mastodon/about.scss

@@ -34,34 +34,6 @@ $fluid-breakpoint: $maximum-width + 20px;
     counter-increment: list-counter;
     min-height: 4ch;
 
-    button {
-      background: transparent;
-      border: 0;
-      padding: 0;
-      margin: 0;
-      text-align: start;
-      font: inherit;
-
-      &:hover,
-      &:focus,
-      &:active {
-        background: transparent;
-      }
-
-      &[aria-expanded='false'] .rules-list__hint {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-
-        @supports (-webkit-line-clamp: 2) {
-          display: -webkit-box;
-          -webkit-line-clamp: 2;
-          -webkit-box-orient: vertical;
-          white-space: normal;
-        }
-      }
-    }
-
     &::before {
       content: counter(list-counter);
       position: absolute;
@@ -91,6 +63,48 @@ $fluid-breakpoint: $maximum-width + 20px;
     font-size: 14px;
     font-weight: 400;
     color: var(--color-text-secondary);
+
+    // Giving this a focus outline as the hint
+    // will be focused when toggling the full hint
+    &:focus-visible {
+      outline: var(--outline-focus-default);
+      outline-offset: 2px;
+    }
+  }
+
+  &__toggle-button {
+    position: relative;
+    display: inline-flex;
+    vertical-align: -0.25em;
+    border: none;
+    border-radius: 4px;
+    color: var(--color-text-primary);
+    background: var(--color-bg-secondary);
+
+    &[hidden] {
+      display: none;
+    }
+
+    .icon {
+      width: 1lh;
+      height: 1lh;
+    }
+
+    &:hover {
+      background: var(--color-bg-tertiary);
+    }
+
+    &:focus-visible {
+      outline: var(--outline-focus-default);
+      outline-offset: 2px;
+    }
+
+    &::before {
+      // Increase clickable size
+      content: '';
+      position: absolute;
+      inset: -12px;
+    }
   }
 }
 

app/javascript/flavours/glitch/styles/mastodon/reset.scss

@@ -113,7 +113,7 @@ body {
 
 ol,
 ul {
-  list-style: none;
+  list-style-type: none;
 }
 
 blockquote,