From 93c05bc006390a5ae865ef168940b3d8632c38b8 Mon Sep 17 00:00:00 2001 From: Alla Doroshkevych Date: Wed, 3 Apr 2024 17:31:08 -0400 Subject: [PATCH] Stopped adding aria-expanded attribute to the disclosing node. (#2121) --- packages/terra-slide-panel/CHANGELOG.md | 3 ++ packages/terra-slide-panel/src/SlidePanel.jsx | 2 -- .../tests/wdio/slide-panel-spec.js | 32 ++----------------- 3 files changed, 5 insertions(+), 32 deletions(-) diff --git a/packages/terra-slide-panel/CHANGELOG.md b/packages/terra-slide-panel/CHANGELOG.md index 922d4ab03f9..ad09904859b 100644 --- a/packages/terra-slide-panel/CHANGELOG.md +++ b/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 diff --git a/packages/terra-slide-panel/src/SlidePanel.jsx b/packages/terra-slide-panel/src/SlidePanel.jsx index b66c765456f..fcbc45ed108 100644 --- a/packages/terra-slide-panel/src/SlidePanel.jsx +++ b/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; } } diff --git a/packages/terra-slide-panel/tests/wdio/slide-panel-spec.js b/packages/terra-slide-panel/tests/wdio/slide-panel-spec.js index 77228ba8e37..d3370f13a2b 100644 --- a/packages/terra-slide-panel/tests/wdio/slide-panel-spec.js +++ b/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,8 +82,6 @@ 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(); @@ -95,16 +89,11 @@ Terra.describeViewports('Slide panel', ['large'], () => { 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(); });