yield a button that controls the expander

tallarium · Feb 21, 2023 · a9618df · a9618df
1 parent 591b870
commit a9618df
Show file tree

Hide file tree

Showing 7 changed files with 111 additions and 60 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@
 - Remove `tabindex="0"`
 - Add `role="region"`
 - Swap `aria-expanded` for `data-expanded` and updated example usage
+- Yield button to control expanding
 - Use function helpers
 - Update animation utils
 

diff --git a/addon/components/expander/button.hbs b/addon/components/expander/button.hbs
@@ -0,0 +1,9 @@
+<button
+  type="button"
+  class="expander__button"
+  aria-controls="{{@aria-controls}}"
+  aria-expanded="{{@aria-expanded}}"
+  ...attributes
+>
+  {{yield}}
+</button>
diff --git a/addon/components/expander/index.hbs b/addon/components/expander/index.hbs
@@ -1,10 +1,16 @@
 {{! template-lint-disable no-unsupported-role-attributes }}
-{{this.registerContent
-  (component
-    this.ExpanderContent onInsert=this.registerContentElement style=this.style
+{{this.registerComponents
+  (hash
+    Button=(component
+      this.ExpanderButton aria-controls=this.id aria-expanded=this.isExpanded
+    )
+    Content=(component
+      this.ExpanderContent onInsert=this.registerContentElement style=this.style
+    )
   )
 }}
 <div
+  id={{this.id}}
   class="expander"
   data-transitioning="{{this.isTransitioning}}"
   data-expanded="{{this.isExpanded}}"

diff --git a/addon/components/expander/index.js b/addon/components/expander/index.js
@@ -1,11 +1,13 @@
 import Component from '@glimmer/component';
 import ExpanderContent from './content';
+import ExpanderButton from './button';
 import { htmlSafe } from '@ember/template';
 import { tracked } from '@glimmer/tracking';
 import { waitFor } from '@ember/test-waiters';
 import { next, scheduleOnce } from '@ember/runloop';
 import { action } from '@ember/object';
 import { task } from 'ember-concurrency';
+import { guidFor } from '@ember/object/internals';
 import { waitForAnimation } from '@zestia/animation-utils';
 const { seal, assign } = Object;
 
@@ -15,18 +17,23 @@ class ExpanderComponent extends Component {
   @tracked renderContent = !!this.args.expanded;
   @tracked isTransitioning = false;
 
+  id = guidFor(this);
+
   _api = {};
   Content = null;
+  Button = null;
   ExpanderContent = ExpanderContent;
+  ExpanderButton = ExpanderButton;
 
-  registerContent = (Content) => {
-    this.Content = Content;
+  registerComponents = (components) => {
+    assign(this, components);
   };
 
   get api() {
     return seal(
       assign(this._api, {
         Content: this.renderContent ? this.Content : null,
+        Button: this.Button,
         contentElement: this.contentElement,
         toggle: this.toggle,
         expand: this.expand,

diff --git a/app/components/expander/content.js b/app/components/expander/content.js
diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs
@@ -7,15 +7,10 @@
 </h4>
 
 <div class="demo">
-  <Expander id="example1" as |expander|>
-    <button
-      type="button"
-      aria-controls="example1"
-      aria-expanded="{{expander.isExpanded}}"
-      {{on "click" expander.toggle}}
-    >
+  <Expander as |expander|>
+    <expander.Button {{on "click" expander.toggle}}>
       Toggle
-    </button>
+    </expander.Button>
 
     <button type="button" {{on "click" this.toggleMore}}>
       Toggle more content
@@ -36,15 +31,10 @@
     Pre-expanded
   </h4>
 
-  <Expander id="example2" @expanded={{true}} as |expander|>
-    <button
-      type="button"
-      aria-controls="example2"
-      aria-expanded="{{expander.isExpanded}}"
-      {{on "click" expander.toggle}}
-    >
+  <Expander @expanded={{true}} as |expander|>
+    <expander.Button {{on "click" expander.toggle}}>
       Toggle
-    </button>
+    </expander.Button>
 
     <expander.Content>
       Hello
@@ -57,25 +47,15 @@
     Nested
   </h4>
 
-  <Expander id="example3" as |expander|>
-    <button
-      type="button"
-      aria-controls="example3"
-      aria-expanded="{{expander.isExpanded}}"
-      {{on "click" expander.toggle}}
-    >
+  <Expander as |expander|>
+    <expander.Button {{on "click" expander.toggle}}>
       Toggle
-    </button>
+    </expander.Button>
     <expander.Content>
-      <Expander id="example4" as |expander|>
-        <button
-          type="button"
-          aria-controls="example4"
-          aria-expanded="{{expander.isExpanded}}"
-          {{on "click" expander.toggle}}
-        >
+      <Expander as |expander|>
+        <expander.Button {{on "click" expander.toggle}}>
           Toggle
-        </button>
+        </expander.Button>
 
         <expander.Content>
           Hello

diff --git a/tests/integration/components/expander-test.js b/tests/integration/components/expander-test.js
@@ -39,12 +39,35 @@ module('expander', function (hooks) {
     assert.dom('.expander').hasAttribute('role', 'region');
   });
 
+  test('it render a button', async function (assert) {
+    assert.expect(2);
+
+    await render(hbs`
+      <Expander as |expander|>
+        <expander.Button />
+      </Expander>
+    `);
+
+    assert.ok(
+      find('.expander')
+        .getAttribute('id')
+        .match(/[\w\d]+/)
+    );
+
+    assert
+      .dom('.expander__button')
+      .hasAttribute('aria-controls', find('.expander').getAttribute('id'));
+  });
+
   test('expanding', async function (assert) {
-    assert.expect(9);
+    assert.expect(11);
 
     await render(hbs`
       <Expander as |expander|>
-        <button type="button" {{on "click" expander.expand}}></button>
+        <expander.Button {{on "click" expander.expand}}>
+          Expand
+        </expander.Button>
+
         <expander.Content>
           <div class="test-internal-height"></div>
         </expander.Content>
@@ -53,14 +76,16 @@ module('expander', function (hooks) {
 
     assert.dom('.expander').hasAttribute('data-expanded', 'false');
     assert.dom('.expander').hasAttribute('data-transitioning', 'false');
+    assert.dom('.expander__button').hasAttribute('aria-expanded', 'false');
     assert.dom('.expander__content').doesNotExist();
 
-    click('button');
+    click('.expander__button');
 
     await waitFor('.expander');
 
     assert.dom('.expander').hasAttribute('data-expanded', 'true');
     assert.dom('.expander').hasAttribute('data-transitioning', 'true');
+    assert.dom('.expander__button').hasAttribute('aria-expanded', 'true');
     assert.dom('.expander__content').exists();
     assert.dom('.expander__content').hasAttribute('style', 'max-height: 10px');
 
@@ -73,11 +98,14 @@ module('expander', function (hooks) {
   });
 
   test('collapsing', async function (assert) {
-    assert.expect(9);
+    assert.expect(11);
 
     await render(hbs`
       <Expander @expanded={{true}} as |expander|>
-        <button type="button" {{on "click" expander.collapse}}></button>
+        <expander.Button {{on "click" expander.collapse}}>
+          Collapse
+        </expander.Button>
+
         <expander.Content>
           <div class="test-internal-height"></div>
         </expander.Content>
@@ -86,15 +114,17 @@ module('expander', function (hooks) {
 
     assert.dom('.expander').hasAttribute('data-expanded', 'true');
     assert.dom('.expander').hasAttribute('data-transitioning', 'false');
+    assert.dom('.expander__button').hasAttribute('aria-expanded', 'true');
     assert.dom('.expander__content').exists();
     assert.dom('.expander__content').hasAttribute('style', '');
 
-    click('button');
+    click('.expander__button');
 
     await waitFor('.expander');
 
     assert.dom('.expander').hasAttribute('data-expanded', 'false');
     assert.dom('.expander').hasAttribute('data-transitioning', 'true');
+    assert.dom('.expander__button').hasAttribute('aria-expanded', 'false');
     assert.dom('.expander__content').hasAttribute('style', 'max-height: 0px');
 
     await waitForAnimation('.expander__content', {
@@ -117,17 +147,20 @@ module('expander', function (hooks) {
         @onCollapsed={{this.handleCollapsed}}
         as |expander|
       >
-        <button type="button" {{on "click" expander.toggle}}></button>
+        <expander.Button {{on "click" expander.toggle}}>
+          Toggle
+        </expander.Button>
+
         <expander.Content>
           Hello World
         </expander.Content>
       </Expander>
     `);
 
-    click('button');
+    click('.expander__button');
 
     await waitUntil(this.midWay);
-    await click('button');
+    await click('.expander__button');
 
     assert.verifySteps(['collapsed']);
   });
@@ -142,7 +175,10 @@ module('expander', function (hooks) {
         @onCollapsed={{this.handleCollapsed}}
         as |expander|
       >
-        <button type="button" {{on "click" expander.toggle}}></button>
+        <expander.Button {{on "click" expander.toggle}}>
+          Toggle
+        </expander.Button>
+
         <expander.Content>
           Hello World
         </expander.Content>
@@ -152,10 +188,10 @@ module('expander', function (hooks) {
     this.set('handleExpanded', () => assert.step('expanded'));
     this.set('handleCollapsed', () => assert.step('collapsed'));
 
-    click('button');
+    click('.expander__button');
 
     await waitUntil(this.midWay);
-    await click('button');
+    await click('.expander__button');
 
     assert.verifySteps(['expanded']);
   });
@@ -177,6 +213,7 @@ module('expander', function (hooks) {
       keys(this.api),
       [
         'Content',
+        'Button',
         'contentElement',
         'toggle',
         'expand',
@@ -214,18 +251,21 @@ module('expander', function (hooks) {
         @onCollapsed={{this.handleCollapsed}}
         as |expander|
       >
-        <button type="button" {{on "click" expander.toggle}}></button>
+        <expander.Button {{on "click" expander.toggle}}>
+          Toggle
+        </expander.Button>
+
         <expander.Content>
           Hello World
         </expander.Content>
       </Expander>
     `);
 
-    await click('button');
+    await click('.expander__button');
 
     assert.verifySteps(['expanded']);
 
-    await click('button');
+    await click('.expander__button');
 
     assert.verifySteps(['collapsed']);
   });
@@ -241,15 +281,18 @@ module('expander', function (hooks) {
         @onCollapsed={{this.handleCollapsed}}
         as |expander|
       >
-        <button type="button" {{on "click" expander.collapse}}></button>
+        <expander.Button {{on "click" expander.collapse}}>
+          Collapse
+        </expander.Button>
+
         <expander.Content>
           Hello World
         </expander.Content>
       </Expander>
     `);
 
-    click('button');
-    await click('button');
+    click('.expander__button');
+    await click('.expander__button');
 
     assert.verifySteps(['collapsed']);
   });
@@ -261,15 +304,18 @@ module('expander', function (hooks) {
 
     await render(hbs`
       <Expander @onExpanded={{this.handleExpanded}} as |expander|>
-        <button type="button" {{on "click" expander.expand}}></button>
+        <expander.Button {{on "click" expander.expand}}>
+          Expand
+        </expander.Button>
+
         <expander.Content>
           Hello World
         </expander.Content>
       </Expander>
     `);
 
-    click('button');
-    await click('button');
+    click('.expander__button');
+    await click('.expander__button');
 
     assert.verifySteps(['expanded']);
   });
@@ -281,7 +327,10 @@ module('expander', function (hooks) {
 
     await render(hbs`
       <Expander @expanded={{true}} @onExpanded={{this.handleExpanded}} as |expander|>
-        <button type="button" {{on "click" expander.expand}}></button>
+        <expander.Button {{on "click" expander.expand}}>
+          Expand
+        </expander.Button>
+
         <expander.Content>
           Hello World
         </expander.Content>