Repository: wagtail/wagtail
File: client/src/components/Sidebar/modules/Search.tsx (TypeScript)

Code before:
  const searchInput = React.useRef<HTMLInputElement>(null);

  const onSubmitForm = (e: React.FormEvent<HTMLFormElement>) => {
    if (e.target instanceof HTMLFormElement) {
      e.preventDefault();

      if (isVisible) {
        const inputElement = e.target.querySelector(
          'input[name="q"]',
        ) as HTMLInputElement;
        navigate(searchUrl + '?q=' + encodeURIComponent(inputElement.value));
      } else {
        navigate(searchUrl);
      }
    }
  };

  return (
    <form
      role="search"
      className="w-h-[42px] w-relative w-box-border w-flex w-items-center w-justify-start w-flex-row w-flex-shrink-0"
      action={searchUrl}
      method="get"
      onSubmit={onSubmitForm}
      data-controller="w-kbd"
      aria-keyshortcuts="/"
      data-w-kbd-action-value={
        slim ? KeyboardAction.CLICK : KeyboardAction.FOCUS
      }
    >
      <div className="w-flex w-flex-row w-items-center w-h-full">
        <Tippy
          disabled={isVisible || !slim}
          content={gettext('Search')}
          placement="right"
        >
          {/* Use padding left 23px to align icon in slim mode and padding right 18px to ensure focus is full width */}
          <button
            className={`
          ${slim ? 'w-pr-[18px]' : 'w-pr-0'}
          w-w-full
          w-pl-[23px]
          w-h-[35px]
          w-bg-transparent
          w-outline-offset-inside
          w-border-0
          w-rounded-none
          w-text-text-label-menus-default
          w-z-10
          hover:w-text-text-label-menus-active
          focus:w-text-text-label-menus-active

Review comment (refactor):
Let's move this aria one above to under `action` so we keep the data attributes grouped together.

Let's also add a comment as to why we are doing this `action-value` dynamic behaviour.

These are small items, I can do when merging.

Code after:
  const searchInput = React.useRef<HTMLInputElement>(null);

  const onSubmitForm = (e: React.FormEvent<HTMLFormElement>) => {
    if (e.target instanceof HTMLFormElement) {
      e.preventDefault();

      if (isVisible) {
        const inputElement = e.target.querySelector(
          'input[name="q"]',
        ) as HTMLInputElement;
        navigate(searchUrl + '?q=' + encodeURIComponent(inputElement.value));
      } else {
        navigate(searchUrl);
      }
    }
  };

  return (
    <form
      role="search"
      className="w-h-[42px] w-relative w-box-border w-flex w-items-center w-justify-start w-flex-row w-flex-shrink-0"
      action={searchUrl}
      aria-keyshortcuts="/"
      method="get"
      onSubmit={onSubmitForm}
      data-controller="w-kbd"
      // when in slim mode trigger the click action so the sidebar expands and focuses on the input,
      // otherwise simply focus on the input as it will be visible.
      data-w-kbd-action-value={
        slim ? KeyboardAction.CLICK : KeyboardAction.FOCUS
      }
    >
      <div className="w-flex w-flex-row w-items-center w-h-full">
        <Tippy
          disabled={isVisible || !slim}
          content={gettext('Search')}
          placement="right"
        >
          {/* Use padding left 23px to align icon in slim mode and padding right 18px to ensure focus is full width */}
          <button
            className={`
          ${slim ? 'w-pr-[18px]' : 'w-pr-0'}
          w-w-full
          w-pl-[23px]
          w-h-[35px]
          w-bg-transparent
          w-outline-offset-inside
          w-border-0
          w-rounded-none
          w-text-text-label-menus-default
          w-z-10