orcs-design-system 2.1.19 → 2.1.20

package/es/components/Header/index.js

@@ -344,6 +344,7 @@ var MobileNavToggle = styled("input").withConfig({
   return css({
     opacity: "0",
     position: "absolute",
+    visibility: "hidden",
     margin: 0,
     zIndex: 0,
     width: 0,
@@ -543,6 +544,8 @@ export default function Header(_ref) {
   }, appSwitcher && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Switcher, {
     title: "Switch to...",
     onClick: onToggle,
+    "aria-role": "navigation",
+    "aria-label": "Toggle workspace and app switcher menu",
     ref: switcherRef
   }, /*#__PURE__*/React.createElement(SwitcherTopLeft, null), /*#__PURE__*/React.createElement(SwitcherTopMiddle, null), /*#__PURE__*/React.createElement(SwitcherTopRight, null), /*#__PURE__*/React.createElement(SwitcherMiddleLeft, null), /*#__PURE__*/React.createElement(SwitcherMiddleMiddle, null), /*#__PURE__*/React.createElement(SwitcherMiddleRight, null), /*#__PURE__*/React.createElement(SwitcherBottomLeft, null), /*#__PURE__*/React.createElement(SwitcherBottomMiddle, null), /*#__PURE__*/React.createElement(SwitcherBottomRight, null)), /*#__PURE__*/React.createElement(AppsMenu, {
     lightAppSwitcher: lightAppSwitcher,
@@ -593,7 +596,9 @@ export default function Header(_ref) {
     theme: theme
   }, /*#__PURE__*/React.createElement(Hamburger, {
     id: "hamburger-menu-icon"
-  })))), /*#__PURE__*/React.createElement(MobileNavMenu, null, /*#__PURE__*/React.createElement(Box, {
+  })))), /*#__PURE__*/React.createElement(MobileNavMenu, {
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement(Box, {
     m: "s"
   }, /*#__PURE__*/React.createElement(Box, {
     borderBottomWidth: 1,

package/es/components/Toggle/index.js

@@ -16,7 +16,9 @@ var Input = styled.input.attrs({
 }).withConfig({
   displayName: "Toggle__Input",
   componentId: "f6l22k-1"
-})(["opacity:0;position:absolute;margin:0;z-index:-1;width:0;height:0;pointer-events:none;&:focus{+ label{box-shadow:", ";}}:checked{+ label{background:", ";&:after{left:calc(100% - 3px);transform:translateX(-100%);}}&:focus{+ label{box-shadow:", ";}}}"], function (props) {
+})(["opacity:0;position:absolute;visibility:", ";margin:0;z-index:-1;width:0;height:0;pointer-events:none;&:focus{+ label{box-shadow:", ";}}:checked{+ label{background:", ";&:after{left:calc(100% - 3px);transform:translateX(-100%);}}&:focus{+ label{box-shadow:", ";}}}"], function (props) {
+  return props.srHide ? "hidden" : "visible";
+}, function (props) {
   return themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.black30")(props);
 }, function (props) {
   return themeGet("colors.success")(props);
@@ -73,14 +75,16 @@ export default function Toggle(_ref) {
       label = _ref.label,
       checked = _ref.checked,
       disabled = _ref.disabled,
-      props = _objectWithoutProperties(_ref, ["inverted", "id", "small", "theme", "label", "checked", "disabled"]);
+      srHide = _ref.srHide,
+      props = _objectWithoutProperties(_ref, ["inverted", "id", "small", "theme", "label", "checked", "disabled", "srHide"]);
 
   var component = /*#__PURE__*/React.createElement(Group, {
     inverted: inverted
   }, /*#__PURE__*/React.createElement(Input, _extends({
     id: id,
     checked: checked,
-    disabled: disabled
+    disabled: disabled,
+    srHide: srHide
   }, props)), /*#__PURE__*/React.createElement(Item, {
     htmlFor: id,
     small: small,
@@ -114,6 +118,9 @@ Toggle.propTypes = {
   /** Makes toggle and label smaller. */
   small: PropTypes.bool,
 
+  /** Hides toggle from screen-reader. Only to be used when toggle alters visual presentation, not functional. */
+  srHide: PropTypes.bool,
+
   /** Specifies the theme for component design */
   theme: PropTypes.object
 };
@@ -176,6 +183,13 @@ Toggle.__docgenInfo = {
       "required": false,
       "description": "Applies disabled attribute and styles"
     },
+    "srHide": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Hides toggle from screen-reader. Only to be used when toggle alters visual presentation, not functional."
+    },
     "theme": {
       "type": {
         "name": "object"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "2.1.19",
+  "version": "2.1.20",
   "description": "Orchestrated's Design System, aka: ORCS",
   "keywords": [
     "design",