Add a more prominent pressed state for top bar buttons

src/sidebar/components/PressableIconButton.tsx

+import type { IconButtonProps } from '@hypothesis/frontend-shared';
+import { IconButton } from '@hypothesis/frontend-shared';
+import classnames from 'classnames';
+
+export type PressableIconButtonProps = IconButtonProps;
+
+/**
+ * An IconButton which can be used as a toggle with a more visible pressed state.
+ * Appropriate when the pressed state is not otherwise obvious from the context.
+ */
+export default function PressableIconButton({
+  classes,
+  ...rest
+}: PressableIconButtonProps) {
+  return (
+    <IconButton
+      {...rest}
+      classes={classnames(
+        classes,
+        'border border-transparent',
+        'aria-pressed:border-grey-3 aria-pressed:bg-grey-1',
+      )}
+    />
+  );
+}

src/sidebar/components/TopBar.tsx

-import {
-  IconButton,
-  LinkButton,
-  HelpIcon,
-  ShareIcon,
-} from '@hypothesis/frontend-shared';
+import { LinkButton, HelpIcon, ShareIcon } from '@hypothesis/frontend-shared';
 import classnames from 'classnames';
 
 import type { SidebarSettings } from '../../types/config';
@@ -14,6 +9,7 @@ import type { FrameSyncService } from '../services/frame-sync';
 import { useSidebarStore } from '../store';
 import GroupList from './GroupList';
 import PendingUpdatesButton from './PendingUpdatesButton';
+import PressableIconButton from './PressableIconButton';
 import SearchInput from './SearchInput';
 import SortMenu from './SortMenu';
 import StreamSearchInput from './StreamSearchInput';
@@ -108,28 +104,32 @@ function TopBar({
               />
               <SortMenu />
               {showShareButton && (
-                <IconButton
+                <PressableIconButton
                   icon={ShareIcon}
                   expanded={isAnnotationsPanelOpen}
+                  pressed={isAnnotationsPanelOpen}
                   onClick={toggleSharePanel}
                   size="xs"
                   title="Share annotations on this page"
+                  data-testid="share-icon-button"
                 />
               )}
             </>
           )}
-          <IconButton
+          <PressableIconButton
             icon={HelpIcon}
             expanded={isHelpPanelOpen}
+            pressed={isHelpPanelOpen}
             onClick={requestHelp}
             size="xs"
             title="Help"
+            data-testid="help-icon-button"
           />
           {isLoggedIn ? (
             <UserMenu onLogout={onLogout} />
           ) : (
             <div
-              className="flex items-center text-md font-medium space-x-1"
+              className="flex items-center text-md font-medium space-x-1 pl-1"
               data-testid="login-links"
             >
               {!isLoggedIn && !hasFetchedProfile && <span>⋯</span>}

src/sidebar/components/test/TopBar-test.js

@@ -39,17 +39,22 @@ describe('TopBar', () => {
       '../store': { useSidebarStore: () => fakeStore },
       '../config/service-config': { serviceConfig: fakeServiceConfig },
     });
+    $imports.$restore({
+      // `PressableIconButton` is a presentation-only component. Not mocking it
+      // allows to get it covered.
+      './PressableIconButton': true,
+    });
   });
 
   afterEach(() => {
     $imports.$restore();
   });
 
-  // Helper to retrieve an `Button` by icon name, for convenience
-  function getButton(wrapper, iconName) {
+  // Helper to retrieve an `Button` by test ID, for convenience
+  function getButton(wrapper, testId) {
     return wrapper
-      .find('IconButton')
-      .filterWhere(n => n.find(iconName).exists());
+      .find('PressableIconButton')
+      .filterWhere(n => n.find(`[data-testid="${testId}"]`).exists());
   }
 
   function createTopBar(props = {}) {
@@ -69,7 +74,7 @@ describe('TopBar', () => {
     context('no help service handler configured in services (default)', () => {
       it('toggles Help Panel on click', () => {
         const wrapper = createTopBar();
-        const helpButton = getButton(wrapper, 'HelpIcon');
+        const helpButton = getButton(wrapper, 'help-icon-button');
 
         helpButton.props().onClick();
 
@@ -79,7 +84,7 @@ describe('TopBar', () => {
       it('displays a help icon active state when help panel active', () => {
         fakeStore.isSidebarPanelOpen.withArgs('help').returns(true);
         const wrapper = createTopBar();
-        const helpButton = getButton(wrapper, 'HelpIcon');
+        const helpButton = getButton(wrapper, 'help-icon-button');
 
         wrapper.update();
 
@@ -91,7 +96,7 @@ describe('TopBar', () => {
           fakeServiceConfig.returns({ onHelpRequestProvided: true });
           const wrapper = createTopBar();
 
-          const helpButton = getButton(wrapper, 'HelpIcon');
+          const helpButton = getButton(wrapper, 'help-icon-button');
 
           helpButton.props().onClick();
 
@@ -164,7 +169,7 @@ describe('TopBar', () => {
 
   it('toggles the share annotations panel when "Share" is clicked', () => {
     const wrapper = createTopBar();
-    const shareButton = getButton(wrapper, 'ShareIcon');
+    const shareButton = getButton(wrapper, 'share-icon-button');
 
     shareButton.props().onClick();
 
@@ -176,7 +181,7 @@ describe('TopBar', () => {
       .withArgs('shareGroupAnnotations')
       .returns(true);
     const wrapper = createTopBar();
-    const shareButton = getButton(wrapper, 'ShareIcon');
+    const shareButton = getButton(wrapper, 'share-icon-button');
 
     assert.isTrue(shareButton.prop('expanded'));
   });