Skip to content

Commit ea5e525

Browse files
floriandurosflorianduros
authored
Fix: add missing tooltip and aria-label to lock icon next to composer (#30623)
* fix: add missing tooltip and aria-label to lock icon next to composer * test: update snapshot
1 parent 14d1636 commit ea5e525

File tree

3 files changed

+52
-42
lines changed

3 files changed

+52
-42
lines changed

‎src/components/views/rooms/MessageComposer.tsx‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -531,12 +531,15 @@ export class MessageComposer extends React.Component<IProps, IState> {
531531
if (!this.props.e2eStatus) {
532532
leftIcon = (
533533
<div className="mx_MessageComposer_e2eIconWrapper">
534-
<LockOffIcon
535-
width={12}
536-
height={12}
537-
color="var(--cpd-color-icon-info-primary)"
538-
className="mx_E2EIcon mx_MessageComposer_e2eIcon"
539-
/>
534+
<Tooltip label={_t("composer|room_unencrypted")}>
535+
<LockOffIcon
536+
aria-label={_t("composer|room_unencrypted")}
537+
width={12}
538+
height={12}
539+
color="var(--cpd-color-icon-info-primary)"
540+
className="mx_E2EIcon mx_MessageComposer_e2eIcon"
541+
/>
542+
</Tooltip>
540543
</div>
541544
);
542545
} else if (this.props.e2eStatus !== E2EStatus.Normal) {

‎src/i18n/strings/en_EN.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -654,6 +654,7 @@
654654
"poll_button_no_perms_description": "You do not have permission to start polls in this room.",
655655
"poll_button_no_perms_title": "Permission Required",
656656
"replying_title": "Replying",
657+
"room_unencrypted": "Messages in this room are not end-to-end encrypted",
657658
"room_upgraded_link": "The conversation continues here.",
658659
"room_upgraded_notice": "This room has been replaced and is no longer active.",
659660
"send_button_title": "Send message",

‎test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap‎

Lines changed: 42 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
5959
style="--cpd-icon-button-size: 100%;"
6060
>
6161
<svg
62-
aria-labelledby="«rg4»"
62+
aria-labelledby="«rh2»"
6363
fill="currentColor"
6464
height="1em"
6565
viewBox="0 0 24 24"
@@ -75,7 +75,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
7575
<button
7676
aria-disabled="false"
7777
aria-label="Voice call"
78-
aria-labelledby="«rg9»"
78+
aria-labelledby="«rh7»"
7979
class="_icon-button_1pz9o_8"
8080
data-kind="primary"
8181
role="button"
@@ -101,7 +101,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
101101
</button>
102102
<button
103103
aria-label="Threads"
104-
aria-labelledby="«rge»"
104+
aria-labelledby="«rhc»"
105105
class="_icon-button_1pz9o_8"
106106
data-kind="primary"
107107
role="button"
@@ -128,7 +128,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
128128
</button>
129129
<button
130130
aria-label="Room info"
131-
aria-labelledby="«rgj»"
131+
aria-labelledby="«rhh»"
132132
class="_icon-button_1pz9o_8"
133133
data-kind="primary"
134134
role="button"
@@ -158,7 +158,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
158158
>
159159
<div
160160
aria-label="2 members"
161-
aria-labelledby="«rgo»"
161+
aria-labelledby="«rhm»"
162162
class="mx_AccessibleButton mx_FacePile"
163163
role="button"
164164
tabindex="0"
@@ -278,7 +278,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
278278
style="--cpd-icon-button-size: 100%;"
279279
>
280280
<svg
281-
aria-labelledby="«rh2»"
281+
aria-labelledby="«ri0»"
282282
fill="currentColor"
283283
height="1em"
284284
viewBox="0 0 24 24"
@@ -294,7 +294,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
294294
<button
295295
aria-disabled="false"
296296
aria-label="Voice call"
297-
aria-labelledby="«rh7»"
297+
aria-labelledby="«ri5»"
298298
class="_icon-button_1pz9o_8"
299299
data-kind="primary"
300300
role="button"
@@ -320,7 +320,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
320320
</button>
321321
<button
322322
aria-label="Threads"
323-
aria-labelledby="«rhc»"
323+
aria-labelledby="«ria»"
324324
class="_icon-button_1pz9o_8"
325325
data-kind="primary"
326326
role="button"
@@ -347,7 +347,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
347347
</button>
348348
<button
349349
aria-label="Room info"
350-
aria-labelledby="«rhh»"
350+
aria-labelledby="«rif»"
351351
class="_icon-button_1pz9o_8"
352352
data-kind="primary"
353353
role="button"
@@ -377,7 +377,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
377377
>
378378
<div
379379
aria-label="2 members"
380-
aria-labelledby="«rhm»"
380+
aria-labelledby="«rik»"
381381
class="mx_AccessibleButton mx_FacePile"
382382
role="button"
383383
tabindex="0"
@@ -583,7 +583,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
583583
style="--cpd-icon-button-size: 100%;"
584584
>
585585
<svg
586-
aria-labelledby="«rbo»"
586+
aria-labelledby="«rca»"
587587
fill="currentColor"
588588
height="1em"
589589
viewBox="0 0 24 24"
@@ -599,7 +599,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
599599
<button
600600
aria-disabled="false"
601601
aria-label="Voice call"
602-
aria-labelledby="«rbt»"
602+
aria-labelledby="«rcf»"
603603
class="_icon-button_1pz9o_8"
604604
data-kind="primary"
605605
role="button"
@@ -625,7 +625,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
625625
</button>
626626
<button
627627
aria-label="Threads"
628-
aria-labelledby="«rc2»"
628+
aria-labelledby="«rck»"
629629
class="_icon-button_1pz9o_8"
630630
data-kind="primary"
631631
role="button"
@@ -652,7 +652,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
652652
</button>
653653
<button
654654
aria-label="Room info"
655-
aria-labelledby="«rc7»"
655+
aria-labelledby="«rcp»"
656656
class="_icon-button_1pz9o_8"
657657
data-kind="primary"
658658
role="button"
@@ -682,7 +682,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
682682
>
683683
<div
684684
aria-label="2 members"
685-
aria-labelledby="«rcc»"
685+
aria-labelledby="«rcu»"
686686
class="mx_AccessibleButton mx_FacePile"
687687
role="button"
688688
tabindex="0"
@@ -800,6 +800,8 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
800800
class="mx_MessageComposer_e2eIconWrapper"
801801
>
802802
<svg
803+
aria-label="Messages in this room are not end-to-end encrypted"
804+
aria-labelledby="«rd7»"
803805
class="mx_E2EIcon mx_MessageComposer_e2eIcon"
804806
color="var(--cpd-color-icon-info-primary)"
805807
fill="currentColor"
@@ -982,7 +984,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
982984
style="--cpd-icon-button-size: 100%;"
983985
>
984986
<svg
985-
aria-labelledby="«rdu»"
987+
aria-labelledby="«rem»"
986988
fill="currentColor"
987989
height="1em"
988990
viewBox="0 0 24 24"
@@ -998,7 +1000,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
9981000
<button
9991001
aria-disabled="false"
10001002
aria-label="Voice call"
1001-
aria-labelledby="«re3»"
1003+
aria-labelledby="«rer»"
10021004
class="_icon-button_1pz9o_8"
10031005
data-kind="primary"
10041006
role="button"
@@ -1024,7 +1026,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
10241026
</button>
10251027
<button
10261028
aria-label="Threads"
1027-
aria-labelledby="«re8»"
1029+
aria-labelledby="«rf0»"
10281030
class="_icon-button_1pz9o_8"
10291031
data-kind="primary"
10301032
role="button"
@@ -1051,7 +1053,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
10511053
</button>
10521054
<button
10531055
aria-label="Room info"
1054-
aria-labelledby="«red»"
1056+
aria-labelledby="«rf5»"
10551057
class="_icon-button_1pz9o_8"
10561058
data-kind="primary"
10571059
role="button"
@@ -1081,7 +1083,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
10811083
>
10821084
<div
10831085
aria-label="2 members"
1084-
aria-labelledby="«rei»"
1086+
aria-labelledby="«rfa»"
10851087
class="mx_AccessibleButton mx_FacePile"
10861088
role="button"
10871089
tabindex="0"
@@ -1194,6 +1196,8 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
11941196
class="mx_MessageComposer_e2eIconWrapper"
11951197
>
11961198
<svg
1199+
aria-label="Messages in this room are not end-to-end encrypted"
1200+
aria-labelledby="«rfj»"
11971201
class="mx_E2EIcon mx_MessageComposer_e2eIcon"
11981202
color="var(--cpd-color-icon-info-primary)"
11991203
fill="currentColor"
@@ -1462,7 +1466,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
14621466
style="--cpd-icon-button-size: 100%;"
14631467
>
14641468
<svg
1465-
aria-labelledby="«r2c»"
1469+
aria-labelledby="«r2i»"
14661470
fill="currentColor"
14671471
height="1em"
14681472
viewBox="0 0 24 24"
@@ -1478,7 +1482,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
14781482
<button
14791483
aria-disabled="false"
14801484
aria-label="Voice call"
1481-
aria-labelledby="«r2h»"
1485+
aria-labelledby="«r2n»"
14821486
class="_icon-button_1pz9o_8"
14831487
data-kind="primary"
14841488
role="button"
@@ -1504,7 +1508,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
15041508
</button>
15051509
<button
15061510
aria-label="Threads"
1507-
aria-labelledby="«r2m»"
1511+
aria-labelledby="«r2s»"
15081512
class="_icon-button_1pz9o_8"
15091513
data-kind="primary"
15101514
role="button"
@@ -1531,7 +1535,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
15311535
</button>
15321536
<button
15331537
aria-label="Room info"
1534-
aria-labelledby="«r2r»"
1538+
aria-labelledby="«r31»"
15351539
class="_icon-button_1pz9o_8"
15361540
data-kind="primary"
15371541
role="button"
@@ -1561,7 +1565,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
15611565
>
15621566
<div
15631567
aria-label="0 members"
1564-
aria-labelledby="«r30»"
1568+
aria-labelledby="«r36»"
15651569
class="mx_AccessibleButton mx_FacePile"
15661570
role="button"
15671571
tabindex="0"
@@ -1674,7 +1678,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
16741678
style="--cpd-icon-button-size: 100%;"
16751679
>
16761680
<svg
1677-
aria-labelledby="«r2c»"
1681+
aria-labelledby="«r2i»"
16781682
fill="currentColor"
16791683
height="1em"
16801684
viewBox="0 0 24 24"
@@ -1690,7 +1694,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
16901694
<button
16911695
aria-disabled="false"
16921696
aria-label="Voice call"
1693-
aria-labelledby="«r2h»"
1697+
aria-labelledby="«r2n»"
16941698
class="_icon-button_1pz9o_8"
16951699
data-kind="primary"
16961700
role="button"
@@ -1716,7 +1720,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
17161720
</button>
17171721
<button
17181722
aria-label="Threads"
1719-
aria-labelledby="«r2m»"
1723+
aria-labelledby="«r2s»"
17201724
class="_icon-button_1pz9o_8"
17211725
data-kind="primary"
17221726
role="button"
@@ -1743,7 +1747,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
17431747
</button>
17441748
<button
17451749
aria-label="Room info"
1746-
aria-labelledby="«r2r»"
1750+
aria-labelledby="«r31»"
17471751
class="_icon-button_1pz9o_8"
17481752
data-kind="primary"
17491753
role="button"
@@ -1773,7 +1777,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
17731777
>
17741778
<div
17751779
aria-label="0 members"
1776-
aria-labelledby="«r30»"
1780+
aria-labelledby="«r36»"
17771781
class="mx_AccessibleButton mx_FacePile"
17781782
role="button"
17791783
tabindex="0"
@@ -1841,7 +1845,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
18411845
tabindex="0"
18421846
>
18431847
<div
1844-
aria-labelledby="«r3e»"
1848+
aria-labelledby="«r3k»"
18451849
class="mx_E2EIcon mx_E2EIcon_verified mx_MessageComposer_e2eIcon"
18461850
data-testid="e2e-icon"
18471851
>
@@ -2052,7 +2056,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
20522056
</button>
20532057
<button
20542058
aria-label="Chat"
2055-
aria-labelledby="«r7c»"
2059+
aria-labelledby="«r7i»"
20562060
class="_icon-button_1pz9o_8"
20572061
data-kind="primary"
20582062
role="button"
@@ -2079,7 +2083,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
20792083
</button>
20802084
<button
20812085
aria-label="Threads"
2082-
aria-labelledby="«r7h»"
2086+
aria-labelledby="«r7n»"
20832087
class="_icon-button_1pz9o_8"
20842088
data-kind="primary"
20852089
role="button"
@@ -2106,7 +2110,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
21062110
</button>
21072111
<button
21082112
aria-label="Room info"
2109-
aria-labelledby="«r7m»"
2113+
aria-labelledby="«r7s»"
21102114
class="_icon-button_1pz9o_8"
21112115
data-kind="primary"
21122116
role="button"
@@ -2136,7 +2140,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
21362140
>
21372141
<div
21382142
aria-label="0 members"
2139-
aria-labelledby="«r7r»"
2143+
aria-labelledby="«r81»"
21402144
class="mx_AccessibleButton mx_FacePile"
21412145
role="button"
21422146
tabindex="0"
@@ -2212,7 +2216,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
22122216
</p>
22132217
</div>
22142218
<button
2215-
aria-labelledby="«r84»"
2219+
aria-labelledby="«r8a»"
22162220
class="_icon-button_1pz9o_8"
22172221
data-kind="secondary"
22182222
data-testid="base-card-close-button"
@@ -2271,6 +2275,8 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
22712275
class="mx_MessageComposer_e2eIconWrapper"
22722276
>
22732277
<svg
2278+
aria-label="Messages in this room are not end-to-end encrypted"
2279+
aria-labelledby="«r8j»"
22742280
class="mx_E2EIcon mx_MessageComposer_e2eIcon"
22752281
color="var(--cpd-color-icon-info-primary)"
22762282
fill="currentColor"

0 commit comments

Comments
 (0)