<commit_before>import React, { useEffect, useState, useRef } from 'react';
import PropTypes from 'prop-types';

import { isEscape } from 'platform/utilities/accessibility';
import prefixUtilityClasses from 'platform/utilities/prefix-utility-classes';
import { focusElement } from 'platform/utilities/ui';

import ProfileSubNavItems from './ProfileSubNavItems';

const menuButtonClasses = prefixUtilityClasses([
  'font-size--base',
  'font-family--sans',
  'display--inline',
]).join(' ');

const ProfileMobileSubNav = ({ isLOA3, isInMVI, routes }) => {
  // refs used so we can easily set focus
  const closeMenuButton = useRef(null);
  const openMenuButton = useRef(null);

  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [focusTriggerButton, setFocusTriggerButton] = useState(false);

  // on first render, set the focus to the h4
  useEffect(() => {
    focusElement('#mobile-subnav-header');
  }, []);

  // When the menu is open trap keyboard focus in the menu itself so keyboard
  // users can't tab their way out of the menu and onto the main page behind the
  // menu. When the menu closes, revert those changes.
  useEffect(
    () => {
      const closeOnEscape = e => {
        if (isEscape(e)) {
          e.preventDefault();
          // close menu and set focus to the trigger button
          setIsMenuOpen(false);
          setFocusTriggerButton(true);
        }
      };
      if (isMenuOpen) {
        document.addEventListener('keydown', closeOnEscape);
        closeMenuButton.current.focus();
      } else {
        document.removeEventListener('keydown', closeOnEscape);
        // Only set the focus on the menu trigger button if the call to the
        // `closeSideNav` action creator passed in the `focusTriggerButton`
        // argument
        if (focusTriggerButton) {
          openMenuButton.current.focus();
          setFocusTriggerButton(false);
        }
      }
    },
    [isMenuOpen, focusTriggerButton],
  );

  return (
    <div className="mobile-nav">
      <nav aria-label="secondary" className="menu-wrapper">
        <h4 tabIndex="-1" className={menuButtonClasses}>
          {!isMenuOpen && (
            <button
              ref={openMenuButton}
              className="open-menu"
              type="button"
              onClick={() => setIsMenuOpen(true)}
            >
              <strong id="mobile-subnav-header">Profile menu</strong>
              <i className="fa fa-bars" aria-hidden="true" role="img" />
            </button>
          )}
        </h4><commit_msg>fix nested interactive controls (#18609)<commit_after>import React, { useEffect, useState, useRef } from 'react';
import PropTypes from 'prop-types';

import { isEscape } from 'platform/utilities/accessibility';
import prefixUtilityClasses from 'platform/utilities/prefix-utility-classes';
import { focusElement } from 'platform/utilities/ui';

import ProfileSubNavItems from './ProfileSubNavItems';

const menuButtonClasses = prefixUtilityClasses([
  'font-size--base',
  'font-family--sans',
  'display--inline',
]).join(' ');

const ProfileMobileSubNav = ({ isLOA3, isInMVI, routes }) => {
  // refs used so we can easily set focus
  const closeMenuButton = useRef(null);
  const openMenuButton = useRef(null);

  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [focusTriggerButton, setFocusTriggerButton] = useState(false);

  // on first render, set the focus to the h4
  useEffect(() => {
    focusElement('#mobile-subnav-header');
  }, []);

  // When the menu is open trap keyboard focus in the menu itself so keyboard
  // users can't tab their way out of the menu and onto the main page behind the
  // menu. When the menu closes, revert those changes.
  useEffect(
    () => {
      const closeOnEscape = e => {
        if (isEscape(e)) {
          e.preventDefault();
          // close menu and set focus to the trigger button
          setIsMenuOpen(false);
          setFocusTriggerButton(true);
        }
      };
      if (isMenuOpen) {
        document.addEventListener('keydown', closeOnEscape);
        closeMenuButton.current.focus();
      } else {
        document.removeEventListener('keydown', closeOnEscape);
        // Only set the focus on the menu trigger button if the call to the
        // `closeSideNav` action creator passed in the `focusTriggerButton`
        // argument
        if (focusTriggerButton) {
          openMenuButton.current.focus();
          setFocusTriggerButton(false);
        }
      }
    },
    [isMenuOpen, focusTriggerButton],
  );

  return (
    <div className="mobile-nav">
      <nav aria-label="secondary" className="menu-wrapper">
        <h4 tabIndex="-1" className={menuButtonClasses}>
          {!isMenuOpen && (
            <button
              ref={openMenuButton}
              className="open-menu"
              type="button"
              onClick={() => setIsMenuOpen(true)}
              id="mobile-subnav-header"
            >
              <strong>Profile menu</strong>
              <i className="fa fa-bars" aria-hidden="true" role="img" />
            </button>
          )}
        </h4>
{'fraction_non_alphanumeric': 0.11965645129806754, 'fraction_numerical': 0.002927971891469842, 'mean_word_length': 2.616090331686662, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 31, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5014549', 'n_tokens_mistral': 1416, 'n_tokens_neox': 1414, 'n_words': 383}