a11y-after.jsx

// After

import PropTypes from 'prop-types';

const HelpText = (props) => {
  const { currentStep, handleSteps, formCount } = props;
  return (
    <div className="app_navigation" id="app_navigation">
      <div
        tabIndex="0"
        role="button"
        className={`navsec ${currentStep === 1 ? 'active' : ''}`}
        onClick={() => handleSteps(1)}
        onKeyDown={() => handleSteps(1)}
        id="nav-item-first"
      >
        <span>Required Metadata</span>
      </div>
      <div
        tabIndex="0"
        role="link"
        className={`navsec ${currentStep === 2 ? 'active' : ''}`}
        onKeyDown={() => {
          if (formCount >= 1) handleSteps(2);
        }}
        onClick={() => {
          if (formCount >= 1) handleSteps(2);
        }}
      >
        <span>Additional Metadata</span>
      </div>
      <div
        tabIndex="0"
        role="button"
        className={`navsec ${currentStep === 3 ? 'active' : ''}`}
        onKeyDown={() => {
          if (formCount >= 2) handleSteps(3);
        }}
        onClick={() => {
          if (formCount >= 2) handleSteps(3);
        }}
      >
        <span>Resource Upload</span>
      </div>
    </div>
  );
};

HelpText.propTypes = {
  currentStep: PropTypes.number.isRequired,
  formCount: PropTypes.number.isRequired,
  handleSteps: PropTypes.func.isRequired,
};

export default HelpText;