fix: Added label to member role combobox

techmatters · Nov 7, 2023 · 1bebff5 · 1bebff5
1 parent 1513272
commit 1bebff5
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 19 deletions.
diff --git a/src/account/components/AccountLogin.test.js b/src/account/components/AccountLogin.test.js
@@ -156,5 +156,7 @@ test('AccountLogin: Display locale picker', async () => {
     })
   );
   await render(<AccountLogin />);
-  expect(screen.getByRole('combobox', { name: /English/i })).toBeInTheDocument();
+  expect(
+    screen.getByRole('combobox', { name: /English/i })
+  ).toBeInTheDocument();
 });
diff --git a/src/group/membership/components/GroupMembers.test.js b/src/group/membership/components/GroupMembers.test.js
@@ -262,12 +262,12 @@ test('GroupMembers: Display list manager', async () => {
   ).toHaveAttribute('data-field', 'name');
   expect(
     within(rows[9])
-      .getByRole('button', { name: 'Member' })
+      .getByRole('combobox', { name: 'Role' })
       .closest('[role="cell"]')
   ).toHaveAttribute('data-field', 'role');
   expect(
-    within(rows[9]).getByRole('button', { name: 'Member' })
-  ).toBeInTheDocument();
+    within(rows[9]).getByRole('combobox', { name: 'Role' })
+  ).toHaveTextContent('Member');
   expect(
     within(rows[2])
       .getByRole('button', { name: 'Remove' })
@@ -352,11 +352,11 @@ test('GroupMembers: Manager actions', async () => {
   ).toHaveAttribute('data-field', 'name');
   expect(
     within(rows[3])
-      .getByRole('button', { name: 'Member' })
+      .getByRole('combobox', { name: 'Role' })
       .closest('[role="cell"]')
   ).toHaveAttribute('data-field', 'role');
-  const roleButton = within(rows[3]).getByRole('button', { name: 'Member' });
-  expect(roleButton).toBeInTheDocument();
+  const roleButton = within(rows[3]).getByRole('combobox', { name: 'Role' });
+  expect(within(roleButton).getByText('Member')).toBeInTheDocument();
   await act(async () => fireEvent.mouseDown(roleButton));
   expect(screen.getByRole('option', { name: 'Manager' })).toBeInTheDocument();
   await act(
@@ -372,12 +372,17 @@ test('GroupMembers: Manager actions', async () => {
   await waitFor(() =>
     expect(
       within(screen.getAllByRole('row')[3])
-        .getByRole('button', {
-          name: 'Manager',
+        .getByRole('combobox', {
+          name: 'Role',
         })
         .closest('[role="cell"]')
     ).toHaveAttribute('data-field', 'role')
   );
+  expect(
+    within(screen.getAllByRole('row')[3]).getByRole('combobox', {
+      name: 'Role',
+    })
+  ).toHaveTextContent('Manager');
 
   // Remove member
   expect(rows.length).toBe(4);

diff --git a/src/group/membership/components/GroupMembersList.js b/src/group/membership/components/GroupMembersList.js
@@ -74,6 +74,7 @@ const RoleSelect = ({ member, tabIndex }) => {
         disabled={member.fetching}
         inputProps={{
           tabIndex,
+          'aria-label': t('group.members_list_role_select_label'),
         }}
         disableUnderline
       >

diff --git a/src/landscape/membership/components/LandscapeMembers.test.js b/src/landscape/membership/components/LandscapeMembers.test.js
@@ -296,11 +296,13 @@ test('LandscapeMembers: Display list manager', async () => {
   ).toHaveAttribute('data-field', 'name');
   expect(
     within(rows[9])
-      .getByRole('button', { name: 'Member' })
+      .getByRole('combobox', { name: 'Role' })
       .closest('[role="cell"]')
   ).toHaveAttribute('data-field', 'role');
   expect(
-    within(rows[9]).getByRole('button', { name: 'Member' })
+    within(within(rows[9]).getByRole('combobox', { name: 'Role' })).getByText(
+      'Member'
+    )
   ).toBeInTheDocument();
   expect(
     within(rows[2])
@@ -397,10 +399,11 @@ test('LandscapeMembers: Manager actions', async () => {
   ).toHaveAttribute('data-field', 'name');
   expect(
     within(rows[3])
-      .getByRole('combobox', { name: /Member/i })
+      .getByRole('combobox', { name: 'Role' })
       .closest('[role="cell"]')
   ).toHaveAttribute('data-field', 'role');
-  const roleButton = within(rows[3]).getByRole('button', { name: 'Member' });
+  const roleButton = within(rows[3]).getByRole('combobox', { name: 'Role' });
+  expect(within(roleButton).getByText('Member')).toBeInTheDocument();
   expect(roleButton).toBeInTheDocument();
   await act(async () => fireEvent.mouseDown(roleButton));
   expect(screen.getByRole('option', { name: 'Manager' })).toBeInTheDocument();
@@ -417,8 +420,8 @@ test('LandscapeMembers: Manager actions', async () => {
   await waitFor(() =>
     expect(
       within(screen.getAllByRole('row')[3])
-        .getByRole('button', {
-          name: 'Manager',
+        .getByRole('combobox', {
+          name: 'Role',
         })
         .closest('[role="cell"]')
     ).toHaveAttribute('data-field', 'role')

diff --git a/src/localization/components/LocalePicker.test.js b/src/localization/components/LocalePicker.test.js
@@ -67,7 +67,9 @@ test('LocalePicker: Change locale', async () => {
   await act(async () =>
     fireEvent.click(listbox.getByRole('option', { name: /Español/i }))
   );
-  expect(screen.getByRole('combobox', { name: /Español/i })).toBeInTheDocument();
+  expect(
+    screen.getByRole('combobox', { name: /Español/i })
+  ).toBeInTheDocument();
 
   const savePreferenceCall = terrasoApi.requestGraphQL.mock.calls[0];
   expect(savePreferenceCall[1]).toStrictEqual({
@@ -90,7 +92,9 @@ test('LocalePicker: Dont save if no user', async () => {
   await act(async () =>
     fireEvent.click(listbox.getByRole('option', { name: /Español/i }))
   );
-  expect(screen.getByRole('combobox', { name: /Español/i })).toBeInTheDocument();
+  expect(
+    screen.getByRole('combobox', { name: /Español/i })
+  ).toBeInTheDocument();
   expect(terrasoApi.requestGraphQL).toHaveBeenCalledTimes(0);
 });
 test('LocalePicker: Change locale (small screen)', async () => {

diff --git a/src/localization/locales/en-US.json b/src/localization/locales/en-US.json
@@ -134,7 +134,8 @@
         "breadcrumbs_visualization": "{{mapTitle}}",
         "breadcrumbs_visualization_new": "New Map",
         "breadcrumbs_upload": "Share Files and Links",
-        "autocomplete_no_options": "No options"
+        "autocomplete_no_options": "No options",
+        "members_list_role_select_label": "Role"
     },
     "tool": {
         "requirements": "System requirements",

diff --git a/src/localization/locales/es-ES.json b/src/localization/locales/es-ES.json
@@ -134,7 +134,8 @@
         "breadcrumbs_visualization": "{{mapTitle}}",
         "breadcrumbs_visualization_new": "Nuevo mapa",
         "breadcrumbs_upload": "Compartir archivos y enlaces",
-        "autocomplete_no_options": "No existen opciones"
+        "autocomplete_no_options": "No existen opciones",
+        "members_list_role_select_label": "Rol"
     },
     "tool": {
         "avilability": "Disponibilidad",