Add aria-expand attribute to Popover (#8)

Co-authored-by: Ray Lee <[email protected]>
collectionspace · Apr 24, 2024 · f8160fa · f8160fa
1 parent 3b16a0c
commit f8160fa
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 0 deletions.
diff --git a/src/components/Popover.jsx b/src/components/Popover.jsx
@@ -154,9 +154,14 @@ export default class Popover extends Component {
       header,
     } = this.props;
 
+    const {
+      open,
+    } = this.state;
+
     return (
       <button
         type="button"
+        aria-expanded={open}
         onClick={this.handleHeaderClick}
         onKeyDown={this.handleHeaderKeyDown}
         onMouseEnter={this.handleHeaderMouseEnter}

diff --git a/test/specs/components/Popover.spec.jsx b/test/specs/components/Popover.spec.jsx
@@ -41,6 +41,7 @@ describe('Popover', () => {
     );
 
     this.container.querySelector('button').textContent.should.equal('Header');
+    this.container.querySelector('button').ariaExpanded.should.equal('false');
   });
 
   it('should open when mouse enters the header', function test() {
@@ -66,6 +67,7 @@ describe('Popover', () => {
     return new Promise((resolve) => {
       window.setTimeout(() => {
         this.container.querySelectorAll('span').length.should.equal(2);
+        this.container.querySelector('button').ariaExpanded.should.equal('true');
         resolve();
       }, 1000);
     });