Skip to content
This repository has been archived by the owner on May 24, 2024. It is now read-only.

Commit

Permalink
Stopped adding aria-expanded attribute to the disclosing node. (#2121)
Browse files Browse the repository at this point in the history
  • Loading branch information
@adoroshk
adoroshk authored Apr 3, 2024
1 parent 7a086d9 commit 93c05bc
Show file tree
Hide file tree
Showing 3 changed files with 5 additions and 32 deletions.
3 changes: 3 additions & 0 deletions packages/terra-slide-panel/CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@

## Unreleased

* Changed
* Stopped adding `aria-expanded` attribute to the disclosing node.

## 3.48.0 - (March 29, 2024)

* Changed
Expand Down
2 changes: 0 additions & 2 deletions packages/terra-slide-panel/src/SlidePanel.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -127,7 +126,6 @@ class SlidePanel extends React.Component {

setDisclosingNode(node) {
if (node) {
node.setAttribute('aria-expanded', 'true');
this.disclosingNode = node;
}
}
Expand Down
32 changes: 2 additions & 30 deletions packages/terra-slide-panel/tests/wdio/slide-panel-spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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']);
Expand All @@ -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' });
Expand Down Expand Up @@ -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();
Expand All @@ -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();
Expand All @@ -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();
});
Expand Down

0 comments on commit 93c05bc

Please sign in to comment.