mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

[MA-50]: Provide fieldsets for groups of form controls (#29905)

Просмотр исходного кода 
Co-authored-by: Mattermost Build <build@mattermost.com>
Этот коммит содержится в:
Saurabh Sharma
2025-01-28 21:43:38 +05:30
коммит произвёл GitHub
родитель b333902bef
Коммит 1999ff9263
4 изменённых файлов: 535 добавлений и 420 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

318
webapp/channels/src/components/channel_notifications_modal/__snapshots__/channel_notifications_modal.test.tsx.snap
Просмотреть файл

@@ -62,6 +62,9 @@ Object {
</header> </header>
<main <main
class="channel-notifications-settings-modal__body" class="channel-notifications-settings-modal__body"
>
<fieldset
aria-labelledby="channel-notifications-settings-modal-legend"
> >
<section <section
class="mm-modal-generic-section" class="mm-modal-generic-section"
@@ -71,8 +74,13 @@ Object {
> >
<h4 <h4
class="modalSectionTitle" class="modalSectionTitle"
>
<legend
id="channel-notifications-settings-modal-legend"
style="all: unset;"
> >
Mute or ignore Mute or ignore
</legend>
</h4> </h4>
</div> </div>
<div <div
@@ -85,21 +93,23 @@ Object {
class="mm-modal-generic-section-item__content" class="mm-modal-generic-section-item__content"
data-testid="mm-modal-generic-section-item__content" data-testid="mm-modal-generic-section-item__content"
> >
<fieldset <div
class="mm-modal-generic-section-item__fieldset-checkbox-ctr" class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
>
<label
class="mm-modal-generic-section-item__fieldset-checkbox"
> >
<input <input
class="mm-modal-generic-section-item__input-checkbox" class="mm-modal-generic-section-item__input-checkbox"
data-testid="muteChannel" data-testid="muteChannel"
id="mute-channel"
name="mute channel" name="mute channel"
type="checkbox" type="checkbox"
/> />
<label
class="mm-modal-generic-section-item__fieldset-checkbox"
for="mute-channel"
>
Mute channel Mute channel
</label> </label>
</fieldset> </div>
</div> </div>
<p <p
class="mm-modal-generic-section-item__description" class="mm-modal-generic-section-item__description"
@@ -115,21 +125,23 @@ Object {
class="mm-modal-generic-section-item__content" class="mm-modal-generic-section-item__content"
data-testid="mm-modal-generic-section-item__content" data-testid="mm-modal-generic-section-item__content"
> >
<fieldset <div
class="mm-modal-generic-section-item__fieldset-checkbox-ctr" class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
>
<label
class="mm-modal-generic-section-item__fieldset-checkbox"
> >
<input <input
class="mm-modal-generic-section-item__input-checkbox" class="mm-modal-generic-section-item__input-checkbox"
data-testid="ignoreMentions" data-testid="ignoreMentions"
id="ignore-mentions"
name="ignore mentions" name="ignore mentions"
type="checkbox" type="checkbox"
/> />
<label
class="mm-modal-generic-section-item__fieldset-checkbox"
for="ignore-mentions"
>
Ignore mentions for @channel, @here and @all Ignore mentions for @channel, @here and @all
</label> </label>
</fieldset> </div>
</div> </div>
<p <p
class="mm-modal-generic-section-item__description" class="mm-modal-generic-section-item__description"
@@ -140,6 +152,7 @@ Object {
</div> </div>
</div> </div>
</section> </section>
</fieldset>
<div <div
class="channel-notifications-settings-modal__divider" class="channel-notifications-settings-modal__divider"
/> />
@@ -270,22 +283,24 @@ Object {
class="mm-modal-generic-section-item__content" class="mm-modal-generic-section-item__content"
data-testid="mm-modal-generic-section-item__content" data-testid="mm-modal-generic-section-item__content"
> >
<fieldset <div
class="mm-modal-generic-section-item__fieldset-checkbox-ctr" class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
>
<label
class="mm-modal-generic-section-item__fieldset-checkbox"
> >
<input <input
checked="" checked=""
class="mm-modal-generic-section-item__input-checkbox" class="mm-modal-generic-section-item__input-checkbox"
data-testid="sameMobileSettingsDesktop" data-testid="sameMobileSettingsDesktop"
id="same-mobile-settings-as-Desktop"
name="same mobile settings as Desktop" name="same mobile settings as Desktop"
type="checkbox" type="checkbox"
/> />
<label
class="mm-modal-generic-section-item__fieldset-checkbox"
for="same-mobile-settings-as-Desktop"
>
Use the same notification settings as desktop Use the same notification settings as desktop
</label> </label>
</fieldset> </div>
</div> </div>
</div> </div>
</div> </div>
@@ -320,21 +335,23 @@ Object {
class="mm-modal-generic-section-item__content" class="mm-modal-generic-section-item__content"
data-testid="mm-modal-generic-section-item__content" data-testid="mm-modal-generic-section-item__content"
> >
<fieldset <div
class="mm-modal-generic-section-item__fieldset-checkbox-ctr" class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
>
<label
class="mm-modal-generic-section-item__fieldset-checkbox"
> >
<input <input
class="mm-modal-generic-section-item__input-checkbox" class="mm-modal-generic-section-item__input-checkbox"
data-testid="autoFollowThreads" data-testid="autoFollowThreads"
id="auto-follow-threads"
name="auto follow threads" name="auto follow threads"
type="checkbox" type="checkbox"
/> />
<label
class="mm-modal-generic-section-item__fieldset-checkbox"
for="auto-follow-threads"
>
Automatically follow threads in this channel Automatically follow threads in this channel
</label> </label>
</fieldset> </div>
</div> </div>
</div> </div>
</div> </div>
@@ -481,6 +498,9 @@ Object {
</header> </header>
<main <main
class="channel-notifications-settings-modal__body" class="channel-notifications-settings-modal__body"
>
<fieldset
aria-labelledby="channel-notifications-settings-modal-legend"
> >
<section <section
class="mm-modal-generic-section" class="mm-modal-generic-section"
@@ -490,8 +510,13 @@ Object {
> >
<h4 <h4
class="modalSectionTitle" class="modalSectionTitle"
>
<legend
id="channel-notifications-settings-modal-legend"
style="all: unset;"
> >
Mute or ignore Mute or ignore
</legend>
</h4> </h4>
</div> </div>
<div <div
@@ -504,21 +529,23 @@ Object {
class="mm-modal-generic-section-item__content" class="mm-modal-generic-section-item__content"
data-testid="mm-modal-generic-section-item__content" data-testid="mm-modal-generic-section-item__content"
> >
<fieldset <div
class="mm-modal-generic-section-item__fieldset-checkbox-ctr" class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
>
<label
class="mm-modal-generic-section-item__fieldset-checkbox"
> >
<input <input
class="mm-modal-generic-section-item__input-checkbox" class="mm-modal-generic-section-item__input-checkbox"
data-testid="muteChannel" data-testid="muteChannel"
id="mute-channel"
name="mute channel" name="mute channel"
type="checkbox" type="checkbox"
/> />
<label
class="mm-modal-generic-section-item__fieldset-checkbox"
for="mute-channel"
>
Mute channel Mute channel
</label> </label>
</fieldset> </div>
</div> </div>
<p <p
class="mm-modal-generic-section-item__description" class="mm-modal-generic-section-item__description"
@@ -534,21 +561,23 @@ Object {
class="mm-modal-generic-section-item__content" class="mm-modal-generic-section-item__content"
data-testid="mm-modal-generic-section-item__content" data-testid="mm-modal-generic-section-item__content"
> >
<fieldset <div
class="mm-modal-generic-section-item__fieldset-checkbox-ctr" class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
>
<label
class="mm-modal-generic-section-item__fieldset-checkbox"
> >
<input <input
class="mm-modal-generic-section-item__input-checkbox" class="mm-modal-generic-section-item__input-checkbox"
data-testid="ignoreMentions" data-testid="ignoreMentions"
id="ignore-mentions"
name="ignore mentions" name="ignore mentions"
type="checkbox" type="checkbox"
/> />
<label
class="mm-modal-generic-section-item__fieldset-checkbox"
for="ignore-mentions"
>
Ignore mentions for @channel, @here and @all Ignore mentions for @channel, @here and @all
</label> </label>
</fieldset> </div>
</div> </div>
<p <p
class="mm-modal-generic-section-item__description" class="mm-modal-generic-section-item__description"
@@ -559,6 +588,7 @@ Object {
</div> </div>
</div> </div>
</section> </section>
</fieldset>
<div <div
class="channel-notifications-settings-modal__divider" class="channel-notifications-settings-modal__divider"
/> />
@@ -770,21 +800,23 @@ Object {
class="mm-modal-generic-section-item__content" class="mm-modal-generic-section-item__content"
data-testid="mm-modal-generic-section-item__content" data-testid="mm-modal-generic-section-item__content"
> >
<fieldset <div
class="mm-modal-generic-section-item__fieldset-checkbox-ctr" class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
>
<label
class="mm-modal-generic-section-item__fieldset-checkbox"
> >
<input <input
class="mm-modal-generic-section-item__input-checkbox" class="mm-modal-generic-section-item__input-checkbox"
data-testid="sameMobileSettingsDesktop" data-testid="sameMobileSettingsDesktop"
id="same-mobile-settings-as-Desktop"
name="same mobile settings as Desktop" name="same mobile settings as Desktop"
type="checkbox" type="checkbox"
/> />
<label
class="mm-modal-generic-section-item__fieldset-checkbox"
for="same-mobile-settings-as-Desktop"
>
Use the same notification settings as desktop Use the same notification settings as desktop
</label> </label>
</fieldset> </div>
</div> </div>
</div> </div>
<div <div
@@ -877,21 +909,23 @@ Object {
class="mm-modal-generic-section-item__content" class="mm-modal-generic-section-item__content"
data-testid="mm-modal-generic-section-item__content" data-testid="mm-modal-generic-section-item__content"
> >
<fieldset <div
class="mm-modal-generic-section-item__fieldset-checkbox-ctr" class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
>
<label
class="mm-modal-generic-section-item__fieldset-checkbox"
> >
<input <input
class="mm-modal-generic-section-item__input-checkbox" class="mm-modal-generic-section-item__input-checkbox"
data-testid="autoFollowThreads" data-testid="autoFollowThreads"
id="auto-follow-threads"
name="auto follow threads" name="auto follow threads"
type="checkbox" type="checkbox"
/> />
<label
class="mm-modal-generic-section-item__fieldset-checkbox"
for="auto-follow-threads"
>
Automatically follow threads in this channel Automatically follow threads in this channel
</label> </label>
</fieldset> </div>
</div> </div>
</div> </div>
</div> </div>
@@ -1038,6 +1072,9 @@ Object {
</header> </header>
<main <main
class="channel-notifications-settings-modal__body" class="channel-notifications-settings-modal__body"
>
<fieldset
aria-labelledby="channel-notifications-settings-modal-legend"
> >
<section <section
class="mm-modal-generic-section" class="mm-modal-generic-section"
@@ -1047,8 +1084,13 @@ Object {
> >
<h4 <h4
class="modalSectionTitle" class="modalSectionTitle"
>
<legend
id="channel-notifications-settings-modal-legend"
style="all: unset;"
> >
Mute or ignore Mute or ignore
</legend>
</h4> </h4>
</div> </div>
<div <div
@@ -1061,21 +1103,23 @@ Object {
class="mm-modal-generic-section-item__content" class="mm-modal-generic-section-item__content"
data-testid="mm-modal-generic-section-item__content" data-testid="mm-modal-generic-section-item__content"
> >
<fieldset <div
class="mm-modal-generic-section-item__fieldset-checkbox-ctr" class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
>
<label
class="mm-modal-generic-section-item__fieldset-checkbox"
> >
<input <input
class="mm-modal-generic-section-item__input-checkbox" class="mm-modal-generic-section-item__input-checkbox"
data-testid="muteChannel" data-testid="muteChannel"
id="mute-channel"
name="mute channel" name="mute channel"
type="checkbox" type="checkbox"
/> />
<label
class="mm-modal-generic-section-item__fieldset-checkbox"
for="mute-channel"
>
Mute channel Mute channel
</label> </label>
</fieldset> </div>
</div> </div>
<p <p
class="mm-modal-generic-section-item__description" class="mm-modal-generic-section-item__description"
@@ -1091,21 +1135,23 @@ Object {
class="mm-modal-generic-section-item__content" class="mm-modal-generic-section-item__content"
data-testid="mm-modal-generic-section-item__content" data-testid="mm-modal-generic-section-item__content"
> >
<fieldset <div
class="mm-modal-generic-section-item__fieldset-checkbox-ctr" class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
>
<label
class="mm-modal-generic-section-item__fieldset-checkbox"
> >
<input <input
class="mm-modal-generic-section-item__input-checkbox" class="mm-modal-generic-section-item__input-checkbox"
data-testid="ignoreMentions" data-testid="ignoreMentions"
id="ignore-mentions"
name="ignore mentions" name="ignore mentions"
type="checkbox" type="checkbox"
/> />
<label
class="mm-modal-generic-section-item__fieldset-checkbox"
for="ignore-mentions"
>
Ignore mentions for @channel, @here and @all Ignore mentions for @channel, @here and @all
</label> </label>
</fieldset> </div>
</div> </div>
<p <p
class="mm-modal-generic-section-item__description" class="mm-modal-generic-section-item__description"
@@ -1116,6 +1162,7 @@ Object {
</div> </div>
</div> </div>
</section> </section>
</fieldset>
<div <div
class="AlertBanner info AlertBanner--app" class="AlertBanner info AlertBanner--app"
data-testid="channelNotificationsMutedBanner" data-testid="channelNotificationsMutedBanner"
@@ -1181,21 +1228,23 @@ Object {
class="mm-modal-generic-section-item__content" class="mm-modal-generic-section-item__content"
data-testid="mm-modal-generic-section-item__content" data-testid="mm-modal-generic-section-item__content"
> >
<fieldset <div
class="mm-modal-generic-section-item__fieldset-checkbox-ctr" class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
>
<label
class="mm-modal-generic-section-item__fieldset-checkbox"
> >
<input <input
class="mm-modal-generic-section-item__input-checkbox" class="mm-modal-generic-section-item__input-checkbox"
data-testid="autoFollowThreads" data-testid="autoFollowThreads"
id="auto-follow-threads"
name="auto follow threads" name="auto follow threads"
type="checkbox" type="checkbox"
/> />
<label
class="mm-modal-generic-section-item__fieldset-checkbox"
for="auto-follow-threads"
>
Automatically follow threads in this channel Automatically follow threads in this channel
</label> </label>
</fieldset> </div>
</div> </div>
</div> </div>
</div> </div>
@@ -1342,6 +1391,9 @@ Object {
</header> </header>
<main <main
class="channel-notifications-settings-modal__body" class="channel-notifications-settings-modal__body"
>
<fieldset
aria-labelledby="channel-notifications-settings-modal-legend"
> >
<section <section
class="mm-modal-generic-section" class="mm-modal-generic-section"
@@ -1351,8 +1403,13 @@ Object {
> >
<h4 <h4
class="modalSectionTitle" class="modalSectionTitle"
>
<legend
id="channel-notifications-settings-modal-legend"
style="all: unset;"
> >
Mute or ignore Mute or ignore
</legend>
</h4> </h4>
</div> </div>
<div <div
@@ -1365,21 +1422,23 @@ Object {
class="mm-modal-generic-section-item__content" class="mm-modal-generic-section-item__content"
data-testid="mm-modal-generic-section-item__content" data-testid="mm-modal-generic-section-item__content"
> >
<fieldset <div
class="mm-modal-generic-section-item__fieldset-checkbox-ctr" class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
>
<label
class="mm-modal-generic-section-item__fieldset-checkbox"
> >
<input <input
class="mm-modal-generic-section-item__input-checkbox" class="mm-modal-generic-section-item__input-checkbox"
data-testid="muteChannel" data-testid="muteChannel"
id="mute-channel"
name="mute channel" name="mute channel"
type="checkbox" type="checkbox"
/> />
<label
class="mm-modal-generic-section-item__fieldset-checkbox"
for="mute-channel"
>
Mute channel Mute channel
</label> </label>
</fieldset> </div>
</div> </div>
<p <p
class="mm-modal-generic-section-item__description" class="mm-modal-generic-section-item__description"
@@ -1395,21 +1454,23 @@ Object {
class="mm-modal-generic-section-item__content" class="mm-modal-generic-section-item__content"
data-testid="mm-modal-generic-section-item__content" data-testid="mm-modal-generic-section-item__content"
> >
<fieldset <div
class="mm-modal-generic-section-item__fieldset-checkbox-ctr" class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
>
<label
class="mm-modal-generic-section-item__fieldset-checkbox"
> >
<input <input
class="mm-modal-generic-section-item__input-checkbox" class="mm-modal-generic-section-item__input-checkbox"
data-testid="ignoreMentions" data-testid="ignoreMentions"
id="ignore-mentions"
name="ignore mentions" name="ignore mentions"
type="checkbox" type="checkbox"
/> />
<label
class="mm-modal-generic-section-item__fieldset-checkbox"
for="ignore-mentions"
>
Ignore mentions for @channel, @here and @all Ignore mentions for @channel, @here and @all
</label> </label>
</fieldset> </div>
</div> </div>
<p <p
class="mm-modal-generic-section-item__description" class="mm-modal-generic-section-item__description"
@@ -1420,6 +1481,7 @@ Object {
</div> </div>
</div> </div>
</section> </section>
</fieldset>
<div <div
class="channel-notifications-settings-modal__divider" class="channel-notifications-settings-modal__divider"
/> />
@@ -1631,22 +1693,24 @@ Object {
class="mm-modal-generic-section-item__content" class="mm-modal-generic-section-item__content"
data-testid="mm-modal-generic-section-item__content" data-testid="mm-modal-generic-section-item__content"
> >
<fieldset <div
class="mm-modal-generic-section-item__fieldset-checkbox-ctr" class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
>
<label
class="mm-modal-generic-section-item__fieldset-checkbox"
> >
<input <input
checked="" checked=""
class="mm-modal-generic-section-item__input-checkbox" class="mm-modal-generic-section-item__input-checkbox"
data-testid="sameMobileSettingsDesktop" data-testid="sameMobileSettingsDesktop"
id="same-mobile-settings-as-Desktop"
name="same mobile settings as Desktop" name="same mobile settings as Desktop"
type="checkbox" type="checkbox"
/> />
<label
class="mm-modal-generic-section-item__fieldset-checkbox"
for="same-mobile-settings-as-Desktop"
>
Use the same notification settings as desktop Use the same notification settings as desktop
</label> </label>
</fieldset> </div>
</div> </div>
</div> </div>
</div> </div>
@@ -1681,21 +1745,23 @@ Object {
class="mm-modal-generic-section-item__content" class="mm-modal-generic-section-item__content"
data-testid="mm-modal-generic-section-item__content" data-testid="mm-modal-generic-section-item__content"
> >
<fieldset <div
class="mm-modal-generic-section-item__fieldset-checkbox-ctr" class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
>
<label
class="mm-modal-generic-section-item__fieldset-checkbox"
> >
<input <input
class="mm-modal-generic-section-item__input-checkbox" class="mm-modal-generic-section-item__input-checkbox"
data-testid="autoFollowThreads" data-testid="autoFollowThreads"
id="auto-follow-threads"
name="auto follow threads" name="auto follow threads"
type="checkbox" type="checkbox"
/> />
<label
class="mm-modal-generic-section-item__fieldset-checkbox"
for="auto-follow-threads"
>
Automatically follow threads in this channel Automatically follow threads in this channel
</label> </label>
</fieldset> </div>
</div> </div>
</div> </div>
</div> </div>
@@ -1842,6 +1908,9 @@ Object {
</header> </header>
<main <main
class="channel-notifications-settings-modal__body" class="channel-notifications-settings-modal__body"
>
<fieldset
aria-labelledby="channel-notifications-settings-modal-legend"
> >
<section <section
class="mm-modal-generic-section" class="mm-modal-generic-section"
@@ -1851,8 +1920,13 @@ Object {
> >
<h4 <h4
class="modalSectionTitle" class="modalSectionTitle"
>
<legend
id="channel-notifications-settings-modal-legend"
style="all: unset;"
> >
Mute or ignore Mute or ignore
</legend>
</h4> </h4>
</div> </div>
<div <div
@@ -1865,21 +1939,23 @@ Object {
class="mm-modal-generic-section-item__content" class="mm-modal-generic-section-item__content"
data-testid="mm-modal-generic-section-item__content" data-testid="mm-modal-generic-section-item__content"
> >
<fieldset <div
class="mm-modal-generic-section-item__fieldset-checkbox-ctr" class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
>
<label
class="mm-modal-generic-section-item__fieldset-checkbox"
> >
<input <input
class="mm-modal-generic-section-item__input-checkbox" class="mm-modal-generic-section-item__input-checkbox"
data-testid="muteChannel" data-testid="muteChannel"
id="mute-channel"
name="mute channel" name="mute channel"
type="checkbox" type="checkbox"
/> />
<label
class="mm-modal-generic-section-item__fieldset-checkbox"
for="mute-channel"
>
Mute channel Mute channel
</label> </label>
</fieldset> </div>
</div> </div>
<p <p
class="mm-modal-generic-section-item__description" class="mm-modal-generic-section-item__description"
@@ -1895,21 +1971,23 @@ Object {
class="mm-modal-generic-section-item__content" class="mm-modal-generic-section-item__content"
data-testid="mm-modal-generic-section-item__content" data-testid="mm-modal-generic-section-item__content"
> >
<fieldset <div
class="mm-modal-generic-section-item__fieldset-checkbox-ctr" class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
>
<label
class="mm-modal-generic-section-item__fieldset-checkbox"
> >
<input <input
class="mm-modal-generic-section-item__input-checkbox" class="mm-modal-generic-section-item__input-checkbox"
data-testid="ignoreMentions" data-testid="ignoreMentions"
id="ignore-mentions"
name="ignore mentions" name="ignore mentions"
type="checkbox" type="checkbox"
/> />
<label
class="mm-modal-generic-section-item__fieldset-checkbox"
for="ignore-mentions"
>
Ignore mentions for @channel, @here and @all Ignore mentions for @channel, @here and @all
</label> </label>
</fieldset> </div>
</div> </div>
<p <p
class="mm-modal-generic-section-item__description" class="mm-modal-generic-section-item__description"
@@ -1920,6 +1998,7 @@ Object {
</div> </div>
</div> </div>
</section> </section>
</fieldset>
<div <div
class="channel-notifications-settings-modal__divider" class="channel-notifications-settings-modal__divider"
/> />
@@ -2131,22 +2210,24 @@ Object {
class="mm-modal-generic-section-item__content" class="mm-modal-generic-section-item__content"
data-testid="mm-modal-generic-section-item__content" data-testid="mm-modal-generic-section-item__content"
> >
<fieldset <div
class="mm-modal-generic-section-item__fieldset-checkbox-ctr" class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
>
<label
class="mm-modal-generic-section-item__fieldset-checkbox"
> >
<input <input
checked="" checked=""
class="mm-modal-generic-section-item__input-checkbox" class="mm-modal-generic-section-item__input-checkbox"
data-testid="sameMobileSettingsDesktop" data-testid="sameMobileSettingsDesktop"
id="same-mobile-settings-as-Desktop"
name="same mobile settings as Desktop" name="same mobile settings as Desktop"
type="checkbox" type="checkbox"
/> />
<label
class="mm-modal-generic-section-item__fieldset-checkbox"
for="same-mobile-settings-as-Desktop"
>
Use the same notification settings as desktop Use the same notification settings as desktop
</label> </label>
</fieldset> </div>
</div> </div>
</div> </div>
</div> </div>
@@ -2181,21 +2262,23 @@ Object {
class="mm-modal-generic-section-item__content" class="mm-modal-generic-section-item__content"
data-testid="mm-modal-generic-section-item__content" data-testid="mm-modal-generic-section-item__content"
> >
<fieldset <div
class="mm-modal-generic-section-item__fieldset-checkbox-ctr" class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
>
<label
class="mm-modal-generic-section-item__fieldset-checkbox"
> >
<input <input
class="mm-modal-generic-section-item__input-checkbox" class="mm-modal-generic-section-item__input-checkbox"
data-testid="autoFollowThreads" data-testid="autoFollowThreads"
id="auto-follow-threads"
name="auto follow threads" name="auto follow threads"
type="checkbox" type="checkbox"
/> />
<label
class="mm-modal-generic-section-item__fieldset-checkbox"
for="auto-follow-threads"
>
Automatically follow threads in this channel Automatically follow threads in this channel
</label> </label>
</fieldset> </div>
</div> </div>
</div> </div>
</div> </div>
@@ -2342,6 +2425,9 @@ Object {
</header> </header>
<main <main
class="channel-notifications-settings-modal__body" class="channel-notifications-settings-modal__body"
>
<fieldset
aria-labelledby="channel-notifications-settings-modal-legend"
> >
<section <section
class="mm-modal-generic-section" class="mm-modal-generic-section"
@@ -2351,8 +2437,13 @@ Object {
> >
<h4 <h4
class="modalSectionTitle" class="modalSectionTitle"
>
<legend
id="channel-notifications-settings-modal-legend"
style="all: unset;"
> >
Mute or ignore Mute or ignore
</legend>
</h4> </h4>
</div> </div>
<div <div
@@ -2365,21 +2456,23 @@ Object {
class="mm-modal-generic-section-item__content" class="mm-modal-generic-section-item__content"
data-testid="mm-modal-generic-section-item__content" data-testid="mm-modal-generic-section-item__content"
> >
<fieldset <div
class="mm-modal-generic-section-item__fieldset-checkbox-ctr" class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
>
<label
class="mm-modal-generic-section-item__fieldset-checkbox"
> >
<input <input
class="mm-modal-generic-section-item__input-checkbox" class="mm-modal-generic-section-item__input-checkbox"
data-testid="muteChannel" data-testid="muteChannel"
id="mute-channel"
name="mute channel" name="mute channel"
type="checkbox" type="checkbox"
/> />
<label
class="mm-modal-generic-section-item__fieldset-checkbox"
for="mute-channel"
>
Mute channel Mute channel
</label> </label>
</fieldset> </div>
</div> </div>
<p <p
class="mm-modal-generic-section-item__description" class="mm-modal-generic-section-item__description"
@@ -2395,21 +2488,23 @@ Object {
class="mm-modal-generic-section-item__content" class="mm-modal-generic-section-item__content"
data-testid="mm-modal-generic-section-item__content" data-testid="mm-modal-generic-section-item__content"
> >
<fieldset <div
class="mm-modal-generic-section-item__fieldset-checkbox-ctr" class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
>
<label
class="mm-modal-generic-section-item__fieldset-checkbox"
> >
<input <input
class="mm-modal-generic-section-item__input-checkbox" class="mm-modal-generic-section-item__input-checkbox"
data-testid="ignoreMentions" data-testid="ignoreMentions"
id="ignore-mentions"
name="ignore mentions" name="ignore mentions"
type="checkbox" type="checkbox"
/> />
<label
class="mm-modal-generic-section-item__fieldset-checkbox"
for="ignore-mentions"
>
Ignore mentions for @channel, @here and @all Ignore mentions for @channel, @here and @all
</label> </label>
</fieldset> </div>
</div> </div>
<p <p
class="mm-modal-generic-section-item__description" class="mm-modal-generic-section-item__description"
@@ -2420,6 +2515,7 @@ Object {
</div> </div>
</div> </div>
</section> </section>
</fieldset>
<div <div
class="channel-notifications-settings-modal__divider" class="channel-notifications-settings-modal__divider"
/> />
@@ -2631,22 +2727,24 @@ Object {
class="mm-modal-generic-section-item__content" class="mm-modal-generic-section-item__content"
data-testid="mm-modal-generic-section-item__content" data-testid="mm-modal-generic-section-item__content"
> >
<fieldset <div
class="mm-modal-generic-section-item__fieldset-checkbox-ctr" class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
>
<label
class="mm-modal-generic-section-item__fieldset-checkbox"
> >
<input <input
checked="" checked=""
class="mm-modal-generic-section-item__input-checkbox" class="mm-modal-generic-section-item__input-checkbox"
data-testid="sameMobileSettingsDesktop" data-testid="sameMobileSettingsDesktop"
id="same-mobile-settings-as-Desktop"
name="same mobile settings as Desktop" name="same mobile settings as Desktop"
type="checkbox" type="checkbox"
/> />
<label
class="mm-modal-generic-section-item__fieldset-checkbox"
for="same-mobile-settings-as-Desktop"
>
Use the same notification settings as desktop Use the same notification settings as desktop
</label> </label>
</fieldset> </div>
</div> </div>
</div> </div>
</div> </div>

11
webapp/channels/src/components/channel_notifications_modal/channel_notifications_modal.tsx
Просмотреть файл

@@ -364,13 +364,22 @@ export default function ChannelNotificationsModal(props: Props) {
handleClose={handleHide} handleClose={handleHide}
/> />
<main className='channel-notifications-settings-modal__body'> <main className='channel-notifications-settings-modal__body'>
<fieldset aria-labelledby='channel-notifications-settings-modal-legend'>
<ModalSection <ModalSection
title={formatMessage({ title={
<legend
style={{all: 'unset'}}
id='channel-notifications-settings-modal-legend'
>
{formatMessage({
id: 'channel_notifications.muteAndIgnore', id: 'channel_notifications.muteAndIgnore',
defaultMessage: 'Mute or ignore', defaultMessage: 'Mute or ignore',
})} })}
</legend>
}
content={muteOrIgnoreSectionContent} content={muteOrIgnoreSectionContent}
/> />
</fieldset>
{desktopAndMobileNotificationSectionContent} {desktopAndMobileNotificationSectionContent}
{props.collapsedReplyThreads && {props.collapsedReplyThreads &&
<> <>

4
webapp/channels/src/components/widgets/modals/components/base_setting_item.scss
Просмотреть файл

@@ -60,12 +60,16 @@
&__fieldset-checkbox-ctr { &__fieldset-checkbox-ctr {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center;
margin-bottom: 5px;
gap: 8px;
} }
&__fieldset-checkbox { &__fieldset-checkbox {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
margin-bottom: 0;
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 14px;
gap: 8px; gap: 8px;

10
webapp/channels/src/components/widgets/modals/components/checkbox_setting_item.tsx
Просмотреть файл

@@ -37,22 +37,26 @@ export default function CheckboxSettingItem({
descriptionAboveContent = false, descriptionAboveContent = false,
}: Props) { }: Props) {
const content = ( const content = (
<fieldset <div
key={inputFieldData.name} key={inputFieldData.name}
className='mm-modal-generic-section-item__fieldset-checkbox-ctr' className='mm-modal-generic-section-item__fieldset-checkbox-ctr'
> >
<label className='mm-modal-generic-section-item__fieldset-checkbox'>
<input <input
className='mm-modal-generic-section-item__input-checkbox' className='mm-modal-generic-section-item__input-checkbox'
data-testid={inputFieldData.dataTestId} data-testid={inputFieldData.dataTestId}
type='checkbox' type='checkbox'
name={inputFieldData.name} name={inputFieldData.name}
id={inputFieldData.name.replaceAll(' ', '-')}
checked={inputFieldValue} checked={inputFieldValue}
onChange={(e) => handleChange(e.target.checked)} onChange={(e) => handleChange(e.target.checked)}
/> />
<label
htmlFor={inputFieldData.name.replaceAll(' ', '-')}
className='mm-modal-generic-section-item__fieldset-checkbox'
>
{inputFieldTitle} {inputFieldTitle}
</label> </label>
</fieldset> </div>
); );
return ( return (