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

Code before:
      key: index,
      slim,
      expandingOrCollapsing,
      onHideMobile,
      onSearchClick,
      currentPath,
      navigate,
    }),
  );

  return (
    <>
      <button
        onClick={onClickOpenCloseToggle}
        aria-label={gettext('Toggle sidebar')}
        aria-expanded={visibleOnMobile ? 'true' : 'false'}
        className={
          'button sidebar-nav-toggle' +
          (isMobile ? ' sidebar-nav-toggle--mobile' : '') +
          (visibleOnMobile ? ' sidebar-nav-toggle--open' : '')
        }
        type="button"
        ref={mobileNavToggleRef}
        data-controller="w-kbd"
        data-w-kbd-key-value="mod+["
        data-w-kbd-scope-value="global"
      >
        {visibleOnMobile ? <Icon name="cross" /> : <Icon name="bars" />}
      </button>
      <div
        className={
          'sidebar' +
          (slim ? ' sidebar--slim' : '') +
          (isMobile ? ' sidebar--mobile' : '') +
          (isMobile && !visibleOnMobile ? ' sidebar--hidden' : '') +
          (isMobile && !visibleOnMobile && closedOnMobile
            ? ' sidebar--closed'
            : '')
        }
      >
        <div
          className="sidebar__inner"
          onFocus={onFocusHandler}
          onBlur={onBlurHandler}
        >
          <div
            className={`sm:w-mt-2 ${
              slim ? 'w-justify-center' : 'w-justify-end'
            } w-flex  w-items-center`}
          >
            <button

Review comment (suggestion):
Based on main comment, let's replace this with the 'target' attribute.

```suggestion
        data-w-kbd-target={isMobile ? 'element' : undefined}
```

Also, we should set the `aria-keyshortcuts` further up for completeness & accessibility.


```ts
  return (
    <>
      <button
        onClick={onClickOpenCloseToggle}
        aria-label={gettext('Toggle sidebar')}
        aria-expanded={visibleOnMobile ? 'true' : 'false'}
        aria-keyshortcuts="["
// ...
```

Code after:
      key: index,
      slim,
      expandingOrCollapsing,
      onHideMobile,
      onSearchClick,
      currentPath,
      navigate,
    }),
  );

  return (
    <>
      <button
        onClick={onClickOpenCloseToggle}
        aria-expanded={visibleOnMobile ? 'true' : 'false'}
        aria-keyshortcuts="["
        aria-label={gettext('Toggle sidebar')}
        className={
          'button sidebar-nav-toggle' +
          (isMobile ? ' sidebar-nav-toggle--mobile' : '') +
          (visibleOnMobile ? ' sidebar-nav-toggle--open' : '')
        }
        type="button"
        ref={mobileNavToggleRef}
        data-w-kbd-target={isMobile ? 'element' : undefined}
      >
        {visibleOnMobile ? <Icon name="cross" /> : <Icon name="bars" />}
      </button>
      <div
        className={
          'sidebar' +
          (slim ? ' sidebar--slim' : '') +
          (isMobile ? ' sidebar--mobile' : '') +
          (isMobile && !visibleOnMobile ? ' sidebar--hidden' : '') +
          (isMobile && !visibleOnMobile && closedOnMobile
            ? ' sidebar--closed'
            : '')
        }
      >
        <div
          className="sidebar__inner"
          onFocus={onFocusHandler}
          onBlur={onBlurHandler}
        >
          <div
            className={`sm:w-mt-2 ${
              slim ? 'w-justify-center' : 'w-justify-end'
            } w-flex  w-items-center`}
          >
            <button
              onClick={onClickCollapseToggle}