fix(SideNav): add screen size check for aria-hidden value

packages/react/src/components/UIShell/SideNav.js

@@ -4,13 +4,13 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-
 import React, { useState, useRef } from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { AriaLabelPropType } from '../../prop-types/AriaPropTypes';
 import { CARBON_SIDENAV_ITEMS } from './_utils';
 import { usePrefix } from '../../internal/usePrefix';
+import { useMatchMedia } from '../../internal/useMatchMedia';
 // TO-DO: comment back in when footer is added for rails
 // import SideNavFooter from './SideNavFooter';
 
@@ -121,12 +121,9 @@ const SideNav = React.forwardRef(function SideNav(props, ref) {
     eventHandlers.onMouseLeave = () => handleToggle(false, false);
   }
 
-  function getAriaHiddenValue() {
-    if (expanded === false && window.innerWidth < 1056) {
-      return true;
-    }
-    return false;
-  }
+  const isCollapsedWidth = useMatchMedia(`(max-width: 1055px)`);
+  const ariaHidden = expanded === false && isCollapsedWidth;
+  console.log(ariaHidden);
 
   return (
     <>
@@ -135,7 +132,7 @@ const SideNav = React.forwardRef(function SideNav(props, ref) {
         <div className={overlayClassName} onClick={onOverlayClick} />
       )}
       <nav
-        aria-hidden={getAriaHiddenValue()}
+        aria-hidden={ariaHidden}
         ref={ref}
         className={`${prefix}--side-nav__navigation ${className}`}
         {...accessibilityLabel}

packages/react/src/internal/useMatchMedia.js

@@ -0,0 +1,37 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { useState, useEffect } from 'react';
+import { canUseDOM } from '../../internal/environment';
+
+export function useMatchMedia(mediaQueryString) {
+  const [matches, setMatches] = useState(() => {
+    if (canUseDOM) {
+      const mql = window.matchMedia(mediaQueryString);
+      return mql.matches;
+    }
+    return false;
+  });
+
+  useEffect(() => {
+    function listener() {
+      setMatches(mediaQueryList.matches);
+    }
+
+    const mediaQueryList = window.matchMedia(mediaQueryString);
+    mediaQueryList.addEventListener('change', listener);
+
+    // make sure media query list and matches state are synced
+    setMatches(mediaQueryList.matches);
+
+    return () => {
+      mediaQueryList.removeEventListener('change', listener);
+    };
+  }, [mediaQueryString]);
+
+  return matches;
+}