Refactor the InteractionModeEngine class to be functional

[nataliepina]

Description

The InteractionModeEngine is meant to house the functions to add a className to components which will add styles when active with keyboard navigation. For example, the button components will have an outline when they are navigated with the keyboard only. It is meant to prevent these styles on hover with the mouse.

Acceptance Criteria

Refactor the InteractionModeEngine away from a class. Some discovery will be required here.
Questions to answer:

• Is there a better way to integrate these behaviors?
• Could this be a hook instead?
• Could these functions be broken out?

Overall, how can this be moved away from a class component while retaining its functionality?

Refer to other components to keep formatting consistent. For example, reference the Badge, BadgeButton, or Tabs components.

How to Contribute

Please review the contributing documentation beforehand.

Steps to Contribute:

1. Fork the repository.
2. Clone it to your local system.
3. Create a new branch.
4. Make your changes. Make sure that tests are still passing. To update snapshot tests, run npm run test -- -u and include the updated tests in your commit.
5. Commit your changes. When committing be sure to prefix with the appropriate conventional commit type. For example, refactor: button component.
6. Push up your changes. In GitHub, click the compare & pull request button to begin drafting your pull request.
7. Fill out the pull request form and attach the "ready to review" label when complete.

[manojku1803]

can you assign to me

[nataliepina]

Yes, thanks @manojku1803.

[manojku1803]

What is the meaning of branch formatting?

[manojku1803]

How to do this? Please explain it...

[davidtaing]

@manojku1803, where are you up to?

[manojku1803]

Not know how to do this..
Please help me!
@davidtaing @nataliepina

[davidtaing]

Happy to help, but you need to give me more information.

Where should I start?

Edit: Thinking more about this, I think I should have asked what steps have you done already. Try to create a branch as @mstruebing said below.

[mstruebing]

@manojku1803 your branchname should be something like: <your_initials>/refactor/<component_name>

i.e. in your case: mkp/refactor/interaction-mode-engine

Please let me know if you need more help.

[nataliepina]

Thanks @mstruebing and @davidtaing. The branch naming is more of a suggestion but it is not required. I hope that helps @manojku1803.

We've also improved the How to Contribute steps so this does not seem as much of a requirement. We appreciate your feedback.

[manojku1803]

I think I haven't enough knowledge in it. So I can't understand the issues..
@nataliepina

[nataliepina]

I think I haven't enough knowledge in it. So I can't understand the issues.. @nataliepina

No worries @manojku1803 this one is more complex. I will unassign this issue from you. Please let us know if you need help with the other issues assigned to you for migrating tests.