diff --git a/package-lock.json b/package-lock.json
index 38542a3dfe7..f8346803291 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -39449,23 +39449,23 @@
}
},
"packages/terra-application-layout": {
- "version": "5.92.0",
+ "version": "5.93.0",
"license": "Apache-2.0",
"dependencies": {
"classnames": "^2.2.5",
"prop-types": "^15.5.8",
"react-router-dom": "^5.0.0",
"terra-application-header-layout": "^3.41.0",
- "terra-application-links": "^6.82.0",
+ "terra-application-links": "^6.83.0",
"terra-application-menu-layout": "^3.32.0",
"terra-application-name": "^3.45.0",
"terra-application-utility": "^2.58.0",
"terra-breakpoints": "^2.19.0",
"terra-icon": "^3.19.0",
- "terra-modal-manager": "^6.76.0",
+ "terra-modal-manager": "^6.77.0",
"terra-navigation-layout": "^5.41.0",
- "terra-navigation-side-menu": "^2.55.0",
- "terra-popup": "^6.81.0",
+ "terra-navigation-side-menu": "^2.56.0",
+ "terra-popup": "^6.82.0",
"terra-theme-context": "^1.9.0"
},
"devDependencies": {
@@ -39483,7 +39483,7 @@
}
},
"packages/terra-application-links": {
- "version": "6.82.0",
+ "version": "6.83.0",
"license": "Apache-2.0",
"dependencies": {
"classnames": "^2.2.5",
@@ -39491,7 +39491,7 @@
"prop-types": "^15.5.8",
"resize-observer-polyfill": "^1.4.1",
"terra-icon": "^3.19.0",
- "terra-popup": "^6.81.0",
+ "terra-popup": "^6.82.0",
"terra-theme-context": "^1.9.0"
},
"devDependencies": {
@@ -39535,7 +39535,7 @@
}
},
"packages/terra-application-navigation": {
- "version": "1.83.0",
+ "version": "1.84.0",
"license": "Apache-2.0",
"dependencies": {
"@cerner/terra-docs": "^1.0.0",
@@ -39555,7 +39555,7 @@
"terra-icon": "^3.19.0",
"terra-image": "^3.0.0",
"terra-overlay": "^3.0.0",
- "terra-popup": "^6.81.0",
+ "terra-popup": "^6.82.0",
"terra-theme-context": "^1.9.0",
"terra-visually-hidden-text": "^2.0.0"
},
@@ -39606,7 +39606,7 @@
}
},
"packages/terra-collapsible-menu-view": {
- "version": "6.100.0",
+ "version": "6.101.0",
"license": "Apache-2.0",
"dependencies": {
"classnames": "^2.2.5",
@@ -39618,7 +39618,7 @@
"terra-hyperlink": "^2.61.0",
"terra-icon": "^3.57.1",
"terra-list": "^4.0.0",
- "terra-menu": "^6.95.0",
+ "terra-menu": "^6.96.0",
"terra-mixins": "^1.0.0",
"terra-theme-context": "^1.9.0"
},
@@ -39691,7 +39691,7 @@
}
},
"packages/terra-date-picker": {
- "version": "4.107.0",
+ "version": "4.108.0",
"license": "Apache-2.0",
"dependencies": {
"classnames": "^2.2.5",
@@ -39706,7 +39706,7 @@
"terra-form-field": "^4.5.0",
"terra-form-input": "^4.4.0",
"terra-icon": "^3.19.0",
- "terra-popup": "^6.81.0",
+ "terra-popup": "^6.82.0",
"terra-responsive-element": "^5.0.0",
"terra-theme-context": "^1.9.0",
"terra-visually-hidden-text": "^2.0.0",
@@ -39719,7 +39719,7 @@
}
},
"packages/terra-date-time-picker": {
- "version": "4.115.0",
+ "version": "4.116.0",
"license": "Apache-2.0",
"dependencies": {
"classnames": "^2.2.5",
@@ -39728,13 +39728,13 @@
"prop-types": "^15.5.8",
"terra-abstract-modal": "^3.49.0",
"terra-button": "^3.3.0",
- "terra-date-picker": "^4.107.0",
+ "terra-date-picker": "^4.108.0",
"terra-theme-context": "^1.9.0",
"terra-time-input": "^4.66.0"
},
"devDependencies": {
"terra-form-field": "^4.5.0",
- "terra-modal-manager": "^6.76.0"
+ "terra-modal-manager": "^6.77.0"
},
"peerDependencies": {
"react": "^16.8.5",
@@ -39743,7 +39743,7 @@
}
},
"packages/terra-dialog-modal": {
- "version": "3.111.0",
+ "version": "3.112.0",
"license": "Apache-2.0",
"dependencies": {
"@cerner/terra-docs": "^1.0.0",
@@ -39756,9 +39756,9 @@
"terra-action-footer": "^2.0.0",
"terra-action-header": "^2.0.0",
"terra-button": "^3.3.0",
- "terra-date-picker": "^4.107.0",
+ "terra-date-picker": "^4.108.0",
"terra-form-select": "^6.8.0",
- "terra-popup": "^6.81.0"
+ "terra-popup": "^6.82.0"
},
"peerDependencies": {
"react": "^16.8.5",
@@ -39792,13 +39792,13 @@
}
},
"packages/terra-file-path": {
- "version": "1.18.0",
+ "version": "1.19.0",
"license": "Apache-2.0",
"dependencies": {
"classnames": "^2.2.5",
"keycode-js": "^3.1.0",
"prop-types": "^15.5.8",
- "terra-collapsible-menu-view": "^6.100.0"
+ "terra-collapsible-menu-view": "^6.101.0"
},
"peerDependencies": {
"react": "^16.8.5",
@@ -39807,7 +39807,7 @@
}
},
"packages/terra-folder-tree": {
- "version": "1.3.0",
+ "version": "1.4.0",
"license": "Apache-2.0",
"dependencies": {
"classnames": "^2.2.5",
@@ -39830,7 +39830,7 @@
}
},
"packages/terra-form-validation": {
- "version": "1.109.0",
+ "version": "1.110.0",
"license": "Apache-2.0",
"devDependencies": {
"final-form": "^4.6.0",
@@ -39838,7 +39838,7 @@
"react-final-form": ">=5.0.2 <7.0.0",
"terra-button": "^3.3.0",
"terra-date-input": "^1.56.0",
- "terra-date-picker": "^4.107.0",
+ "terra-date-picker": "^4.108.0",
"terra-form-checkbox": "^4.8.0",
"terra-form-field": "^4.5.0",
"terra-form-input": "^4.4.0",
@@ -39856,11 +39856,11 @@
},
"packages/terra-framework-docs": {
"name": "@cerner/terra-framework-docs",
- "version": "1.85.0",
+ "version": "1.86.0",
"license": "Apache-2.0",
"dependencies": {
"@cerner/terra-docs": "^1.7.0",
- "@cerner/terra-pills": "^1.25.0",
+ "@cerner/terra-pills": "^1.26.0",
"classnames": "^2.2.5",
"legacy-terra-table": "npm:terra-table@^4.36.0",
"prop-types": "^15.5.8",
@@ -39869,17 +39869,17 @@
"terra-arrange": "^3.53.0",
"terra-brand-footer": "^3.12.0",
"terra-button": "^3.3.0",
- "terra-collapsible-menu-view": "^6.100.0",
+ "terra-collapsible-menu-view": "^6.101.0",
"terra-compact-interactive-list": "^1.21.0",
"terra-content-container": "^3.0.0",
"terra-data-grid": "^1.31.0",
"terra-date-input": "^1.56.0",
- "terra-date-picker": "^4.107.0",
- "terra-date-time-picker": "^4.115.0",
+ "terra-date-picker": "^4.108.0",
+ "terra-date-time-picker": "^4.116.0",
"terra-disclosure-manager": "^4.43.0",
"terra-embedded-content-consumer": "^3.43.0",
- "terra-file-path": "^1.18.0",
- "terra-folder-tree": "^1.3.0",
+ "terra-file-path": "^1.19.0",
+ "terra-folder-tree": "^1.4.0",
"terra-form-field": "^4.27.0",
"terra-form-fieldset": "^2.74.0",
"terra-form-input": "^4.4.0",
@@ -39890,21 +39890,21 @@
"terra-icon": "^3.58.0",
"terra-infinite-list": "^3.42.0",
"terra-layout": "^4.40.0",
- "terra-menu": "^6.95.0",
- "terra-modal-manager": "^6.76.0",
+ "terra-menu": "^6.96.0",
+ "terra-modal-manager": "^6.77.0",
"terra-navigation-layout": "^5.41.0",
- "terra-navigation-prompt": "^1.91.0",
- "terra-navigation-side-menu": "^2.55.0",
- "terra-notification-dialog": "^4.47.0",
- "terra-popup": "^6.81.0",
+ "terra-navigation-prompt": "^1.92.0",
+ "terra-navigation-side-menu": "^2.56.0",
+ "terra-notification-dialog": "^4.48.0",
+ "terra-popup": "^6.82.0",
"terra-section-header": "^2.0.0",
"terra-slide-group": "^4.34.0",
"terra-slide-panel": "^3.49.0",
- "terra-slide-panel-manager": "^5.103.0",
+ "terra-slide-panel-manager": "^5.104.0",
"terra-slider": "^1.2.0",
"terra-spacer": "^3.59.0",
"terra-table": "^5.23.0",
- "terra-tabs": "^7.28.1",
+ "terra-tabs": "^7.29.0",
"terra-text": "^4.49.0",
"terra-theme-context": "^1.9.0",
"terra-theme-provider": "^4.16.0",
@@ -39982,7 +39982,7 @@
"integrity": "sha512-H1XoH1URcBOa/rZZWxLxHCtOdVUEev+9vo5YdYhC9tCY4wnybX+VQrCYuy9ubkg69fCBxCONJOSLGfw0DWMffQ=="
},
"packages/terra-menu": {
- "version": "6.95.0",
+ "version": "6.96.0",
"license": "Apache-2.0",
"dependencies": {
"classnames": "^2.2.5",
@@ -39992,7 +39992,7 @@
"terra-content-container": "^3.0.0",
"terra-icon": "^3.19.0",
"terra-list": "^4.0.0",
- "terra-popup": "^6.81.0",
+ "terra-popup": "^6.82.0",
"terra-theme-context": "^1.9.0",
"terra-visually-hidden-text": "^2.36.0",
"uuid": "3.4.0"
@@ -40007,7 +40007,7 @@
}
},
"packages/terra-modal-manager": {
- "version": "6.76.0",
+ "version": "6.77.0",
"license": "Apache-2.0",
"dependencies": {
"classnames": "^2.2.5",
@@ -40044,12 +40044,12 @@
}
},
"packages/terra-navigation-prompt": {
- "version": "1.91.0",
+ "version": "1.92.0",
"license": "Apache-2.0",
"dependencies": {
"classnames": "^2.2.5",
"prop-types": "^15.5.8",
- "terra-notification-dialog": "^4.47.0",
+ "terra-notification-dialog": "^4.48.0",
"uuid": "3.4.0"
},
"peerDependencies": {
@@ -40058,7 +40058,7 @@
}
},
"packages/terra-navigation-side-menu": {
- "version": "2.55.0",
+ "version": "2.56.0",
"license": "Apache-2.0",
"dependencies": {
"classnames": "^2.2.5",
@@ -40077,7 +40077,7 @@
}
},
"packages/terra-notification-dialog": {
- "version": "4.47.0",
+ "version": "4.48.0",
"license": "Apache-2.0",
"dependencies": {
"classnames": "^2.2.5",
@@ -40092,8 +40092,8 @@
"terra-breakpoints": "^2.19.0",
"terra-disclosure-manager": "^4.43.0",
"terra-icon": "^3.19.0",
- "terra-modal-manager": "^6.76.0",
- "terra-popup": "^6.81.0"
+ "terra-modal-manager": "^6.77.0",
+ "terra-popup": "^6.82.0"
},
"peerDependencies": {
"react": "^16.8.5",
@@ -40104,14 +40104,14 @@
},
"packages/terra-pills": {
"name": "@cerner/terra-pills",
- "version": "1.25.0",
+ "version": "1.26.0",
"license": "Apache-2.0",
"dependencies": {
"classnames": "^2.2.5",
"keycode-js": "^3.1.0",
"prop-types": "^15.5.8",
"resize-observer-polyfill": "^1.4.1",
- "terra-popup": "^6.81.0",
+ "terra-popup": "^6.82.0",
"terra-theme-context": "^1.9.0",
"terra-visually-hidden-text": "^2.32.0",
"uuid": "3.4.0"
@@ -40123,7 +40123,7 @@
}
},
"packages/terra-popup": {
- "version": "6.81.0",
+ "version": "6.82.0",
"license": "Apache-2.0",
"dependencies": {
"@cerner/terra-docs": "^1.0.0",
@@ -40139,7 +40139,7 @@
},
"devDependencies": {
"terra-disclosure-manager": "^4.43.0",
- "terra-modal-manager": "^6.76.0"
+ "terra-modal-manager": "^6.77.0"
},
"peerDependencies": {
"react": "^16.8.5",
@@ -40179,7 +40179,7 @@
}
},
"packages/terra-slide-panel-manager": {
- "version": "5.103.0",
+ "version": "5.104.0",
"license": "Apache-2.0",
"dependencies": {
"classnames": "^2.2.5",
@@ -40190,7 +40190,7 @@
"terra-slide-panel": "^3.49.0"
},
"devDependencies": {
- "terra-collapsible-menu-view": "^6.100.0"
+ "terra-collapsible-menu-view": "^6.101.0"
},
"peerDependencies": {
"react": "^16.8.5",
@@ -40237,7 +40237,7 @@
}
},
"packages/terra-tabs": {
- "version": "7.28.1",
+ "version": "7.29.0",
"license": "Apache-2.0",
"dependencies": {
"classnames": "^2.2.5",
@@ -40250,7 +40250,7 @@
"terra-content-container": "^3.0.0",
"terra-divider": "^3.33.0",
"terra-icon": "^3.19.0",
- "terra-menu": "^6.95.0",
+ "terra-menu": "^6.96.0",
"terra-responsive-element": "^5.0.0",
"terra-theme-context": "^1.9.0",
"terra-visually-hidden-text": "^2.36.0",
diff --git a/packages/terra-framework-docs/CHANGELOG.md b/packages/terra-framework-docs/CHANGELOG.md
index 7328ffba487..ce230008ce9 100644
--- a/packages/terra-framework-docs/CHANGELOG.md
+++ b/packages/terra-framework-docs/CHANGELOG.md
@@ -2,6 +2,9 @@
## Unreleased
+* Changed
+ * Updated `terra-slide-panel` example to use `terra-buttons`.
+
## 1.86.0 - (May 8, 2024)
* Changed
diff --git a/packages/terra-framework-docs/src/terra-dev-site/test/slide-panel/SlidePanelMultipleButtonsToggle.test.jsx b/packages/terra-framework-docs/src/terra-dev-site/test/slide-panel/SlidePanelMultipleButtonsToggle.test.jsx
index 7c2a0f8220b..42bdfdf6bfa 100644
--- a/packages/terra-framework-docs/src/terra-dev-site/test/slide-panel/SlidePanelMultipleButtonsToggle.test.jsx
+++ b/packages/terra-framework-docs/src/terra-dev-site/test/slide-panel/SlidePanelMultipleButtonsToggle.test.jsx
@@ -1,6 +1,7 @@
import React from 'react';
import classNames from 'classnames/bind';
import SlidePanel from 'terra-slide-panel';
+import Button from 'terra-button';
import styles from './SlidePanelDocCommon.test.module.scss';
const cx = classNames.bind(styles);
@@ -29,15 +30,15 @@ class SlidePanelDemo extends React.Component {
id="test-slide"
mainContent={(
-
-
-
+
+
+
)}
panelContent={(
-
-
+
+
)}
panelAriaLabel="Panel content area"
diff --git a/packages/terra-slide-panel/CHANGELOG.md b/packages/terra-slide-panel/CHANGELOG.md
index d500a99bc00..c68373846d8 100644
--- a/packages/terra-slide-panel/CHANGELOG.md
+++ b/packages/terra-slide-panel/CHANGELOG.md
@@ -2,6 +2,9 @@
## Unreleased
+* Changed
+ * Updated to find the closest focusable element when disclosing.
+
## 3.49.0 - (April 4, 2024)
* Changed
diff --git a/packages/terra-slide-panel/src/SlidePanel.jsx b/packages/terra-slide-panel/src/SlidePanel.jsx
index fcbc45ed108..e398b22e063 100644
--- a/packages/terra-slide-panel/src/SlidePanel.jsx
+++ b/packages/terra-slide-panel/src/SlidePanel.jsx
@@ -85,6 +85,36 @@ const defaultProps = {
panelSize: 'small',
};
+/**
+ * Checks whether or not the given node should be focusable.
+ * If not focusable, find the closest parent element that is.
+ * If it cannot find a focusable element, return undefined.
+ */
+const findFocusableElement = (node) => {
+ const focusableElementSelector = 'a[href]:not([tabindex=\'-1\']), area[href]:not([tabindex=\'-1\']), input:not([disabled]):not([tabindex=\'-1\']), '
+ + 'select:not([disabled]):not([tabindex=\'-1\']), textarea:not([disabled]):not([tabindex=\'-1\']), button:not([disabled]):not([tabindex=\'-1\']), '
+ + 'iframe:not([tabindex=\'-1\']), [tabindex]:not([tabindex=\'-1\']), [contentEditable=true]:not([tabindex=\'-1\'])';
+
+ const focusableElements = [...document.body.querySelectorAll(`${focusableElementSelector}`)].filter(
+ element => !element.hasAttribute('disabled')
+ && !element.getAttribute('aria-hidden')
+ && !!(element.offsetWidth || element.offsetHeight || element.getClientRects().length)
+ && window.getComputedStyle(element).visibility !== 'hidden'
+ && element.closest('[inert]') === null,
+ );
+
+ let currentNode = node;
+ while (currentNode.parentElement) {
+ if (focusableElements.includes(currentNode)) {
+ return currentNode;
+ }
+
+ currentNode = currentNode.parentElement;
+ }
+
+ return undefined;
+};
+
class SlidePanel extends React.Component {
constructor(props) {
super(props);
@@ -97,7 +127,8 @@ class SlidePanel extends React.Component {
componentDidUpdate(prevProps) {
if (this.props.isOpen && this.props.isOpen !== prevProps.isOpen) {
// Save the disclosing node for returning focus when panel is closed
- this.setDisclosingNode(document.activeElement);
+ const disclosingNode = findFocusableElement(document.activeElement);
+ this.setDisclosingNode(disclosingNode);
this.panelNode.focus();
return;
}
diff --git a/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/slide-panel-spec/toggle_button_focused_with_multiple_buttons.png b/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/slide-panel-spec/toggle_button_focused_with_multiple_buttons.png
index 6f5165af654..d1112595518 100644
Binary files a/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/slide-panel-spec/toggle_button_focused_with_multiple_buttons.png and b/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/slide-panel-spec/toggle_button_focused_with_multiple_buttons.png differ
diff --git a/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/slide-panel-spec/toggle_button_focused_with_multiple_buttons_mouse.png b/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/slide-panel-spec/toggle_button_focused_with_multiple_buttons_mouse.png
index d1919a8989c..d1112595518 100644
Binary files a/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/slide-panel-spec/toggle_button_focused_with_multiple_buttons_mouse.png and b/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/slide-panel-spec/toggle_button_focused_with_multiple_buttons_mouse.png differ
diff --git a/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/slide-panel-spec/toggle_button_focused_with_multiple_buttons.png b/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/slide-panel-spec/toggle_button_focused_with_multiple_buttons.png
index 6f5165af654..c3c38377985 100644
Binary files a/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/slide-panel-spec/toggle_button_focused_with_multiple_buttons.png and b/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/slide-panel-spec/toggle_button_focused_with_multiple_buttons.png differ
diff --git a/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/slide-panel-spec/toggle_button_focused_with_multiple_buttons_mouse.png b/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/slide-panel-spec/toggle_button_focused_with_multiple_buttons_mouse.png
index d1919a8989c..c3c38377985 100644
Binary files a/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/slide-panel-spec/toggle_button_focused_with_multiple_buttons_mouse.png and b/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/slide-panel-spec/toggle_button_focused_with_multiple_buttons_mouse.png differ
diff --git a/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/end.png b/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/end.png
new file mode 100644
index 00000000000..1c2c7faa3b5
Binary files /dev/null and b/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/end.png differ
diff --git a/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/fill.png b/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/fill.png
new file mode 100644
index 00000000000..afb16f871bb
Binary files /dev/null and b/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/fill.png differ
diff --git a/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/fullscreen.png b/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/fullscreen.png
new file mode 100644
index 00000000000..a46b6f921ad
Binary files /dev/null and b/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/fullscreen.png differ
diff --git a/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/large.png b/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/large.png
new file mode 100644
index 00000000000..1b932a26e57
Binary files /dev/null and b/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/large.png differ
diff --git a/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/large_squish.png b/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/large_squish.png
new file mode 100644
index 00000000000..c48f2b4b110
Binary files /dev/null and b/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/large_squish.png differ
diff --git a/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/multiple_panels.png b/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/multiple_panels.png
new file mode 100644
index 00000000000..bec39ba7772
Binary files /dev/null and b/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/multiple_panels.png differ
diff --git a/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/no_fill.png b/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/no_fill.png
new file mode 100644
index 00000000000..08948c9b781
Binary files /dev/null and b/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/no_fill.png differ
diff --git a/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/overlay.png b/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/overlay.png
new file mode 100644
index 00000000000..1c2c7faa3b5
Binary files /dev/null and b/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/overlay.png differ
diff --git a/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/panel_focused.png b/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/panel_focused.png
new file mode 100644
index 00000000000..768f7700ea3
Binary files /dev/null and b/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/panel_focused.png differ
diff --git a/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/panel_with_end_position.png b/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/panel_with_end_position.png
new file mode 100644
index 00000000000..82f35f5b1e8
Binary files /dev/null and b/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/panel_with_end_position.png differ
diff --git a/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/panel_with_start_position.png b/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/panel_with_start_position.png
new file mode 100644
index 00000000000..191a73faf56
Binary files /dev/null and b/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/panel_with_start_position.png differ
diff --git a/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/small.png b/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/small.png
new file mode 100644
index 00000000000..1c2c7faa3b5
Binary files /dev/null and b/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/small.png differ
diff --git a/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/squish.png b/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/squish.png
new file mode 100644
index 00000000000..7988d665928
Binary files /dev/null and b/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/squish.png differ
diff --git a/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/start.png b/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/start.png
new file mode 100644
index 00000000000..04d945ea306
Binary files /dev/null and b/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/start.png differ
diff --git a/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/toggle_and_hidden_styles.png b/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/toggle_and_hidden_styles.png
new file mode 100644
index 00000000000..1319e5e348d
Binary files /dev/null and b/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/toggle_and_hidden_styles.png differ
diff --git a/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/toggle_button_focused.png b/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/toggle_button_focused.png
new file mode 100644
index 00000000000..d539bb25c2b
Binary files /dev/null and b/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/toggle_button_focused.png differ
diff --git a/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/toggle_button_focused_mouse.png b/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/toggle_button_focused_mouse.png
new file mode 100644
index 00000000000..1319e5e348d
Binary files /dev/null and b/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/toggle_button_focused_mouse.png differ
diff --git a/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/toggle_button_focused_with_multiple_buttons.png b/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/toggle_button_focused_with_multiple_buttons.png
new file mode 100644
index 00000000000..bcaf8cf83f9
Binary files /dev/null and b/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/toggle_button_focused_with_multiple_buttons.png differ
diff --git a/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/toggle_button_focused_with_multiple_buttons_mouse.png b/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/toggle_button_focused_with_multiple_buttons_mouse.png
new file mode 100644
index 00000000000..bcaf8cf83f9
Binary files /dev/null and b/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_large/slide-panel-spec/toggle_button_focused_with_multiple_buttons_mouse.png differ
diff --git a/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/slide-panel-spec/toggle_button_focused_with_multiple_buttons.png b/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/slide-panel-spec/toggle_button_focused_with_multiple_buttons.png
index 6f5165af654..3b455ae80dd 100644
Binary files a/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/slide-panel-spec/toggle_button_focused_with_multiple_buttons.png and b/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/slide-panel-spec/toggle_button_focused_with_multiple_buttons.png differ
diff --git a/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/slide-panel-spec/toggle_button_focused_with_multiple_buttons_mouse.png b/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/slide-panel-spec/toggle_button_focused_with_multiple_buttons_mouse.png
index d1919a8989c..3b455ae80dd 100644
Binary files a/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/slide-panel-spec/toggle_button_focused_with_multiple_buttons_mouse.png and b/packages/terra-slide-panel/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/slide-panel-spec/toggle_button_focused_with_multiple_buttons_mouse.png differ