1152 upgrade merge react sdk #3
Annotations
10 errors
|
Run tests:
test/unit-tests/components/views/rooms/RoomHeader-test.tsx#L164
TestingLibraryElementError: Unable to find a label with the text of: Threads
Ignored nodes: comments, script, style
<body>
<div>
<header
class="mx_Flex mx_RoomHeader light-panel"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
>
<div
class="mx_DecoratedRoomAvatar mx_DecoratedRoomAvatar_cutout"
>
<div
class="mx_DecoratedRoomAvatar_positionedParent"
>
<span
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
data-color="3"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 40px;"
>
!
</span>
<div
aria-labelledby=":r28:"
class="mx_DecoratedRoomAvatar_icon mx_DecoratedRoomAvatar_icon_forum"
tabindex="0"
/>
</div>
</div>
<button
aria-label="Room info"
class="mx_RoomHeader_infoWrapper"
tabindex="0"
>
<div
class="mx_Box mx_RoomHeader_info mx_Box--flex"
style="--mx-box-flex: 1;"
>
<div
aria-level="1"
class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83 mx_RoomHeader_heading"
dir="auto"
role="heading"
>
<span
class="mx_RoomHeader_truncated mx_lineClamp"
>
!1:example.org
</span>
</div>
</div>
</button>
<div
class="mx_Flex"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
>
<button
aria-label="Room info"
aria-labelledby=":r2d:"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16v-4a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 11a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 12v4c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-8c.283 0 .52-.096.713-.287A.967.967 0 0 0 13 8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 13a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
/>
</svg>
</div>
</button>
</div>
<div
class="_typography_yh5dq_162 _font-body-sm-medium_yh5dq_50"
>
<div
aria-label="0 members"
aria-labelledby=":r2i:"
class="mx_AccessibleButton mx_FacePile"
role="button"
tabindex="0"
>
<div
class="_stacked-avatars_mcap2_111"
/>
0
</div>
</div>
</header>
</div>
<div
data-floating-ui-portal=""
id=":r2c:"
>
<div
class="_tooltip_1pslb_17 _invisible_1pslb_30"
data-floating-ui-focusable=""
style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 0px);
|
|
Run tests:
test/unit-tests/components/views/rooms/RoomHeader-test.tsx#L183
TestingLibraryElementError: Unable to find an accessible element with the role "button" and name "Voice call"
Here are the accessible roles:
banner:
Name "":
<header
class="mx_Flex mx_RoomHeader light-panel"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
/>
--------------------------------------------------
presentation:
Name "":
<span
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
data-color="3"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 40px;"
/>
Name "":
<img
alt=""
class="_image_mcap2_50"
data-type="round"
height="20px"
loading="lazy"
referrerpolicy="no-referrer"
src="http://this.is.a.url/avatar.url/user-0.png"
width="20px"
/>
Name "":
<img
alt=""
class="_image_mcap2_50"
data-type="round"
height="20px"
loading="lazy"
referrerpolicy="no-referrer"
src="http://this.is.a.url/avatar.url/user-1.png"
width="20px"
/>
--------------------------------------------------
button:
Name "Room info":
<button
aria-label="Room info"
class="mx_RoomHeader_infoWrapper"
tabindex="0"
/>
Name "Room info":
<button
aria-label="Room info"
aria-labelledby=":r3n:"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
/>
Name "People":
<div
aria-label="2 members"
aria-labelledby=":r3s:"
class="mx_AccessibleButton mx_FacePile"
role="button"
tabindex="0"
/>
--------------------------------------------------
heading:
Name "!1:example.org":
<div
aria-level="1"
class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83 mx_RoomHeader_heading"
dir="auto"
role="heading"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<header
class="mx_Flex mx_RoomHeader light-panel"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
>
<div
class="mx_DecoratedRoomAvatar mx_DecoratedRoomAvatar_cutout"
>
<div
class="mx_DecoratedRoomAvatar_positionedParent"
>
<span
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
data-color="3"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 40px;"
>
!
</span>
<div
aria-labelledby=":r3i:"
class="mx_DecoratedRoomAvatar_icon mx_DecoratedRoomAvatar_icon_forum"
tabindex="0"
/>
</div>
</div>
<button
aria-label="Room info"
class="mx_RoomHeader_infoWrapper"
tabindex="0"
>
<div
class="mx_Box mx_RoomHeader_info mx_Box--flex"
style="--mx-box-flex: 1;"
>
<div
aria-level="1"
class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83 mx_RoomHeader_heading"
dir="auto"
role="heading"
>
<span
class="mx_RoomHeader_truncated mx_lineClamp"
>
!1:example.org
</span>
</div>
</div>
</button>
<div
class="mx_Flex"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
>
<button
aria-label="Room info"
aria-labelledby=":r3n:"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
|
|
Run tests:
test/unit-tests/components/views/rooms/RoomHeader-test.tsx#L194
TestingLibraryElementError: Unable to find an accessible element with the role "button" and name "Video call"
Here are the accessible roles:
banner:
Name "":
<header
class="mx_Flex mx_RoomHeader light-panel"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
/>
--------------------------------------------------
presentation:
Name "":
<span
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
data-color="3"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 40px;"
/>
Name "":
<img
alt=""
class="_image_mcap2_50"
data-type="round"
height="20px"
loading="lazy"
referrerpolicy="no-referrer"
src="http://this.is.a.url/avatar.url/user-0.png"
width="20px"
/>
Name "":
<img
alt=""
class="_image_mcap2_50"
data-type="round"
height="20px"
loading="lazy"
referrerpolicy="no-referrer"
src="http://this.is.a.url/avatar.url/user-1.png"
width="20px"
/>
--------------------------------------------------
button:
Name "Room info":
<button
aria-label="Room info"
class="mx_RoomHeader_infoWrapper"
tabindex="0"
/>
Name "Room info":
<button
aria-label="Room info"
aria-labelledby=":r49:"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
/>
Name "People":
<div
aria-label="2 members"
aria-labelledby=":r4e:"
class="mx_AccessibleButton mx_FacePile"
role="button"
tabindex="0"
/>
--------------------------------------------------
heading:
Name "!1:example.org":
<div
aria-level="1"
class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83 mx_RoomHeader_heading"
dir="auto"
role="heading"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<header
class="mx_Flex mx_RoomHeader light-panel"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
>
<div
class="mx_DecoratedRoomAvatar mx_DecoratedRoomAvatar_cutout"
>
<div
class="mx_DecoratedRoomAvatar_positionedParent"
>
<span
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
data-color="3"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 40px;"
>
!
</span>
<div
aria-labelledby=":r44:"
class="mx_DecoratedRoomAvatar_icon mx_DecoratedRoomAvatar_icon_forum"
tabindex="0"
/>
</div>
</div>
<button
aria-label="Room info"
class="mx_RoomHeader_infoWrapper"
tabindex="0"
>
<div
class="mx_Box mx_RoomHeader_info mx_Box--flex"
style="--mx-box-flex: 1;"
>
<div
aria-level="1"
class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83 mx_RoomHeader_heading"
dir="auto"
role="heading"
>
<span
class="mx_RoomHeader_truncated mx_lineClamp"
>
!1:example.org
</span>
</div>
</div>
</button>
<div
class="mx_Flex"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
>
<button
aria-label="Room info"
aria-labelledby=":r49:"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
|
|
Run tests:
test/unit-tests/components/views/rooms/RoomHeader-test.tsx#L203
TestingLibraryElementError: Unable to find an accessible element with the role "button" and name "Video call"
Here are the accessible roles:
banner:
Name "":
<header
class="mx_Flex mx_RoomHeader light-panel"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
/>
--------------------------------------------------
presentation:
Name "":
<span
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
data-color="3"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 40px;"
/>
Name "":
<img
alt=""
class="_image_mcap2_50"
data-type="round"
height="20px"
loading="lazy"
referrerpolicy="no-referrer"
src="http://this.is.a.url/avatar.url/user-0.png"
width="20px"
/>
Name "":
<img
alt=""
class="_image_mcap2_50"
data-type="round"
height="20px"
loading="lazy"
referrerpolicy="no-referrer"
src="http://this.is.a.url/avatar.url/user-1.png"
width="20px"
/>
Name "":
<img
alt=""
class="_image_mcap2_50"
data-type="round"
height="20px"
loading="lazy"
referrerpolicy="no-referrer"
src="http://this.is.a.url/avatar.url/user-2.png"
width="20px"
/>
--------------------------------------------------
button:
Name "Room info":
<button
aria-label="Room info"
class="mx_RoomHeader_infoWrapper"
tabindex="0"
/>
Name "Room info":
<button
aria-label="Room info"
aria-labelledby=":r4r:"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
/>
Name "People":
<div
aria-label="3 members"
aria-labelledby=":r50:"
class="mx_AccessibleButton mx_FacePile"
role="button"
tabindex="0"
/>
--------------------------------------------------
heading:
Name "!1:example.org":
<div
aria-level="1"
class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83 mx_RoomHeader_heading"
dir="auto"
role="heading"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<header
class="mx_Flex mx_RoomHeader light-panel"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
>
<div
class="mx_DecoratedRoomAvatar mx_DecoratedRoomAvatar_cutout"
>
<div
class="mx_DecoratedRoomAvatar_positionedParent"
>
<span
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
data-color="3"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 40px;"
>
!
</span>
<div
aria-labelledby=":r4m:"
class="mx_DecoratedRoomAvatar_icon mx_DecoratedRoomAvatar_icon_forum"
tabindex="0"
/>
</div>
</div>
<button
aria-label="Room info"
class="mx_RoomHeader_infoWrapper"
tabindex="0"
>
<div
class="mx_Box mx_RoomHeader_info mx_Box--flex"
style="--mx-box-flex: 1;"
>
<div
aria-level="1"
class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83 mx_RoomHeader_heading"
dir="auto"
role="heading"
>
<span
class="mx_RoomHeader_truncated mx_lineClamp"
>
!1:example.org
</span>
</div>
</div>
</button>
<div
class="mx_Flex"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: st
|
|
Run tests:
test/unit-tests/components/views/rooms/RoomHeader-test.tsx#L216
TestingLibraryElementError: Unable to find an accessible element with the role "button" and name "Video call"
Here are the accessible roles:
banner:
Name "":
<header
class="mx_Flex mx_RoomHeader light-panel"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
/>
--------------------------------------------------
presentation:
Name "":
<span
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
data-color="3"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 40px;"
/>
Name "":
<img
alt=""
class="_image_mcap2_50"
data-type="round"
height="20px"
loading="lazy"
referrerpolicy="no-referrer"
src="http://this.is.a.url/avatar.url/user-0.png"
width="20px"
/>
Name "":
<img
alt=""
class="_image_mcap2_50"
data-type="round"
height="20px"
loading="lazy"
referrerpolicy="no-referrer"
src="http://this.is.a.url/avatar.url/user-1.png"
width="20px"
/>
--------------------------------------------------
button:
Name "Room info":
<button
aria-label="Room info"
class="mx_RoomHeader_infoWrapper"
tabindex="0"
/>
Name "Room info":
<button
aria-label="Room info"
aria-labelledby=":r5d:"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
/>
Name "People":
<div
aria-label="2 members"
aria-labelledby=":r5i:"
class="mx_AccessibleButton mx_FacePile"
role="button"
tabindex="0"
/>
--------------------------------------------------
heading:
Name "!1:example.org":
<div
aria-level="1"
class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83 mx_RoomHeader_heading"
dir="auto"
role="heading"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<header
class="mx_Flex mx_RoomHeader light-panel"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
>
<div
class="mx_DecoratedRoomAvatar mx_DecoratedRoomAvatar_cutout"
>
<div
class="mx_DecoratedRoomAvatar_positionedParent"
>
<span
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
data-color="3"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 40px;"
>
!
</span>
<div
aria-labelledby=":r58:"
class="mx_DecoratedRoomAvatar_icon mx_DecoratedRoomAvatar_icon_forum"
tabindex="0"
/>
</div>
</div>
<button
aria-label="Room info"
class="mx_RoomHeader_infoWrapper"
tabindex="0"
>
<div
class="mx_Box mx_RoomHeader_info mx_Box--flex"
style="--mx-box-flex: 1;"
>
<div
aria-level="1"
class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83 mx_RoomHeader_heading"
dir="auto"
role="heading"
>
<span
class="mx_RoomHeader_truncated mx_lineClamp"
>
!1:example.org
</span>
</div>
</div>
</button>
<div
class="mx_Flex"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
>
<button
aria-label="Room info"
aria-labelledby=":r5d:"
class="_icon-button_bh2qc_17"
role="button"
|
|
Run tests:
test/unit-tests/components/views/rooms/RoomHeader-test.tsx#L223
TestingLibraryElementError: Unable to find an accessible element with the role "button" and name "Video call"
Here are the accessible roles:
banner:
Name "":
<header
class="mx_Flex mx_RoomHeader light-panel"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
/>
--------------------------------------------------
presentation:
Name "":
<span
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
data-color="3"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 40px;"
/>
Name "":
<img
alt=""
class="_image_mcap2_50"
data-type="round"
height="20px"
loading="lazy"
referrerpolicy="no-referrer"
src="http://this.is.a.url/avatar.url/user-0.png"
width="20px"
/>
Name "":
<img
alt=""
class="_image_mcap2_50"
data-type="round"
height="20px"
loading="lazy"
referrerpolicy="no-referrer"
src="http://this.is.a.url/avatar.url/user-1.png"
width="20px"
/>
Name "":
<img
alt=""
class="_image_mcap2_50"
data-type="round"
height="20px"
loading="lazy"
referrerpolicy="no-referrer"
src="http://this.is.a.url/avatar.url/user-2.png"
width="20px"
/>
--------------------------------------------------
button:
Name "Room info":
<button
aria-label="Room info"
class="mx_RoomHeader_infoWrapper"
tabindex="0"
/>
Name "Room info":
<button
aria-label="Room info"
aria-labelledby=":r5v:"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
/>
Name "People":
<div
aria-label="3 members"
aria-labelledby=":r64:"
class="mx_AccessibleButton mx_FacePile"
role="button"
tabindex="0"
/>
--------------------------------------------------
heading:
Name "!1:example.org":
<div
aria-level="1"
class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83 mx_RoomHeader_heading"
dir="auto"
role="heading"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<header
class="mx_Flex mx_RoomHeader light-panel"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
>
<div
class="mx_DecoratedRoomAvatar mx_DecoratedRoomAvatar_cutout"
>
<div
class="mx_DecoratedRoomAvatar_positionedParent"
>
<span
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
data-color="3"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 40px;"
>
!
</span>
<div
aria-labelledby=":r5q:"
class="mx_DecoratedRoomAvatar_icon mx_DecoratedRoomAvatar_icon_forum"
tabindex="0"
/>
</div>
</div>
<button
aria-label="Room info"
class="mx_RoomHeader_infoWrapper"
tabindex="0"
>
<div
class="mx_Box mx_RoomHeader_info mx_Box--flex"
style="--mx-box-flex: 1;"
>
<div
aria-level="1"
class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83 mx_RoomHeader_heading"
dir="auto"
role="heading"
>
<span
class="mx_RoomHeader_truncated mx_lineClamp"
>
!1:example.org
</span>
</div>
</div>
</button>
<div
class="mx_Flex"
style="--mx-flex-display: flex; --mx-flex-direction: row; --
|
|
Run tests:
test/unit-tests/components/views/rooms/RoomHeader-test.tsx#L237
TestingLibraryElementError: Unable to find an accessible element with the role "button" and name "Video call"
Here are the accessible roles:
banner:
Name "":
<header
class="mx_Flex mx_RoomHeader light-panel"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
/>
--------------------------------------------------
presentation:
Name "":
<span
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
data-color="3"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 40px;"
/>
Name "":
<img
alt=""
class="_image_mcap2_50"
data-type="round"
height="20px"
loading="lazy"
referrerpolicy="no-referrer"
src="http://this.is.a.url/avatar.url/user-0.png"
width="20px"
/>
Name "":
<img
alt=""
class="_image_mcap2_50"
data-type="round"
height="20px"
loading="lazy"
referrerpolicy="no-referrer"
src="http://this.is.a.url/avatar.url/user-1.png"
width="20px"
/>
--------------------------------------------------
button:
Name "Room info":
<button
aria-label="Room info"
class="mx_RoomHeader_infoWrapper"
tabindex="0"
/>
Name "Room info":
<button
aria-label="Room info"
aria-labelledby=":r6h:"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
/>
Name "People":
<div
aria-label="2 members"
aria-labelledby=":r6m:"
class="mx_AccessibleButton mx_FacePile"
role="button"
tabindex="0"
/>
--------------------------------------------------
heading:
Name "!1:example.org":
<div
aria-level="1"
class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83 mx_RoomHeader_heading"
dir="auto"
role="heading"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<header
class="mx_Flex mx_RoomHeader light-panel"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
>
<div
class="mx_DecoratedRoomAvatar mx_DecoratedRoomAvatar_cutout"
>
<div
class="mx_DecoratedRoomAvatar_positionedParent"
>
<span
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
data-color="3"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 40px;"
>
!
</span>
<div
aria-labelledby=":r6c:"
class="mx_DecoratedRoomAvatar_icon mx_DecoratedRoomAvatar_icon_forum"
tabindex="0"
/>
</div>
</div>
<button
aria-label="Room info"
class="mx_RoomHeader_infoWrapper"
tabindex="0"
>
<div
class="mx_Box mx_RoomHeader_info mx_Box--flex"
style="--mx-box-flex: 1;"
>
<div
aria-level="1"
class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83 mx_RoomHeader_heading"
dir="auto"
role="heading"
>
<span
class="mx_RoomHeader_truncated mx_lineClamp"
>
!1:example.org
</span>
</div>
</div>
</button>
<div
class="mx_Flex"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
>
<button
aria-label="Room info"
aria-labelledby=":r6h:"
class="_icon-but
|
|
Run tests:
test/unit-tests/components/views/rooms/RoomHeader-test.tsx#L256
TestingLibraryElementError: Unable to find a label with the text of: There's no one here to call
Ignored nodes: comments, script, style
<div>
<header
class="mx_Flex mx_RoomHeader light-panel"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
>
<div
class="mx_DecoratedRoomAvatar mx_DecoratedRoomAvatar_cutout"
>
<div
class="mx_DecoratedRoomAvatar_positionedParent"
>
<span
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
data-color="3"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 40px;"
>
!
</span>
<div
aria-labelledby=":r7g:"
class="mx_DecoratedRoomAvatar_icon mx_DecoratedRoomAvatar_icon_forum"
tabindex="0"
/>
</div>
</div>
<button
aria-label="Room info"
class="mx_RoomHeader_infoWrapper"
tabindex="0"
>
<div
class="mx_Box mx_RoomHeader_info mx_Box--flex"
style="--mx-box-flex: 1;"
>
<div
aria-level="1"
class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83 mx_RoomHeader_heading"
dir="auto"
role="heading"
>
<span
class="mx_RoomHeader_truncated mx_lineClamp"
>
!1:example.org
</span>
</div>
</div>
</button>
<div
class="mx_Flex"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
>
<button
aria-label="Room info"
aria-labelledby=":r7l:"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16v-4a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 11a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 12v4c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-8c.283 0 .52-.096.713-.287A.967.967 0 0 0 13 8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 13a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
/>
</svg>
</div>
</button>
</div>
<div
class="_typography_yh5dq_162 _font-body-sm-medium_yh5dq_50"
>
<div
aria-label="1 member"
aria-labelledby=":r7q:"
class="mx_AccessibleButton mx_FacePile"
role="button"
tabindex="0"
>
<div
class="_stacked-avatars_mcap2_111"
>
<span
aria-label="Profile picture"
class="_avatar_mcap2_17 mx_BaseAvatar"
data-color="3"
data-testid="avatar-img"
data-type="round"
style="--cpd-avatar-size: 20px;"
>
<img
alt=""
class="_image_mcap2_50"
data-type="round"
height="20px"
loading="lazy"
referrerpolicy="no-referrer"
src="http://this.is.a.url/avatar.url/user-0.png"
width="20px"
|
|
Run tests:
test/unit-tests/components/views/rooms/RoomHeader-test.tsx#L265
TestingLibraryElementError: Unable to find an accessible element with the role "button" and name "Voice call"
Here are the accessible roles:
banner:
Name "":
<header
class="mx_Flex mx_RoomHeader light-panel"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
/>
--------------------------------------------------
presentation:
Name "":
<span
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
data-color="3"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 40px;"
/>
Name "":
<img
alt=""
class="_image_mcap2_50"
data-type="round"
height="20px"
loading="lazy"
referrerpolicy="no-referrer"
src="http://this.is.a.url/avatar.url/user-0.png"
width="20px"
/>
Name "":
<img
alt=""
class="_image_mcap2_50"
data-type="round"
height="20px"
loading="lazy"
referrerpolicy="no-referrer"
src="http://this.is.a.url/avatar.url/user-1.png"
width="20px"
/>
--------------------------------------------------
button:
Name "Room info":
<button
aria-label="Room info"
class="mx_RoomHeader_infoWrapper"
tabindex="0"
/>
Name "Room info":
<button
aria-label="Room info"
aria-labelledby=":r87:"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
/>
Name "People":
<div
aria-label="2 members"
aria-labelledby=":r8c:"
class="mx_AccessibleButton mx_FacePile"
role="button"
tabindex="0"
/>
--------------------------------------------------
heading:
Name "!1:example.org":
<div
aria-level="1"
class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83 mx_RoomHeader_heading"
dir="auto"
role="heading"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<header
class="mx_Flex mx_RoomHeader light-panel"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
>
<div
class="mx_DecoratedRoomAvatar mx_DecoratedRoomAvatar_cutout"
>
<div
class="mx_DecoratedRoomAvatar_positionedParent"
>
<span
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
data-color="3"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 40px;"
>
!
</span>
<div
aria-labelledby=":r82:"
class="mx_DecoratedRoomAvatar_icon mx_DecoratedRoomAvatar_icon_forum"
tabindex="0"
/>
</div>
</div>
<button
aria-label="Room info"
class="mx_RoomHeader_infoWrapper"
tabindex="0"
>
<div
class="mx_Box mx_RoomHeader_info mx_Box--flex"
style="--mx-box-flex: 1;"
>
<div
aria-level="1"
class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83 mx_RoomHeader_heading"
dir="auto"
role="heading"
>
<span
class="mx_RoomHeader_truncated mx_lineClamp"
>
!1:example.org
</span>
</div>
</div>
</button>
<div
class="mx_Flex"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
>
<button
aria-label="Room
|
|
Run tests:
test/unit-tests/components/views/rooms/RoomHeader-test.tsx#L286
TestingLibraryElementError: Unable to find a label with the text of: Ongoing call
Ignored nodes: comments, script, style
<div>
<header
class="mx_Flex mx_RoomHeader light-panel"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
>
<div
class="mx_DecoratedRoomAvatar mx_DecoratedRoomAvatar_cutout"
>
<div
class="mx_DecoratedRoomAvatar_positionedParent"
>
<span
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
data-color="3"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 40px;"
>
!
</span>
<div
aria-labelledby=":r8k:"
class="mx_DecoratedRoomAvatar_icon mx_DecoratedRoomAvatar_icon_forum"
tabindex="0"
/>
</div>
</div>
<button
aria-label="Room info"
class="mx_RoomHeader_infoWrapper"
tabindex="0"
>
<div
class="mx_Box mx_RoomHeader_info mx_Box--flex"
style="--mx-box-flex: 1;"
>
<div
aria-level="1"
class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83 mx_RoomHeader_heading"
dir="auto"
role="heading"
>
<span
class="mx_RoomHeader_truncated mx_lineClamp"
>
!1:example.org
</span>
</div>
</div>
</button>
<div
class="mx_Flex"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
>
<button
aria-label="Room info"
aria-labelledby=":r8p:"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16v-4a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 11a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 12v4c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-8c.283 0 .52-.096.713-.287A.967.967 0 0 0 13 8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 13a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
/>
</svg>
</div>
</button>
</div>
<div
class="_typography_yh5dq_162 _font-body-sm-medium_yh5dq_50"
>
<div
aria-label="2 members"
aria-labelledby=":r8u:"
class="mx_AccessibleButton mx_FacePile"
role="button"
tabindex="0"
>
<div
class="_stacked-avatars_mcap2_111"
>
<span
aria-label="Profile picture"
class="_avatar_mcap2_17 mx_BaseAvatar"
data-color="3"
data-testid="avatar-img"
data-type="round"
style="--cpd-avatar-size: 20px;"
>
<img
alt=""
class="_image_mcap2_50"
data-type="round"
height="20px"
loading="lazy"
referrerpolicy="no-referrer"
src="http://this.is.a.url/avatar.url/user-0.png"
width="20px"
/>
<
|
Loading