feat: migrate challenge modals

[Sembauke]

Checklist:

• I have read and followed the contribution guidelines.
• I have read and followed the how to open a pull request guide.
• My pull request targets the main branch of freeCodeCamp.
• I have tested these changes either locally on my machine, or GitPod.

ref #52759

[huyenltnguyen]

The jsx-a11y/label-has-associated-control issue that CodeFactor flag is a false positive.

The label text of the checkboxes are not plain text / static, but require some computation. The ESLint rule couldn't find any plain text so it thinks the label is empty / invalid. There is an issue similar to this: jsx-eslint/eslint-plugin-jsx-a11y#966.

I'm confident that our implementation is correct because:

• I tested with a screen reader, and the label of the checkboxes are announced properly.
• We query the checkboxes using getByRole in Playwright tests, with the name of the checkboxes being the label text, the the tests are able to find those checkboxes in the DOM.
  

  freeCodeCamp/e2e/help-modal.spec.ts

  Lines 66 to 72 in c742a22

  	const rsaCheckbox = page.getByRole('checkbox', {
  	name: 'I have tried the Read-Search-Ask method'
  	});
  	const similarQuestionsCheckbox = page.getByRole('checkbox', {
  	name: 'I have searched for similar questions that have already been answered on the forum'
  	});

[huyenltnguyen]

@Sembauke I made some changes to the PR as I tested the changes locally.

The changes are:

• Handling the onKeyDown event in completion-modal
  • This also includes adding the onKeyDown prop to the Modal component)
• Restoring the !canFocusEditor condition in hotkeys.tsx (f3adb37#diff-0f97911cdf2b391a4029ce7d981cdd922bd45c140c8a7afd55282c79bc04f959R204)
  • I think there is a bug in the focus management that prevents us from being able to trigger the shortcuts modal consistently. It's probably related to the last point in Most common incorrect answers for step-1 #54024 (comment), so I think we should look into the issue separately (and add more tests to cover the expected behaviors)
• Adding closeButtonClassnames='close' to Modal.Header so that the close button is displayed properly
  • There are some CSS rules in /learn that targets the button element, which overrides ui-components styles. And thus, we need to pass the close class name from /learn, which is tied with some CSS styles, to compete the CSS specificity
• Adding xLarge Modal size to accommodate for the video-modal
• Updating the modal padding value to accommodate for small screen sizes