react-apiembed - npm Package Compare versions

Comparing version 0.1.7 to 0.1.8

dist/react-apiembed.js

@@ -976,3 +976,6 @@ (function (global, factory) {
 	          client = _props.client,
-	          prismLanguage = _props.prismLanguage;
+	          prismLanguage = _props.prismLanguage,
+	          tabIndex = _props.tabIndex,
+	          passedRef = _props.passedRef,
+	          keypressHandler = _props.keypressHandler;
 	      // loadLanguages([prismLanguage])
@@ -985,3 +988,3 @@
 	      var codeHTML = {
-	        __html: "<div tabindex=\"0\">" + prism.highlight(code, prism.languages[prismLanguage], prismLanguage).replaceAll('<span', '<span role="text"') + "</div>"
+	        __html: "" + prism.highlight(code, prism.languages[prismLanguage], prismLanguage).replaceAll('<span', '<span role="text"')
 	      };
@@ -991,7 +994,8 @@
 	        "pre",
-	        { className: "language-" + this.props.prismLanguage },
-	        React.createElement("code", {
-	          className: "language-" + this.props.prismLanguage,
-	          dangerouslySetInnerHTML: codeHTML
-	        })
+	        { className: "language-" + this.props.prismLanguage, onKeyDown: keypressHandler },
+	        React.createElement(
+	          "code",
+	          { className: "language-" + this.props.prismLanguage },
+	          React.createElement("div", { ref: passedRef, tabIndex: tabIndex, dangerouslySetInnerHTML: codeHTML })
+	        )
 	      );
@@ -1008,4 +1012,7 @@ }
 	  client: PropTypes.string,
-	  showClientInTab: PropTypes.boolean,
-	  prismLanguage: PropTypes.string.isRequired
+	  showClientInTab: PropTypes.bool,
+	  prismLanguage: PropTypes.string.isRequired,
+	  tabIndex: PropTypes.number,
+	  passedRef: PropTypes.func,
+	  keypressHandler: PropTypes.func
 	};
@@ -1025,2 +1032,6 @@
 
+	    _this.setContentRef = function (element, index) {
+	      _this.contentRefs[index] = element;
+	    };
+
 	    _this.clickHandler = _this.clickHandler.bind(_this);
@@ -1033,2 +1044,3 @@ _this.keypressHandler = _this.keypressHandler.bind(_this);
 	    _this.tabRefs = [];
+	    _this.contentRefs = [];
 	    return _this;
@@ -1060,3 +1072,3 @@ }
 	    key: "keypressHandler",
-	    value: function keypressHandler(key, index) {
+	    value: function keypressHandler(key, index, event) {
 	      var targetIndex = index;
@@ -1077,2 +1089,9 @@ var lastIndex = this.props.snippets.length - 1;
 	        }
+	      } else if (key === "Enter") {
+	        this.contentRefs[this.state.activeTab].focus();
+	      } else if (key === "Tab" && event.shiftKey) {
+	        if (index !== 0) {
+	          event.preventDefault();
+	          this.contentRefs[this.state.activeTab].focus();
+	        }
 	      }
@@ -1082,2 +1101,21 @@ this.setState({ active: this.getHarKey(this.props.har) + targetIndex, activeTab: targetIndex });
 	  }, {
+	    key: "contentKeypressHandler",
+	    value: function contentKeypressHandler(key, index, event) {
+	      var targetIndex = index;
+	      var lastIndex = this.props.snippets.length - 1;
+
+	      if (key === "Tab" && !event.shiftKey) {
+	        if (index !== lastIndex) {
+	          event.preventDefault();
+	          targetIndex = index + 1;
+	        }
+	      } else if (key === "Tab" && event.shiftKey) {
+	        if (index !== 0) {
+	          event.preventDefault();
+	          targetIndex = index - 1;
+	        }
+	      }
+	      this.setState({ active: this.getHarKey(this.props.har) + targetIndex, activeTab: targetIndex });
+	    }
+	  }, {
 	    key: "getHarKey",
@@ -1115,4 +1153,4 @@ value: function getHarKey(harObject) {
 	                  "aria-controls": "" + (snippetKey + harKey),
-	                  onKeyUp: function onKeyUp(e) {
-	                    return _this2.keypressHandler(e.nativeEvent.code, index);
+	                  onKeyDown: function onKeyDown(e) {
+	                    return _this2.keypressHandler(e.nativeEvent.code, index, e);
 	                  },
@@ -1151,4 +1189,18 @@ onClick: function onClick() {
 	                "section",
-	                { hidden: !activeTab, role: "tabpanel", id: "" + (snippetKey + harKey), key: index },
-	                React.createElement(CodeSnippet, _extends({ har: har }, snippet))
+	                {
+	                  hidden: !activeTab,
+	                  role: "tabpanel",
+	                  id: "" + (snippetKey + harKey),
+	                  key: index
+	                },
+	                React.createElement(CodeSnippet, _extends({
+	                  tabIndex: activeTab ? 0 : -1,
+	                  har: har,
+	                  passedRef: function passedRef(el) {
+	                    return _this2.setContentRef(el, index);
+	                  },
+	                  keypressHandler: function keypressHandler(e) {
+	                    return _this2.contentKeypressHandler(e.nativeEvent.code, index, e);
+	                  }
+	                }, snippet))
 	              );
@@ -1155,0 +1207,0 @@ })

package.json

 {
   "name": "react-apiembed",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "React api embed component.",
@@ -5,0 +5,0 @@ "files": [

No alert changes

Improved metrics

Total package byte prevSize

67106

increased by2.87%

Lines of code

1054

increased by4.98%

No dependency changes