Stopped adding aria-expanded attribute to the disclosing node.

packages/terra-slide-panel/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Changed
+  * Stopped adding `aria-expanded` attribute to the disclosing node.
+
 ## 3.48.0 - (March 29, 2024)
 
 * Changed

packages/terra-slide-panel/src/SlidePanel.jsx

@@ -105,7 +105,6 @@ class SlidePanel extends React.Component {
     if (!this.props.isOpen && this.props.isOpen !== prevProps.isOpen) {
       if (this.disclosingNode?.focus) {
         // Return focus to the disclosing element
-        this.disclosingNode.setAttribute('aria-expanded', 'false');
         this.disclosingNode.focus();
         return;
       }
@@ -127,7 +126,6 @@ class SlidePanel extends React.Component {
 
   setDisclosingNode(node) {
     if (node) {
-      node.setAttribute('aria-expanded', 'true');
       this.disclosingNode = node;
     }
   }

packages/terra-slide-panel/tests/wdio/slide-panel-spec.js

@@ -66,14 +66,10 @@ Terra.describeViewports('Slide panel', ['large'], () => {
     it('Opens panel and focuses on panel', () => {
       browser.url('/raw/tests/cerner-terra-framework-docs/slide-panel/slide-panel-toggle');
       const disclosingButton = $('#test-toggle');
-      // the disclosing button should not have aria-expanded property yet
-      expect(disclosingButton.getAttribute('aria-expanded')).toBeFalsy();
       disclosingButton.click();
       $('#test-slide [aria-label="Panel content area"][aria-hidden="false"]').waitForExist();
       browser.pause(150);
       expect($('[aria-label="Panel content area"]').isFocused()).toBeTruthy();
-      // the disclosing button should have aria-expanded property set to true
-      expect(disclosingButton.getAttribute('aria-expanded')).toBe('true');
 
       // On Tab Press focuses on the button inside the panel
       browser.keys(['Tab']);
@@ -86,25 +82,18 @@ Terra.describeViewports('Slide panel', ['large'], () => {
 
       browser.keys(['Tab']);
       const disclosingButton = $('#test-toggle');
-      // the disclosing button should not have aria-expanded property yet
-      expect(disclosingButton.getAttribute('aria-expanded')).toBeFalsy();
       expect(disclosingButton.isFocused()).toBeTruthy();
       browser.keys(['Enter']);
       $('#test-slide [aria-label="Panel content area"][aria-hidden="false"]').waitForExist();
       browser.pause(150);
 
       browser.keys(['Tab']);
       expect($('#focus-button').isFocused()).toBeTruthy();
-      // the disclosing button should have aria-expanded property set to true
-      expect(disclosingButton.getAttribute('aria-expanded')).toBe('true');
 
       browser.keys(['Enter']);
       $('#test-slide [aria-label="Panel content area"][aria-hidden="true"]').waitForExist();
 
       expect($('#test-toggle').isFocused()).toBeTruthy();
-      // the disclosing button should have aria-expanded property set to false
-      expect(disclosingButton.getAttribute('aria-expanded')).toBe('false');
-
       browser.pause(150);
 
       Terra.validates.element('toggle button focused', { selector: '#root' });
@@ -213,15 +202,11 @@ Terra.describeViewports('Slide panel', ['large'], () => {
     it('does not focus SVG when it is the disclosing node', () => {
       browser.url('/raw/tests/cerner-terra-framework-docs/slide-panel/slide-panel-svg-toggle');
       const disclosingElement = $('#test-click-svg');
-      // the disclosing non-focusable element should not have aria-expanded property set
-      expect(disclosingElement.getAttribute('aria-expanded')).toBeFalsy();
       $(disclosingElement).moveTo();
       $(disclosingElement).click();
       $('#test-slide [aria-label="Panel content area"][aria-hidden="false"]').waitForExist();
       browser.keys(['Tab']);
       expect($('#focus-button').isFocused()).toBeTruthy();
-      // the disclosing non-focusable element should not have aria-expanded property set
-      expect(disclosingElement.getAttribute('aria-expanded')).toBeFalsy();
       browser.keys(['Enter']);
 
       expect($('[aria-label="Main content area"]').isFocused()).toBeTruthy();
@@ -231,15 +216,11 @@ Terra.describeViewports('Slide panel', ['large'], () => {
     it('focuses main node when disclosing node has undefined focus', () => {
       browser.url('/raw/tests/cerner-terra-framework-docs/slide-panel/slide-panel-svg-toggle');
       const disclosingElement = $('#test-p-click');
-      // the disclosing non-focusable element should not have aria-expanded property set
-      expect(disclosingElement.getAttribute('aria-expanded')).toBeFalsy();
       disclosingElement.moveTo();
       disclosingElement.click();
       $('#test-slide [aria-label="Panel content area"][aria-hidden="false"]').waitForExist();
       browser.keys(['Tab']);
       expect($('#focus-button').isFocused()).toBeTruthy();
-      // the disclosing non-focusable element should not have aria-expanded property set
-      expect(disclosingElement.getAttribute('aria-expanded')).toBeFalsy();
       browser.keys(['Enter']);
 
       expect($('[aria-label="Main content area"]').isFocused()).toBeTruthy();
@@ -248,35 +229,26 @@ Terra.describeViewports('Slide panel', ['large'], () => {
   });
 
   describe('Slide panel with no mainContent prop passed', () => {
-    it('sets focus and aria-expanded props correctly if disclosing node is a regular button', () => {
+    it('sets focus correctly if disclosing node is a regular button', () => {
       browser.url('/raw/tests/cerner-terra-framework-docs/slide-panel/slide-panel-no-main-content');
       const disclosureButton = $('#mainToggleBtn');
-      // the disclosing button should not have aria-expanded property set
-      expect(disclosureButton.getAttribute('aria-expanded')).toBeFalsy();
       $(disclosureButton).moveTo();
       $(disclosureButton).click();
       $('[aria-label="Panel content area"][aria-hidden="false"]').waitForExist();
       browser.keys(['Tab']);
       expect($('#panelToggleBtn').isFocused()).toBeTruthy();
-      // the disclosing button should have aria-expanded property set
-      expect(disclosureButton.getAttribute('aria-expanded')).toBe('true');
       browser.keys(['Enter']);
       expect(disclosureButton.isFocused()).toBeTruthy();
-      expect(disclosureButton.getAttribute('aria-expanded')).toBe('false');
     });
 
-    it('sets focus and aria-expanded props correctly if disclosing node is not focusable', () => {
+    it('sets focus correctly if disclosing node is not focusable', () => {
       browser.url('/raw/tests/cerner-terra-framework-docs/slide-panel/slide-panel-no-main-content');
       const disclosureElement = $('#mainToggleParagraph');
-      // the disclosing button should not have aria-expanded property set
-      expect(disclosureElement.getAttribute('aria-expanded')).toBeFalsy();
       $(disclosureElement).moveTo();
       $(disclosureElement).click();
       $('[aria-label="Panel content area"][aria-hidden="false"]').waitForExist();
       browser.keys(['Tab']);
       expect($('#panelToggleBtn').isFocused()).toBeTruthy();
-      // the disclosing button should not have aria-expanded property set
-      expect(disclosureElement.getAttribute('aria-expanded')).toBeFalsy();
       browser.keys(['Enter']);
       expect(disclosureElement.isFocused()).toBeFalsy();
     });