Use semantic headings for room settings content (#10734)

* split SettingsSection out of SettingsTab, replace usage

* correct copyright

* use semantic headings in GeneralRoomSettingsTab

* use SettingsTab and SettingsSubsection in room settings

* fix VoipRoomSettingsTab
This commit is contained in:
Kerry 2023-05-03 09:14:36 +12:00 committed by GitHub
parent e7f5261eda
commit 4736f0e44c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 439 additions and 380 deletions

View file

@ -6,50 +6,78 @@ exports[`AdvancedRoomSettingsTab should render as expected 1`] = `
class="mx_SettingsTab"
>
<div
class="mx_SettingsTab_heading"
class="mx_SettingsTab_sections"
>
Advanced
</div>
<div
class="mx_SettingsTab_section mx_SettingsTab_subsectionText"
>
<span
class="mx_SettingsTab_subheading"
<div
class="mx_SettingsSection"
>
Room information
</span>
<div>
<span>
Internal room ID
</span>
<div
class="mx_CopyableText mx_CopyableText_border"
<h2
class="mx_Heading_h2"
>
Advanced
</h2>
<div
class="mx_SettingsSection_subSections"
>
!room:example.com
<div
aria-label="Copy"
class="mx_AccessibleButton mx_CopyableText_copyButton"
role="button"
tabindex="0"
/>
class="mx_SettingsSubsection"
>
<div
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
>
Room information
</h3>
</div>
<div
class="mx_SettingsSubsection_content"
>
<div>
<span>
Internal room ID
</span>
<div
class="mx_CopyableText mx_CopyableText_border"
>
!room:example.com
<div
aria-label="Copy"
class="mx_AccessibleButton mx_CopyableText_copyButton"
role="button"
tabindex="0"
/>
</div>
</div>
</div>
</div>
<div
class="mx_SettingsSubsection"
>
<div
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
>
Room version
</h3>
</div>
<div
class="mx_SettingsSubsection_content"
>
<div>
<span>
Room version:
</span>
 1
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="mx_SettingsTab_section mx_SettingsTab_subsectionText"
>
<span
class="mx_SettingsTab_subheading"
>
Room version
</span>
<div>
<span>
Room version:
</span>
 1
</div>
</div>
</div>
</DocumentFragment>
`;

View file

@ -6,75 +6,83 @@ exports[`<BridgeSettingsTab /> renders when room is bridging messages 1`] = `
class="mx_SettingsTab"
>
<div
class="mx_SettingsTab_heading"
class="mx_SettingsTab_sections"
>
Bridges
</div>
<div
class="mx_SettingsTab_section mx_SettingsTab_subsectionText"
>
<div>
<p>
<span>
This room is bridging messages to the following platforms.
<a
href="https://matrix.org/bridges/"
rel="noreferrer noopener"
target="_blank"
>
Learn more.
</a>
</span>
</p>
<ul
class="mx_RoomSettingsDialog_BridgeList"
<div
class="mx_SettingsSection"
>
<h2
class="mx_Heading_h2"
>
<li
class="mx_RoomSettingsDialog_BridgeList_listItem"
>
<div
class="mx_RoomSettingsDialog_column_icon"
>
<div
class="mx_RoomSettingsDialog_noProtocolIcon"
/>
</div>
<div
class="mx_RoomSettingsDialog_column_data"
>
<h3
class="mx_RoomSettingsDialog_column_data_protocolName"
>
protocol-test
</h3>
<p
class="mx_RoomSettingsDialog_column_data_details mx_RoomSettingsDialog_workspace_channel_details"
>
<span
class="mx_RoomSettingsDialog_channel"
Bridges
</h2>
<div
class="mx_SettingsSection_subSections"
>
<div>
<p>
<span>
This room is bridging messages to the following platforms.
<a
href="https://matrix.org/bridges/"
rel="noreferrer noopener"
target="_blank"
>
<span>
Channel:
<span>
channel-test
</span>
</span>
</span>
</p>
<ul
class="mx_RoomSettingsDialog_column_data_metadata mx_RoomSettingsDialog_metadata"
Learn more.
</a>
</span>
</p>
<ul
class="mx_RoomSettingsDialog_BridgeList"
>
<li
class="mx_RoomSettingsDialog_BridgeList_listItem"
>
<li>
<span>
This bridge is managed by
.
</span>
</li>
</ul>
</div>
</li>
</ul>
<div
class="mx_RoomSettingsDialog_column_icon"
>
<div
class="mx_RoomSettingsDialog_noProtocolIcon"
/>
</div>
<div
class="mx_RoomSettingsDialog_column_data"
>
<h3
class="mx_RoomSettingsDialog_column_data_protocolName"
>
protocol-test
</h3>
<p
class="mx_RoomSettingsDialog_column_data_details mx_RoomSettingsDialog_workspace_channel_details"
>
<span
class="mx_RoomSettingsDialog_channel"
>
<span>
Channel:
<span>
channel-test
</span>
</span>
</span>
</p>
<ul
class="mx_RoomSettingsDialog_column_data_metadata mx_RoomSettingsDialog_metadata"
>
<li>
<span>
This bridge is managed by
.
</span>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
@ -87,25 +95,33 @@ exports[`<BridgeSettingsTab /> renders when room is not bridging messages to any
class="mx_SettingsTab"
>
<div
class="mx_SettingsTab_heading"
class="mx_SettingsTab_sections"
>
Bridges
</div>
<div
class="mx_SettingsTab_section mx_SettingsTab_subsectionText"
>
<p>
<span>
This room isn't bridging messages to any platforms.
<a
href="https://matrix.org/bridges/"
rel="noreferrer noopener"
target="_blank"
>
Learn more.
</a>
</span>
</p>
<div
class="mx_SettingsSection"
>
<h2
class="mx_Heading_h2"
>
Bridges
</h2>
<div
class="mx_SettingsSection_subSections"
>
<p>
<span>
This room isn't bridging messages to any platforms.
<a
href="https://matrix.org/bridges/"
rel="noreferrer noopener"
target="_blank"
>
Learn more.
</a>
</span>
</p>
</div>
</div>
</div>
</div>
</div>

View file

@ -9,7 +9,9 @@ exports[`RolesRoomSettingsTab Banned users renders banned users 1`] = `
>
Banned users
</legend>
<ul>
<ul
class="mx_RolesRoomSettingsTab_bannedList"
>
<li>
<span
title="Banned by @alice:server.org"