From caa725302322bbd2e0d224c8592c14f0d4af4321 Mon Sep 17 00:00:00 2001
From: Michael Nutt <michael@nuttnet.net>
Date: Wed, 26 Aug 2026 13:03:13 -0500
Subject: [PATCH 1/3] fix(fluid-modal): add aria-modal and stop dangling
 aria-labelledby

The dialog set aria-labelledby unconditionally, so a modal rendered without
a title pointed at an element that never existed and had no accessible name.
Only emit it when a title or header block is present; titleless modals can
pass their own aria-label through ...attributes.
---
 addon/components/fluid-modal.hbs                 |  3 ++-
 tests/integration/components/fluid-modal-test.js | 14 ++++++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/addon/components/fluid-modal.hbs b/addon/components/fluid-modal.hbs
index ea89737..136e2dc 100644
--- a/addon/components/fluid-modal.hbs
+++ b/addon/components/fluid-modal.hbs
@@ -7,8 +7,9 @@
 >
   <div
     role="dialog"
+    aria-modal="true"
     class="flex flex-col max-h-modal"
-    aria-labelledby={{this.titleId}}
+    aria-labelledby={{if (or @title (has-block "header")) this.titleId}}
     ...attributes
     {{focus-trap
       isPaused=@disableFocusTrap
diff --git a/tests/integration/components/fluid-modal-test.js b/tests/integration/components/fluid-modal-test.js
index e9853d2..c12e828 100644
--- a/tests/integration/components/fluid-modal-test.js
+++ b/tests/integration/components/fluid-modal-test.js
@@ -30,6 +30,7 @@ module('Integration | Component | FluidModal', function (hooks) {
 
     const { id } = find('h1');
     assert.dom('[role="dialog"]').hasAria('labelledby', id, 'Dialog is labeled by title element');
+    assert.dom('[role="dialog"]').hasAria('modal', 'true', 'Dialog is marked as modal');
   });
 
   test('rendering without a header or footer', async function (assert) {
@@ -42,6 +43,19 @@ module('Integration | Component | FluidModal', function (hooks) {
     await percySnapshot(assert);
 
     assert.dom('button').hasText('I am a bare modal');
+    assert
+      .dom('[role="dialog"]')
+      .doesNotHaveAttribute('aria-labelledby', 'Does not point at a title that was never rendered');
+  });
+
+  test('labelling a titleless modal from the outside', async function (assert) {
+    await render(hbs`
+      <FluidModal aria-label="Confirm deletion">
+        <button>I am a bare modal</button>
+      </FluidModal>
+    `);
+
+    assert.dom('[role="dialog"]').hasAria('label', 'Confirm deletion');
   });
 
   test('rendering the header in block mode', async function (assert) {

From cdecd8b6b575d3300a1463f3a8a437bc31ffca14 Mon Sep 17 00:00:00 2001
From: Michael Nutt <michael@nuttnet.net>
Date: Wed, 26 Aug 2026 13:03:25 -0500
Subject: [PATCH 2/3] fix(styles): keep the focus ring for keyboard users

Six components dropped the outline unconditionally with no replacement
indicator, at a specificity that beats a consuming app's :focus-visible
baseline. Scope each reset to :focus:not(:focus-visible) so pointer focus
stays clean and keyboard focus stays visible.

Left fluid-input and fluid-text-input alone: they pair the reset with a
designed focus state, and :focus-visible always matches text-entry elements
so the rewrite would be a no-op there.
---
 app/styles/fluid/components/classy-select.scss  | 5 ++++-
 app/styles/fluid/components/fluid-checkbox.scss | 3 ++-
 app/styles/fluid/components/fluid-select.scss   | 4 +++-
 app/styles/fluid/components/input-field.scss    | 5 ++++-
 app/styles/fluid/components/on-off-switch.scss  | 5 ++++-
 app/styles/fluid/components/token-field.scss    | 2 +-
 6 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/app/styles/fluid/components/classy-select.scss b/app/styles/fluid/components/classy-select.scss
index 0f13e00..dea04a9 100644
--- a/app/styles/fluid/components/classy-select.scss
+++ b/app/styles/fluid/components/classy-select.scss
@@ -18,11 +18,14 @@
     -webkit-appearance: textfield;
     padding: 1.5rem 2.5rem 0.5rem 0.7rem;
     border: 0;
-    outline: none;
     width: 100%;
     background: transparent;
     position: relative;
     z-index: 1;
+
+    &:focus:not(:focus-visible) {
+      outline: none;
+    }
   }
 
   svg {
diff --git a/app/styles/fluid/components/fluid-checkbox.scss b/app/styles/fluid/components/fluid-checkbox.scss
index b45b24e..c5fd5b2 100644
--- a/app/styles/fluid/components/fluid-checkbox.scss
+++ b/app/styles/fluid/components/fluid-checkbox.scss
@@ -3,7 +3,8 @@
   box-sizing: border-box;
   display: inline-flex;
 
-  &:focus {
+  // Inert today: the focusable element is the inner `__box` button, not this wrapper.
+  &:focus:not(:focus-visible) {
     outline: none;
   }
 
diff --git a/app/styles/fluid/components/fluid-select.scss b/app/styles/fluid/components/fluid-select.scss
index c515627..091d710 100644
--- a/app/styles/fluid/components/fluid-select.scss
+++ b/app/styles/fluid/components/fluid-select.scss
@@ -75,7 +75,9 @@
   }
 
   &__option {
-    outline: none;
+    &:focus:not(:focus-visible) {
+      outline: none;
+    }
 
     &:hover,
     &--highlighted {
diff --git a/app/styles/fluid/components/input-field.scss b/app/styles/fluid/components/input-field.scss
index a5a38bd..86c0bde 100644
--- a/app/styles/fluid/components/input-field.scss
+++ b/app/styles/fluid/components/input-field.scss
@@ -18,7 +18,10 @@
     @apply shadow-none;
     @apply bg-neutral-100;
     @apply resize-y;
-    outline: none;
+
+    &:focus:not(:focus-visible) {
+      outline: none;
+    }
   }
 
   &.flex-2 {
diff --git a/app/styles/fluid/components/on-off-switch.scss b/app/styles/fluid/components/on-off-switch.scss
index 48ab09d..c01a25b 100644
--- a/app/styles/fluid/components/on-off-switch.scss
+++ b/app/styles/fluid/components/on-off-switch.scss
@@ -6,7 +6,10 @@
   border-radius: 0.9rem;
   border: 0.1rem solid theme('colors.neutral.500');
   transition: all 120ms;
-  outline: none;
+
+  &:focus:not(:focus-visible) {
+    outline: none;
+  }
 
   * {
     pointer-events: none;
diff --git a/app/styles/fluid/components/token-field.scss b/app/styles/fluid/components/token-field.scss
index cca7e63..ec50d10 100644
--- a/app/styles/fluid/components/token-field.scss
+++ b/app/styles/fluid/components/token-field.scss
@@ -39,7 +39,7 @@
     line-height: inherit;
     white-space: nowrap;
 
-    &:focus {
+    &:focus:not(:focus-visible) {
       outline-style: none;
     }
   }

From 821ecd15840b46f2c04537bdff56544d83dc6d5d Mon Sep 17 00:00:00 2001
From: Michael Nutt <michael@nuttnet.net>
Date: Wed, 26 Aug 2026 13:03:35 -0500
Subject: [PATCH 3/3] fix(expanding-list): make the toggle a keyboard-operable
 button

The header and toggle were click-only role="button" elements with no
tabindex and no key handler, so the disclosure could not be operated by
keyboard at all. The toggle is now a real button carrying aria-expanded and
a visually-hidden label; the header drops role="button" and keeps its click
handler as a mouse convenience, since the toggle usually renders inside it
and making both interactive would nest a button in a button.

Adds a storybook story and docs page, which the component never had.
---
 addon/components/fluid-lab/expanding-list.js  |  12 +-
 .../fluid-lab/expanding-list/docs.mdx         |  91 ++++++++++++++
 .../fluid-lab/expanding-list/header.hbs       |   5 +-
 .../expanding-list/index.stories.jsx          | 119 ++++++++++++++++++
 .../fluid-lab/expanding-list/toggle.hbs       |  14 ++-
 .../fluid-lab/expanding-list/toggle.js        |   2 +
 .../components/fluid-lab/expanding-list.scss  |   6 +
 .../components/expanding-list-test.js         |  32 +++++
 8 files changed, 275 insertions(+), 6 deletions(-)
 create mode 100644 addon/components/fluid-lab/expanding-list/docs.mdx
 create mode 100644 addon/components/fluid-lab/expanding-list/index.stories.jsx

diff --git a/addon/components/fluid-lab/expanding-list.js b/addon/components/fluid-lab/expanding-list.js
index 455ca05..166abb1 100644
--- a/addon/components/fluid-lab/expanding-list.js
+++ b/addon/components/fluid-lab/expanding-list.js
@@ -15,7 +15,7 @@ import { action } from '@ember/object';
  * <FluidLab::ExpandingList as |list| >
  *   <list.Header>
  *     <h1>Ice Cream Flavors</h1>
- *     <list.Toggle />
+ *     <list.Toggle @label="Ice cream flavors" />
  *   </list.Header>
  *
  *   <list.Content>
@@ -28,6 +28,16 @@ import { action } from '@ember/object';
  * </FluidLab::ExpandingList>
  * ```
  *
+ * ## Accessibility
+ *
+ * `list.Toggle` is the keyboard-operable control — it renders a `<button>` carrying
+ * `aria-expanded`. Always render one; `list.Header`'s own click handler is a mouse
+ * convenience and is not reachable by keyboard, so a header without a toggle gives
+ * keyboard and screen-reader users no way to expand the list.
+ *
+ * The chevron is decorative, so pass `@label` to name the button whenever a page has
+ * more than one list. It falls back to a generic "Toggle section".
+ *
  * For more advanced usage, the `expanded` property and `onChange`
  * actions are also yielded out of the component to be made available to
  * components rendered inside the `expanding-list`.
diff --git a/addon/components/fluid-lab/expanding-list/docs.mdx b/addon/components/fluid-lab/expanding-list/docs.mdx
new file mode 100644
index 0000000..45db081
--- /dev/null
+++ b/addon/components/fluid-lab/expanding-list/docs.mdx
@@ -0,0 +1,91 @@
+import { Story } from "@storybook/addon-docs";
+
+# Expanding List
+
+A contextual accordion. It yields three subcomponents — `list.Header`, `list.Toggle`
+and `list.Content` — plus the `expanded` property and an `onChange` action for DDAU use.
+
+#### Default
+
+<Story id="components-fluid-lab-expanding-list--default" height="150px"/>
+
+```hbs
+<FluidLab::ExpandingList as |list|>
+  <list.Header class='flex items-center'>
+    <list.Toggle @label='Ice cream flavors' />
+
+    <h6>Ice Cream Flavors</h6>
+  </list.Header>
+
+  <list.Content>
+    <ul>
+      <li>Chocolate</li>
+      <li>Vanilla</li>
+      <li>Mango</li>
+    </ul>
+  </list.Content>
+</FluidLab::ExpandingList>
+```
+
+#### Collapsed
+
+<Story id="components-fluid-lab-expanding-list--collapsed" height="75px"/>
+
+```hbs
+<FluidLab::ExpandingList @expanded={{false}} as |list|>
+  {{! ... }}
+</FluidLab::ExpandingList>
+```
+
+#### Disabled
+
+`@disabled` hides the toggle and stops the header from expanding the list.
+
+<Story id="components-fluid-lab-expanding-list--disabled" height="150px"/>
+
+```hbs
+<FluidLab::ExpandingList @disabled={{true}} as |list|>
+  {{! ... }}
+</FluidLab::ExpandingList>
+```
+
+#### Toggle outside the header
+
+The toggle does not have to be nested in the header — position it as a sibling when the
+layout calls for it.
+
+<Story id="components-fluid-lab-expanding-list--toggle-outside-header" height="75px"/>
+
+```hbs
+<FluidLab::ExpandingList @expanded={{false}} as |list|>
+  <list.Toggle @label='Pizza toppings' class='absolute' />
+
+  <list.Header>
+    <h6 class='pl-8'>Pizza Toppings</h6>
+  </list.Header>
+
+  {{! ... }}
+</FluidLab::ExpandingList>
+```
+
+## Accessibility
+
+**Always render a `list.Toggle`.** It is the only keyboard-operable control — it renders
+a `<button>` carrying `aria-expanded`. `list.Header` has a click handler too, but that is
+a mouse convenience: a header is not focusable, so a list without a toggle cannot be
+expanded by keyboard or reported to a screen reader.
+
+The header is deliberately *not* a button. Because the toggle is usually nested inside it,
+making both interactive would nest a button in a button.
+
+**Pass `@label` whenever a page has more than one list.** The chevron is decorative
+(`aria-hidden`), so the button's accessible name comes from a visually-hidden label that
+falls back to a generic "Toggle section". Below, the first toggle is labelled and the
+second is not — turn on a screen reader and tab between them to hear the difference.
+
+<Story id="components-fluid-lab-expanding-list--labelled-and-unlabelled" height="100px"/>
+
+```hbs
+<list.Toggle @label='Ice cream flavors' />  {{! announces "Ice cream flavors" }}
+<list.Toggle />                             {{! announces "Toggle section" }}
+```
diff --git a/addon/components/fluid-lab/expanding-list/header.hbs b/addon/components/fluid-lab/expanding-list/header.hbs
index 7a83530..b0dfd14 100644
--- a/addon/components/fluid-lab/expanding-list/header.hbs
+++ b/addon/components/fluid-lab/expanding-list/header.hbs
@@ -1,6 +1,9 @@
+{{! Mouse-only convenience. `<list.Toggle>` is the keyboard path, and it usually
+    renders inside this header — making the header interactive too would nest a
+    button in a button. }}
+{{! template-lint-disable no-invalid-interactive }}
 <header
   class="expanding-list-header {{if this.disabled "expanding-list-header__disabled"}}"
-  role="button"
   data-test-fluid-lab-expanding-list-header
   ...attributes
   {{on "click" (stop-propagation this.toggle)}}
diff --git a/addon/components/fluid-lab/expanding-list/index.stories.jsx b/addon/components/fluid-lab/expanding-list/index.stories.jsx
new file mode 100644
index 0000000..36a97b3
--- /dev/null
+++ b/addon/components/fluid-lab/expanding-list/index.stories.jsx
@@ -0,0 +1,119 @@
+import { hbs } from 'ember-cli-htmlbars';
+
+import ExpandingListDocs from './docs.mdx';
+
+export default {
+  title: 'Components/Fluid Lab/Expanding List',
+  parameters: {
+    docs: {
+      page: ExpandingListDocs,
+    },
+    actions: {
+      handles: ['click', 'click .btn'],
+    },
+  },
+};
+
+const NestedToggleTemplate = (args) => ({
+  template: hbs`
+    <FluidLab::ExpandingList @expanded={{expanded}} @disabled={{disabled}} as |list|>
+      <list.Header class='flex items-center'>
+        <list.Toggle @label={{label}} />
+
+        <h6>Ice Cream Flavors</h6>
+      </list.Header>
+
+      <list.Content>
+        <ul class='pl-8'>
+          <li>Chocolate</li>
+          <li>Vanilla</li>
+          <li>Mango</li>
+        </ul>
+      </list.Content>
+    </FluidLab::ExpandingList>
+  `,
+  context: { ...args },
+});
+
+const SiblingToggleTemplate = (args) => ({
+  template: hbs`
+    <FluidLab::ExpandingList @expanded={{expanded}} as |list|>
+      <list.Toggle @label={{label}} class='absolute' />
+
+      <list.Header>
+        <h6 class='pl-8'>Pizza Toppings</h6>
+      </list.Header>
+
+      <list.Content>
+        <ul class='pl-8'>
+          <li>Mushrooms</li>
+          <li>Anchovies</li>
+          <li>Ricotta</li>
+        </ul>
+      </list.Content>
+    </FluidLab::ExpandingList>
+  `,
+  context: { ...args },
+});
+
+const MultipleTemplate = (args) => ({
+  template: hbs`
+    <FluidLab::ExpandingList @expanded={{false}} as |list|>
+      <list.Header class='flex items-center'>
+        <list.Toggle @label='Ice cream flavors' />
+
+        <h6>Ice Cream Flavors</h6>
+      </list.Header>
+
+      <list.Content>
+        <ul class='pl-8'>
+          <li>Chocolate</li>
+        </ul>
+      </list.Content>
+    </FluidLab::ExpandingList>
+
+    <FluidLab::ExpandingList @expanded={{false}} as |list|>
+      <list.Header class='flex items-center'>
+        <list.Toggle />
+
+        <h6>Pizza Toppings</h6>
+      </list.Header>
+
+      <list.Content>
+        <ul class='pl-8'>
+          <li>Mushrooms</li>
+        </ul>
+      </list.Content>
+    </FluidLab::ExpandingList>
+  `,
+  context: { ...args },
+});
+
+export const Default = NestedToggleTemplate.bind({});
+Default.args = {
+  expanded: true,
+  disabled: false,
+  label: 'Ice cream flavors',
+};
+
+export const Collapsed = NestedToggleTemplate.bind({});
+Collapsed.args = {
+  expanded: false,
+  disabled: false,
+  label: 'Ice cream flavors',
+};
+
+export const Disabled = NestedToggleTemplate.bind({});
+Disabled.args = {
+  expanded: true,
+  disabled: true,
+  label: 'Ice cream flavors',
+};
+
+export const ToggleOutsideHeader = SiblingToggleTemplate.bind({});
+ToggleOutsideHeader.args = {
+  expanded: false,
+  label: 'Pizza toppings',
+};
+
+export const LabelledAndUnlabelled = MultipleTemplate.bind({});
diff --git a/addon/components/fluid-lab/expanding-list/toggle.hbs b/addon/components/fluid-lab/expanding-list/toggle.hbs
index 5b25d53..62d8a5e 100644
--- a/addon/components/fluid-lab/expanding-list/toggle.hbs
+++ b/addon/components/fluid-lab/expanding-list/toggle.hbs
@@ -1,12 +1,18 @@
-<div
+<button
+  type="button"
   class="expanding-list-toggle
     {{if this.disabled "expanding-list-toggle__disabled"}}
     {{if this.expanded "expanded"}}
     {{this.position}}"
-  role="button"
+  disabled={{this.disabled}}
+  aria-expanded={{if this.expanded "true" "false"}}
   data-test-fluid-lab-expanding-list-toggle
   ...attributes
   {{on "click" (stop-propagation this.toggle)}}
 >
-  {{svg-jar "icon-dropdown-arrow"}}
-</div>
\ No newline at end of file
+  {{svg-jar "icon-dropdown-arrow" aria-hidden="true"}}
+
+  <span class="sr-only">
+    {{or this.label "Toggle section"}}
+  </span>
+</button>
\ No newline at end of file
diff --git a/addon/components/fluid-lab/expanding-list/toggle.js b/addon/components/fluid-lab/expanding-list/toggle.js
index cbd90ae..9860803 100644
--- a/addon/components/fluid-lab/expanding-list/toggle.js
+++ b/addon/components/fluid-lab/expanding-list/toggle.js
@@ -6,6 +6,8 @@ export default class FluidLabExpandingListToggle extends Component {
   disabled = false;
   position = 'left';
 
+  label = null;
+
   @action
   toggle() {
     this.ontoggle();
diff --git a/app/styles/fluid/components/fluid-lab/expanding-list.scss b/app/styles/fluid/components/fluid-lab/expanding-list.scss
index 5c916b8..d0aaa49 100644
--- a/app/styles/fluid/components/fluid-lab/expanding-list.scss
+++ b/app/styles/fluid/components/fluid-lab/expanding-list.scss
@@ -1,4 +1,10 @@
 .expanding-list-toggle {
+  background: none;
+  border: 0;
+  padding: 0;
+  color: inherit;
+  font: inherit;
+
   text-align: center;
   transition: transform 0.1s linear;
   display: flex;
diff --git a/tests/integration/components/expanding-list-test.js b/tests/integration/components/expanding-list-test.js
index e434e0c..c2d56a4 100644
--- a/tests/integration/components/expanding-list-test.js
+++ b/tests/integration/components/expanding-list-test.js
@@ -65,6 +65,38 @@ module('Integration | component | fluid-lab/expanding-list', function (hooks) {
     assert.dom('[data-test-toggle-content]').exists();
   });
 
+  test('the toggle is a labelled button reporting its expanded state', async function (assert) {
+    await render(hbs`
+      <FluidLab::ExpandingList @expanded={{false}} as |list|>
+        <list.Toggle @label="Ice cream flavors" />
+        <list.Content>
+          <div data-test-toggle-content>
+            Content
+          </div>
+        </list.Content>
+      </FluidLab::ExpandingList>
+    `);
+
+    assert.dom('[data-test-fluid-lab-expanding-list-toggle]').hasTagName('button');
+    assert.dom('[data-test-fluid-lab-expanding-list-toggle]').hasAttribute('type', 'button');
+    assert.dom('[data-test-fluid-lab-expanding-list-toggle]').hasText('Ice cream flavors');
+    assert.dom('[data-test-fluid-lab-expanding-list-toggle]').hasAria('expanded', 'false');
+
+    await click('[data-test-fluid-lab-expanding-list-toggle]');
+
+    assert.dom('[data-test-fluid-lab-expanding-list-toggle]').hasAria('expanded', 'true');
+  });
+
+  test('the toggle falls back to a generic accessible name', async function (assert) {
+    await render(hbs`
+      <FluidLab::ExpandingList as |list|>
+        <list.Toggle />
+      </FluidLab::ExpandingList>
+    `);
+
+    assert.dom('[data-test-fluid-lab-expanding-list-toggle]').hasText('Toggle section');
+  });
+
   test('the toggle expands the content on click when nested inside the header', async function (assert) {
     await render(hbs`
       <FluidLab::ExpandingList @expanded={{false}} as |list|>