nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Replace checkboxes with Compound checkboxes, and appropriately label each checkbox. (#29363)

Browse Source 
* Fix labelling of avatar menu

* Make the integration manager toggle more clear.

* fix label

* lint

* Update snapshots.

* Refactor many cases of checkbox to use the new compound component.

* Remove non-checkbox related changes

* Reset some things

* Remove usages of mx_checkbox* styling.

* Use label locators for apperance tests.

* small linter tweaks

* lint

* update screenshot

* Test updates

* lint

* Realign checkboxes for device selection.

* Fixup QuickSettings styling

* remove comment

* lint

* flex comment

* remove unused label

* remove redundant classes

* add test for spaces

* lint

* Copyright

* fixup spaces test

* spaces lint

* Replace pin with compound pin.

* Realign icons

* Remove hack for colouring icons

* Adjust existing rooms component to correctly label room.

* Add test for adding an existing room to an existing space.

* Set deterministic sort order for rooms

* lint
This commit is contained in:
Will Hunt
2025-03-20 15:35:54 +00:00
committed by GitHub
parent 170dcd1c0e
commit 599112e122
43 changed files with 2361 additions and 1436 deletions
Download Patch File Download Diff File Expand all files Collapse all files

294
test/unit-tests/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap
View File

@@ -58,6 +58,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
role="tree"
>
<li
aria-labelledby=":r8:"
class="mx_SpaceHierarchy_roomTileWrapper"
role="treeitem"
>
@@ -86,7 +87,11 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
<div
class="mx_SpaceHierarchy_roomTile_name"
>
Unnamed Room
<span
id=":r8:"
>
Unnamed Room
</span>
</div>
<div
class="mx_SpaceHierarchy_roomTile_info"
@@ -104,30 +109,54 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
>
Join
</div>
<span
class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
<form
class="_root_19upo_16"
>
<input
id="checkbox_vY7Q4uEh9K"
tabindex="0"
type="checkbox"
/>
<label
for="checkbox_vY7Q4uEh9K"
<div
class="_inline-field_19upo_32"
>
<div
class="mx_Checkbox_background"
class="_inline-field-control_19upo_44"
>
<div
class="mx_Checkbox_checkmark"
/>
class="_container_1hel1_10"
>
<input
aria-labelledby=":r8:"
class="_input_1hel1_18"
id="checkbox_MwbPDmfGtm"
role="presentation"
tabindex="-1"
type="checkbox"
/>
<div
class="_ui_1hel1_19"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
/>
</svg>
</div>
</div>
</div>
</label>
</span>
<div
class="_inline-field-body_19upo_38"
/>
</div>
</form>
</div>
</div>
</li>
<li
aria-labelledby=":rc:"
class="mx_SpaceHierarchy_roomTileWrapper"
role="treeitem"
>
@@ -156,7 +185,11 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
<div
class="mx_SpaceHierarchy_roomTile_name"
>
Unnamed Room
<span
id=":rc:"
>
Unnamed Room
</span>
</div>
<div
class="mx_SpaceHierarchy_roomTile_info"
@@ -174,30 +207,54 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
>
Join
</div>
<span
class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
<form
class="_root_19upo_16"
>
<input
id="checkbox_38QgU2Pomx"
tabindex="-1"
type="checkbox"
/>
<label
for="checkbox_38QgU2Pomx"
<div
class="_inline-field_19upo_32"
>
<div
class="mx_Checkbox_background"
class="_inline-field-control_19upo_44"
>
<div
class="mx_Checkbox_checkmark"
/>
class="_container_1hel1_10"
>
<input
aria-labelledby=":rc:"
class="_input_1hel1_18"
id="checkbox_GQvdMWe954"
role="presentation"
tabindex="-1"
type="checkbox"
/>
<div
class="_ui_1hel1_19"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
/>
</svg>
</div>
</div>
</div>
</label>
</span>
<div
class="_inline-field-body_19upo_38"
/>
</div>
</form>
</div>
</div>
</li>
<li
aria-labelledby=":rg:"
class="mx_SpaceHierarchy_roomTileWrapper"
role="treeitem"
>
@@ -226,7 +283,11 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
<div
class="mx_SpaceHierarchy_roomTile_name"
>
Knock room
<span
id=":rg:"
>
Knock room
</span>
</div>
<div
class="mx_SpaceHierarchy_roomTile_info"
@@ -244,31 +305,55 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
>
View
</div>
<span
class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
<form
class="_root_19upo_16"
>
<input
id="checkbox_wKpa6hpi3Y"
tabindex="-1"
type="checkbox"
/>
<label
for="checkbox_wKpa6hpi3Y"
<div
class="_inline-field_19upo_32"
>
<div
class="mx_Checkbox_background"
class="_inline-field-control_19upo_44"
>
<div
class="mx_Checkbox_checkmark"
/>
class="_container_1hel1_10"
>
<input
aria-labelledby=":rg:"
class="_input_1hel1_18"
id="checkbox_DVIAu5CsiH"
role="presentation"
tabindex="-1"
type="checkbox"
/>
<div
class="_ui_1hel1_19"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
/>
</svg>
</div>
</div>
</div>
</label>
</span>
<div
class="_inline-field-body_19upo_38"
/>
</div>
</form>
</div>
</div>
</li>
<li
aria-expanded="true"
aria-labelledby=":rk:"
class="mx_SpaceHierarchy_roomTileWrapper"
role="treeitem"
>
@@ -297,7 +382,11 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
<div
class="mx_SpaceHierarchy_roomTile_name"
>
Nested space
<span
id=":rk:"
>
Nested space
</span>
</div>
<div
class="mx_SpaceHierarchy_roomTile_info"
@@ -315,26 +404,49 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
>
Join
</div>
<span
class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
<form
class="_root_19upo_16"
>
<input
id="checkbox_EetmBG4yVC"
tabindex="-1"
type="checkbox"
/>
<label
for="checkbox_EetmBG4yVC"
<div
class="_inline-field_19upo_32"
>
<div
class="mx_Checkbox_background"
class="_inline-field-control_19upo_44"
>
<div
class="mx_Checkbox_checkmark"
/>
class="_container_1hel1_10"
>
<input
aria-labelledby=":rk:"
class="_input_1hel1_18"
id="checkbox_RD7nyrA2oh"
role="presentation"
tabindex="-1"
type="checkbox"
/>
<div
class="_ui_1hel1_19"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
/>
</svg>
</div>
</div>
</div>
</label>
</span>
<div
class="_inline-field-body_19upo_38"
/>
</div>
</form>
</div>
<div
class="mx_SpaceHierarchy_subspace_toggle mx_SpaceHierarchy_subspace_toggle_shown"
@@ -346,6 +458,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
/>
</li>
<li
aria-labelledby=":ro:"
class="mx_SpaceHierarchy_roomTileWrapper"
role="treeitem"
>
@@ -374,7 +487,11 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
<div
class="mx_SpaceHierarchy_roomTile_name"
>
Nested room
<span
id=":ro:"
>
Nested room
</span>
</div>
<div
class="mx_SpaceHierarchy_roomTile_info"
@@ -393,30 +510,53 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
Join
</div>
<span
aria-labelledby=":r8:"
aria-labelledby=":rp:"
tabindex="0"
>
<span
class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
<form
class="_root_19upo_16"
>
<input
disabled=""
id="checkbox_eEefiPqpMR"
tabindex="-1"
type="checkbox"
/>
<label
for="checkbox_eEefiPqpMR"
<div
class="_inline-field_19upo_32"
>
<div
class="mx_Checkbox_background"
class="_inline-field-control_19upo_44"
>
<div
class="mx_Checkbox_checkmark"
/>
class="_container_1hel1_10"
>
<input
aria-labelledby=":ro:"
class="_input_1hel1_18"
disabled=""
id="checkbox_jWVJIPauy1"
role="presentation"
tabindex="-1"
type="checkbox"
/>
<div
class="_ui_1hel1_19"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
/>
</svg>
</div>
</div>
</div>
</label>
</span>
<div
class="_inline-field-body_19upo_38"
/>
</div>
</form>
</span>
</div>
</div>