Name, Role, Value

Author: karenrasmussen

src/sidebar/components/ThreadCard.tsx

@@ -82,8 +82,7 @@ function ThreadCard({ frameSync, thread }: ThreadCardProps) {
       data-testid="thread-card"
       elementRef={cardRef}
       tabIndex={0}
-      role="article"
-      aria-label="Press Enter to scroll annotation into view"
+      aria-description="Press Enter to scroll annotation into view"
       onClick={e => {
         // Prevent click events intended for another action from
         // triggering a page scroll.

src/sidebar/components/search/FilterControls.tsx

@@ -67,12 +67,11 @@ function FilterToggle({
       })}
       disabled={disabled}
       onClick={() => setActive(!active)}
-      pressed={active}
       variant="custom"
       title={description}
     >
       {IconComponent && <IconComponent className="w-em h-em" />}
-      <span className="max-w-36 truncate">{label}</span>
+      <span className="max-w-56 truncate">{label}</span>
       <div
         // Vertical divider line between label and active/inactive state.
         // This should fill the button vertically.
@@ -161,7 +160,7 @@ export default function FilterControls({
         <b>Filters</b>
         {hasSelection && (
           <FilterToggle
-            label={`${selectedCount} selected`}
+            label={`Remove ${selectedCount} selected annotation filter`}
             description={`Show ${selectedCount} selected annotations`}
             active={true}
             setActive={() => store.clearSelection()}

src/sidebar/components/search/test/FilterControls-test.js

@@ -48,11 +48,6 @@ describe('FilterControls', () => {
       return this.button.text();
     }
 
-    /** Return true if button is rendered in the active state. */
-    isActive() {
-      return this.button.prop('pressed');
-    }
-
     click() {
       this.button.find('button').simulate('click');
     }
@@ -75,7 +70,6 @@ describe('FilterControls', () => {
     const wrapper = createComponent();
     const toggle = new ToggleButtonWrapper(wrapper, 'selection-toggle');
     assert.isTrue(toggle.exists());
-    assert.isTrue(toggle.isActive());
 
     toggle.click();
 
@@ -127,14 +121,13 @@ describe('FilterControls', () => {
       fakeStore.getFocusFilters.returns(focusFilters);
       fakeStore.getFocusActive.returns(new Set([filterType]));
 
-      // Toggle should be displayed and active.
+      // Toggle should be displayed.
       const wrapper = createComponent();
       const toggle = new ToggleButtonWrapper(
         wrapper,
         `${filterType}-focus-toggle`,
       );
       assert.isTrue(toggle.exists());
-      assert.isTrue(toggle.isActive());
       assert.equal(toggle.label(), label);
 
       toggle.click();
@@ -145,7 +138,6 @@ describe('FilterControls', () => {
       fakeStore.getFocusActive.returns(new Set());
       wrapper.setProps({});
       toggle.update();
-      assert.isFalse(toggle.isActive());
     });
   });