diff --git a/cypress/e2e/settings/device-management.spec.ts b/cypress/e2e/settings/device-management.spec.ts
index da4d12e35d..ba88db4861 100644
--- a/cypress/e2e/settings/device-management.spec.ts
+++ b/cypress/e2e/settings/device-management.spec.ts
@@ -87,7 +87,7 @@ describe("Device manager", () => {
const sessionName = `Alice's device`;
// open the first session
cy.get('.mx_FilteredDeviceList_list .mx_FilteredDeviceList_listItem').first().within(() => {
- cy.get('[aria-label="Toggle device details"]').click();
+ cy.get('[aria-label="Show details"]').click();
cy.contains('Session details').should('exist');
diff --git a/src/components/views/settings/devices/CurrentDeviceSection.tsx b/src/components/views/settings/devices/CurrentDeviceSection.tsx
index af6a950143..0b06de4677 100644
--- a/src/components/views/settings/devices/CurrentDeviceSection.tsx
+++ b/src/components/views/settings/devices/CurrentDeviceSection.tsx
@@ -22,7 +22,7 @@ import Spinner from '../../elements/Spinner';
import SettingsSubsection from '../shared/SettingsSubsection';
import { SettingsSubsectionHeading } from '../shared/SettingsSubsectionHeading';
import DeviceDetails from './DeviceDetails';
-import DeviceExpandDetailsButton from './DeviceExpandDetailsButton';
+import { DeviceExpandDetailsButton } from './DeviceExpandDetailsButton';
import DeviceTile from './DeviceTile';
import { DeviceVerificationStatusCard } from './DeviceVerificationStatusCard';
import { ExtendedDevice } from './types';
diff --git a/src/components/views/settings/devices/DeviceExpandDetailsButton.tsx b/src/components/views/settings/devices/DeviceExpandDetailsButton.tsx
index a0293fec64..e79f80bf04 100644
--- a/src/components/views/settings/devices/DeviceExpandDetailsButton.tsx
+++ b/src/components/views/settings/devices/DeviceExpandDetailsButton.tsx
@@ -19,17 +19,19 @@ import React from 'react';
import { Icon as CaretIcon } from '../../../../../res/img/feather-customised/dropdown-arrow.svg';
import { _t } from '../../../../languageHandler';
-import AccessibleButton from '../../elements/AccessibleButton';
+import AccessibleTooltipButton from '../../elements/AccessibleTooltipButton';
-interface Props {
+interface Props extends React.ComponentProps<typeof AccessibleTooltipButton> {
isExpanded: boolean;
onClick: () => void;
}
-const DeviceExpandDetailsButton: React.FC<Props> = ({ isExpanded, onClick, ...rest }) => {
- return <AccessibleButton
+export const DeviceExpandDetailsButton: React.FC<Props> = ({ isExpanded, onClick, ...rest }) => {
+ const label = isExpanded ? _t('Hide details') : _t('Show details');
+ return <AccessibleTooltipButton
{...rest}
- aria-label={_t('Toggle device details')}
+ aria-label={label}
+ title={label}
kind='icon'
className={classNames('mx_DeviceExpandDetailsButton', {
mx_DeviceExpandDetailsButton_expanded: isExpanded,
@@ -37,7 +39,5 @@ const DeviceExpandDetailsButton: React.FC<Props> = ({ isExpanded, onClick, ...re
onClick={onClick}
>
<CaretIcon className='mx_DeviceExpandDetailsButton_icon' />
- </AccessibleButton>;
+ </AccessibleTooltipButton>;
};
-
-export default DeviceExpandDetailsButton;
diff --git a/src/components/views/settings/devices/FilteredDeviceList.tsx b/src/components/views/settings/devices/FilteredDeviceList.tsx
index 53f77c0d33..824ec8d1ca 100644
--- a/src/components/views/settings/devices/FilteredDeviceList.tsx
+++ b/src/components/views/settings/devices/FilteredDeviceList.tsx
@@ -23,7 +23,7 @@ import { _t } from '../../../../languageHandler';
import AccessibleButton from '../../elements/AccessibleButton';
import { FilterDropdown, FilterDropdownOption } from '../../elements/FilterDropdown';
import DeviceDetails from './DeviceDetails';
-import DeviceExpandDetailsButton from './DeviceExpandDetailsButton';
+import { DeviceExpandDetailsButton } from './DeviceExpandDetailsButton';
import DeviceSecurityCard from './DeviceSecurityCard';
import {
filterDevicesBySecurityRecommendation,
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 62be5c8f78..15a2aff2fd 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1778,7 +1778,8 @@
"Push notifications": "Push notifications",
"Receive push notifications on this session.": "Receive push notifications on this session.",
"Sign out of this session": "Sign out of this session",
- "Toggle device details": "Toggle device details",
+ "Hide details": "Hide details",
+ "Show details": "Show details",
"Verified sessions": "Verified sessions",
"Verified sessions are anywhere you are using this account after entering your passphrase or confirming your identity with another verified session.": "Verified sessions are anywhere you are using this account after entering your passphrase or confirming your identity with another verified session.",
"This means that you have all the keys needed to unlock your encrypted messages and confirm to other users that you trust this session.": "This means that you have all the keys needed to unlock your encrypted messages and confirm to other users that you trust this session.",
diff --git a/test/components/views/settings/devices/DeviceExpandDetailsButton-test.tsx b/test/components/views/settings/devices/DeviceExpandDetailsButton-test.tsx
index 3d790e43c2..310397469b 100644
--- a/test/components/views/settings/devices/DeviceExpandDetailsButton-test.tsx
+++ b/test/components/views/settings/devices/DeviceExpandDetailsButton-test.tsx
@@ -17,7 +17,9 @@ limitations under the License.
import React from 'react';
import { fireEvent, render } from '@testing-library/react';
-import DeviceExpandDetailsButton from '../../../../../src/components/views/settings/devices/DeviceExpandDetailsButton';
+import {
+ DeviceExpandDetailsButton,
+} from '../../../../../src/components/views/settings/devices/DeviceExpandDetailsButton';
describe('<DeviceExpandDetailsButton />', () => {
const defaultProps = {
diff --git a/test/components/views/settings/devices/FilteredDeviceList-test.tsx b/test/components/views/settings/devices/FilteredDeviceList-test.tsx
index 6f188cea23..e2f9c1bd5f 100644
--- a/test/components/views/settings/devices/FilteredDeviceList-test.tsx
+++ b/test/components/views/settings/devices/FilteredDeviceList-test.tsx
@@ -221,7 +221,7 @@ describe('<FilteredDeviceList />', () => {
act(() => {
const tile = getByTestId(`device-tile-${hundredDaysOld.device_id}`);
- const toggle = tile.querySelector('[aria-label="Toggle device details"]');
+ const toggle = tile.querySelector('[aria-label="Show details"]');
fireEvent.click(toggle as Element);
});
diff --git a/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap
index 6651a91b69..accfd10806 100644
--- a/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap
+++ b/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap
@@ -237,7 +237,7 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
class="mx_DeviceTile_actions"
>
<div
- aria-label="Toggle device details"
+ aria-label="Show details"
class="mx_AccessibleButton mx_DeviceExpandDetailsButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon"
data-testid="current-session-toggle-details"
role="button"
@@ -380,7 +380,7 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
class="mx_DeviceTile_actions"
>
<div
- aria-label="Toggle device details"
+ aria-label="Show details"
class="mx_AccessibleButton mx_DeviceExpandDetailsButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon"
data-testid="current-session-toggle-details"
role="button"
diff --git a/test/components/views/settings/devices/__snapshots__/DeviceExpandDetailsButton-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/DeviceExpandDetailsButton-test.tsx.snap
index 8f16f76109..5878dc11ee 100644
--- a/test/components/views/settings/devices/__snapshots__/DeviceExpandDetailsButton-test.tsx.snap
+++ b/test/components/views/settings/devices/__snapshots__/DeviceExpandDetailsButton-test.tsx.snap
@@ -4,7 +4,7 @@ exports[`<DeviceExpandDetailsButton /> renders when expanded 1`] = `
{
"container": <div>
<div
- aria-label="Toggle device details"
+ aria-label="Hide details"
class="mx_AccessibleButton mx_DeviceExpandDetailsButton mx_DeviceExpandDetailsButton_expanded mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon"
role="button"
tabindex="0"
@@ -21,7 +21,7 @@ exports[`<DeviceExpandDetailsButton /> renders when not expanded 1`] = `
{
"container": <div>
<div
- aria-label="Toggle device details"
+ aria-label="Show details"
class="mx_AccessibleButton mx_DeviceExpandDetailsButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon"
role="button"
tabindex="0"
diff --git a/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx b/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx
index f5c6e81e5c..3c4bfd470f 100644
--- a/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx
+++ b/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx
@@ -108,10 +108,12 @@ describe('<SessionManagerTab />', () => {
const toggleDeviceDetails = (
getByTestId: ReturnType<typeof render>['getByTestId'],
deviceId: ExtendedDevice['device_id'],
+ isOpen?: boolean,
): void => {
// open device detail
const tile = getByTestId(`device-tile-${deviceId}`);
- const toggle = tile.querySelector('[aria-label="Toggle device details"]') as Element;
+ const label = isOpen ? 'Hide details' : 'Show details';
+ const toggle = tile.querySelector(`[aria-label="${label}"]`) as Element;
fireEvent.click(toggle);
};
@@ -449,7 +451,8 @@ describe('<SessionManagerTab />', () => {
expect(getByTestId(`device-detail-${alicesOlderMobileDevice.device_id}`)).toBeTruthy();
expect(getByTestId(`device-detail-${alicesMobileDevice.device_id}`)).toBeTruthy();
- toggleDeviceDetails(getByTestId, alicesMobileDevice.device_id);
+ // toggle closed
+ toggleDeviceDetails(getByTestId, alicesMobileDevice.device_id, true);
// alicesMobileDevice was toggled off
expect(queryByTestId(`device-detail-${alicesMobileDevice.device_id}`)).toBeFalsy();
diff --git a/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap b/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
index b875caf0d2..a92f68c756 100644
--- a/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
+++ b/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
@@ -94,7 +94,7 @@ exports[`<SessionManagerTab /> current session section renders current session s
class="mx_DeviceTile_actions"
>
<div
- aria-label="Toggle device details"
+ aria-label="Show details"
class="mx_AccessibleButton mx_DeviceExpandDetailsButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon"
data-testid="current-session-toggle-details"
role="button"
@@ -223,7 +223,7 @@ exports[`<SessionManagerTab /> current session section renders current session s
class="mx_DeviceTile_actions"
>
<div
- aria-label="Toggle device details"
+ aria-label="Show details"
class="mx_AccessibleButton mx_DeviceExpandDetailsButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon"
data-testid="current-session-toggle-details"
role="button"
@@ -397,7 +397,7 @@ exports[`<SessionManagerTab /> sets device verification status correctly 1`] = `
class="mx_DeviceTile_actions"
>
<div
- aria-label="Toggle device details"
+ aria-label="Show details"
class="mx_AccessibleButton mx_DeviceExpandDetailsButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon"
data-testid="current-session-toggle-details"
role="button"