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,14 +121,17 @@ const SideNav = React.forwardRef(function SideNav(props, ref) {
     eventHandlers.onMouseLeave = () => handleToggle(false, false);
   }
 
+  const isSideNavCollapsed = useMatchMedia(`(max-width: 1055px)`);
+  const ariaHidden = expanded === false && isSideNavCollapsed;
+
   return (
     <>
       {isFixedNav ? null : (
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
         <div className={overlayClassName} onClick={onOverlayClick} />
       )}
       <nav
-        aria-hidden={!expanded}
+        aria-hidden={ariaHidden}
         ref={ref}
         className={`${prefix}--side-nav__navigation ${className}`}
         {...accessibilityLabel}

packages/react/src/components/UIShell/__tests__/SideNav-test.js

@@ -20,6 +20,20 @@ describe('SideNav', () => {
     };
   });
 
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: jest.fn().mockImplementation((query) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: jest.fn(), // deprecated
+      removeListener: jest.fn(), // deprecated
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+      dispatchEvent: jest.fn(),
+    })),
+  });
+
   afterEach(() => {
     wrapper && wrapper.unmount();
   });

packages/react/src/components/UIShell/__tests__/__snapshots__/SideNav-test.js.snap

@@ -14,7 +14,7 @@ exports[`SideNav should render 1`] = `
     className="bx--side-nav__overlay"
   />
   <nav
-    aria-hidden={true}
+    aria-hidden={false}
     aria-label="Navigation"
     className="bx--side-nav__navigation bx--side-nav bx--side-nav--ux"
     onBlur={[Function]}

packages/react/src/internal/__tests__/useMatchMedia-test.js

@@ -0,0 +1,120 @@
+/**
+ * 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 { render } from '@testing-library/react';
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import { useMatchMedia } from '../useMatchMedia';
+
+describe('useMatchMedia', () => {
+  let Browser;
+  let listeners;
+
+  beforeEach(() => {
+    listeners = new Set();
+    Browser = {
+      width: 640,
+      setDimensions(width) {
+        Browser.width = width;
+
+        for (const { eventType, listener, match } of listeners) {
+          if (eventType === 'change') {
+            listener({
+              matches: match(),
+            });
+          }
+        }
+      },
+    };
+
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      value: jest.fn().mockImplementation((query) => {
+        const MIN_WIDTH_REGEX = /\(min-width: (\d+)px\)/;
+        const [_match, rawWidth] = query.match(MIN_WIDTH_REGEX);
+        const width = parseInt(rawWidth, 10);
+
+        function match() {
+          return Browser.width >= width;
+        }
+
+        return {
+          matches: match(),
+          media: query,
+          onchange: jest.fn(),
+          addListener: jest.fn(),
+          removeListener: jest.fn(),
+          addEventListener: (eventType, listener) => {
+            listeners.add({
+              eventType,
+              listener,
+              match,
+            });
+          },
+          removeEventListener: jest.fn(),
+          dispatchEvent: jest.fn(),
+        };
+      }),
+    });
+  });
+
+  afterEach(() => {
+    listeners.clear();
+    delete window.matchMedia;
+  });
+
+  it('should return true if mediaQueryList matches', () => {
+    Browser.setDimensions(768);
+
+    let matches;
+
+    function Test() {
+      matches = useMatchMedia('(min-width: 768px)');
+      return null;
+    }
+
+    render(<Test />);
+    expect(matches).toBe(true);
+  });
+
+  it('should keep state in sync when mediaQueryString is changed', () => {
+    Browser.setDimensions(768);
+
+    let matches;
+
+    function Test(props) {
+      matches = useMatchMedia(props.query);
+      return null;
+    }
+
+    const { rerender } = render(<Test query="(min-width: 768px)" />);
+    expect(matches).toBe(true);
+
+    rerender(<Test query="(min-width: 900px)" />);
+    expect(matches).toBe(false);
+  });
+
+  it('should update the match value if the query no longer applies', () => {
+    Browser.setDimensions(640);
+
+    let matches = null;
+
+    function TestComponent() {
+      matches = useMatchMedia('(min-width: 640px)');
+      return null;
+    }
+
+    render(<TestComponent />);
+    expect(matches).toBe(true);
+
+    act(() => {
+      Browser.setDimensions(320);
+    });
+
+    expect(matches).toBe(false);
+  });
+});

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 './environment';
+
+export function useMatchMedia(mediaQueryString) {
+  const [matches, setMatches] = useState(() => {
+    if (canUseDOM) {
+      const mediaQueryList = window.matchMedia(mediaQueryString);
+      return mediaQueryList.matches;
+    }
+    return false;
+  });
+
+  useEffect(() => {
+    function listener(event) {
+      setMatches(event.matches);
+    }
+
+    const mediaQueryList = window.matchMedia(mediaQueryString);
+    mediaQueryList.addEventListener('change', listener);
+
+    // Make sure the media query list is in sync with the matches state
+    setMatches(mediaQueryList.matches);
+
+    return () => {
+      mediaQueryList.removeEventListener('change', listener);
+    };
+  }, [mediaQueryString]);
+
+  return matches;
+}