terra-slide-panel - npm Package Compare versions

Comparing version 3.18.0 to 3.19.0

CHANGELOG.md

@@ -7,2 +7,8 @@ Changelog
 
+3.19.0 - (October 30, 2019)
+------------------
+### Added
+* Added `aria-label` to the "Main" and "Panel" containers.
+* Added `mainAriaLabel` and `panelAriaLabel` as optional props.
+
 3.18.0 - (October 16, 2019)
@@ -9,0 +15,0 @@ ------------------

lib/SlidePanel.js

@@ -43,2 +43,12 @@ "use strict";
   /**
+   * String that labels the Panel content area for screen readers.
+   */
+  panelAriaLabel: _propTypes.default.string,
+
+  /**
+   * String that labels the Main content area for screen readers.
+   */
+  mainAriaLabel: _propTypes.default.string,
+
+  /**
    * The component to display in the main content area.
@@ -122,2 +132,4 @@ */
       var _this$props = this.props,
+          panelAriaLabel = _this$props.panelAriaLabel,
+          mainAriaLabel = _this$props.mainAriaLabel,
           mainContent = _this$props.mainContent,
@@ -131,3 +143,3 @@ panelContent = _this$props.panelContent,
           fill = _this$props.fill,
-          customProps = (0, _objectWithoutProperties2.default)(_this$props, ["mainContent", "panelContent", "panelBehavior", "panelPosition", "panelSize", "isFullscreen", "isOpen", "fill"]);
+          customProps = (0, _objectWithoutProperties2.default)(_this$props, ["panelAriaLabel", "mainAriaLabel", "mainContent", "panelContent", "panelBehavior", "panelPosition", "panelSize", "isFullscreen", "isOpen", "fill"]);
       var slidePanelClassNames = cx(['slide-panel', {
@@ -144,2 +156,3 @@ 'is-open': isOpen
         tabIndex: "-1",
+        "aria-label": panelAriaLabel,
         "aria-hidden": !isOpen ? 'true' : 'false',
@@ -152,2 +165,3 @@ ref: this.setPanelNode
         tabIndex: "-1",
+        "aria-label": mainAriaLabel,
         ref: this.mainNode
@@ -154,0 +168,0 @@ }, mainContent);

lib/terra-dev-site/doc/example/DefaultSlidePanel.js

@@ -90,13 +90,2 @@ "use strict";
   (0, _createClass2.default)(DefaultSlidePanel, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, prevState) {
-      if (prevState && !prevState.panelIsOpen) {
-        // Shift focus to button in panel container
-        document.getElementById('panelToggleBtn').focus();
-      } else {
-        // Shift focus to button in main container
-        document.getElementById('mainToggleBtn').focus();
-      }
-    }
-  }, {
     key: "handlePanelToggle",
@@ -103,0 +92,0 @@ value: function handlePanelToggle() {

lib/terra-dev-site/test/slide-panel/SlidePanelToggle.test.js

@@ -82,2 +82,4 @@ "use strict";
         }, "Close panel")),
+        panelAriaLabel: "Panel content area",
+        mainAriaLabel: "Main content area",
         panelSize: "small",
@@ -84,0 +86,0 @@ panelBehavior: "overlay",

package.json

 {
   "name": "terra-slide-panel",
   "main": "lib/SlidePanel.js",
-  "version": "3.18.0",
+  "version": "3.19.0",
   "description": "The Terra SlidePanel component is a progressive disclosure mechanism that allows additional content to be shown and hidden in a variety of ways.",
@@ -45,3 +45,3 @@ "repository": {
   },
-  "gitHead": "1c4d867fa25dd4e64214c7f930df9564dfed3a85"
+  "gitHead": "4d58ab70945f1d446a10b53c30af920d53ebffce"
 }

src/SlidePanel.jsx

@@ -15,2 +15,12 @@ import React from 'react';
   /**
+   * String that labels the Panel content area for screen readers.
+   */
+  panelAriaLabel: PropTypes.string,
+
+  /**
+   * String that labels the Main content area for screen readers.
+   */
+  mainAriaLabel: PropTypes.string,
+
+  /**
    * The component to display in the main content area.
@@ -83,2 +93,4 @@ */
     const {
+      panelAriaLabel,
+      mainAriaLabel,
       mainContent,
@@ -103,3 +115,3 @@ panelContent,
     const panelDiv = (
-      <div className={cx(['panel'])} tabIndex="-1" aria-hidden={!isOpen ? 'true' : 'false'} ref={this.setPanelNode}>
+      <div className={cx(['panel'])} tabIndex="-1" aria-label={panelAriaLabel} aria-hidden={!isOpen ? 'true' : 'false'} ref={this.setPanelNode}>
         {panelContent}
@@ -110,3 +122,3 @@ </div>
     const mainDiv = (
-      <div className={cx('main')} tabIndex="-1" ref={this.mainNode}>
+      <div className={cx('main')} tabIndex="-1" aria-label={mainAriaLabel} ref={this.mainNode}>
         {mainContent}
@@ -113,0 +125,0 @@ </div>

src/terra-dev-site/doc/example/DefaultSlidePanel.jsx

@@ -88,12 +88,2 @@ import React from 'react';
 
-  componentDidUpdate(prevProps, prevState) {
-    if (prevState && !prevState.panelIsOpen) {
-      // Shift focus to button in panel container
-      document.getElementById('panelToggleBtn').focus();
-    } else {
-      // Shift focus to button in main container
-      document.getElementById('mainToggleBtn').focus();
-    }
-  }
-
   handlePanelToggle() {
@@ -100,0 +90,0 @@ this.setState(prevState => ({

src/terra-dev-site/test/slide-panel/SlidePanelToggle.test.jsx

@@ -31,2 +31,4 @@ import React from 'react';
           )}
+          panelAriaLabel="Panel content area"
+          mainAriaLabel="Main content area"
           panelSize="small"
@@ -33,0 +35,0 @@ panelBehavior="overlay"

tests/jest/SlidePanel.test.jsx

@@ -96,2 +96,9 @@ import React from 'react';
 
+it('should render a SlidePanel with panelAriaLabel and mainAriaLabel specified', () => {
+  const slidePanel = <SlidePanel panelAriaLabel="Panel content area" mainAriaLabel="Main content area" />;
+  const wrapper = render(slidePanel);
+
+  expect(wrapper).toMatchSnapshot();
+});
+
 it('should render a SlidePanel with the given extra attributes', () => {
@@ -98,0 +105,0 @@ const slidePanel = (

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

102501

increased by0.69%

Lines of code

1527

increased by0.73%

No dependency changes