Merge pull request #2137 from hypothesis/aria-label-the-revenge

Adjust accessible text for groups menu label

src/sidebar/components/group-list.js

@@ -89,13 +89,17 @@ function GroupList({ serviceUrl, settings }) {
     return label;
   }
 
+  const menuTitle = focusedGroup
+    ? `Select group (now viewing: ${focusedGroup.name})`
+    : 'Select group';
+
   return (
     <Menu
       align="left"
       contentClass="group-list__content"
       label={label}
       onOpenChanged={() => setExpandedGroup(null)}
-      title="Select group"
+      title={menuTitle}
     >
       {currentGroupsSorted.length > 0 && (
         <GroupListSection

src/sidebar/components/test/group-list-test.js

@@ -72,6 +72,21 @@ describe('GroupList', () => {
     $imports.$restore();
   });
 
+  it('displays descriptive menu title about which group is currently selected', () => {
+    const wrapper = createGroupList();
+    const menu = wrapper.find('Menu');
+
+    assert.equal(menu.props().title, 'Select group (now viewing: Test group)');
+  });
+
+  it('adds descriptive label text if no currently-focused group', () => {
+    fakeStore.focusedGroup.returns(undefined);
+    const wrapper = createGroupList();
+    const menu = wrapper.find('Menu');
+
+    assert.equal(menu.props().title, 'Select group');
+  });
+
   it('displays no sections if there are no groups', () => {
     const wrapper = createGroupList();
     assert.isFalse(wrapper.exists('GroupListSection'));