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

[MM-61683]: Ensure radio button groups are properly formed (#30013)

Просмотр исходного кода 
* MM-61683: Ensure radio button groups are properly formed

* MM-61683: Fix the failing i18 CI

* MM-61683: Fix desktop notification translation IDs

* MM-61683: Fix lint-style

* MM-61683: Update name attribute inside channel notification modal
Add aria-label inside RadioSettingItem
Update snapshot

* MM-61683: Revert creating a constant for default messages and id

* MM-61683: Add legend tag inside radio setting item component

* MM-61683: Update snapshot

---------

Co-authored-by: Saurabh Sharma <saurabh.sharma@brightscout.com>
Co-authored-by: Mattermost Build <build@mattermost.com>
Этот коммит содержится в:
ayush-chauhan233
2025-02-11 21:16:06 +05:30
коммит произвёл GitHub
родитель d3dcc74e5a
Коммит 9aaa52136c
4 изменённых файлов: 195 добавлений и 162 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

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

@@ -201,6 +201,11 @@ Object {
<fieldset <fieldset
class="mm-modal-generic-section-item__fieldset-radio" class="mm-modal-generic-section-item__fieldset-radio"
> >
<legend
class="hidden-label"
>
Notify me about…
</legend>
<label <label
class="mm-modal-generic-section-item__label-radio" class="mm-modal-generic-section-item__label-radio"
> >
@@ -208,7 +213,7 @@ Object {
checked="" checked=""
data-testid="desktopNotification-all" data-testid="desktopNotification-all"
id="desktopNotification-all" id="desktopNotification-all"
name="desktopNotification-all" name="desktop"
type="radio" type="radio"
value="all" value="all"
/> />
@@ -221,7 +226,7 @@ Object {
<input <input
data-testid="desktopNotification-mention" data-testid="desktopNotification-mention"
id="desktopNotification-mention" id="desktopNotification-mention"
name="desktopNotification-mention" name="desktop"
type="radio" type="radio"
value="mention" value="mention"
/> />
@@ -233,7 +238,7 @@ Object {
<input <input
data-testid="desktopNotification-none" data-testid="desktopNotification-none"
id="desktopNotification-none" id="desktopNotification-none"
name="desktopNotification-none" name="desktop"
type="radio" type="radio"
value="none" value="none"
/> />
@@ -637,6 +642,11 @@ Object {
<fieldset <fieldset
class="mm-modal-generic-section-item__fieldset-radio" class="mm-modal-generic-section-item__fieldset-radio"
> >
<legend
class="hidden-label"
>
Notify me about…
</legend>
<label <label
class="mm-modal-generic-section-item__label-radio" class="mm-modal-generic-section-item__label-radio"
> >
@@ -644,7 +654,7 @@ Object {
checked="" checked=""
data-testid="desktopNotification-all" data-testid="desktopNotification-all"
id="desktopNotification-all" id="desktopNotification-all"
name="desktopNotification-all" name="desktop"
type="radio" type="radio"
value="all" value="all"
/> />
@@ -657,7 +667,7 @@ Object {
<input <input
data-testid="desktopNotification-mention" data-testid="desktopNotification-mention"
id="desktopNotification-mention" id="desktopNotification-mention"
name="desktopNotification-mention" name="desktop"
type="radio" type="radio"
value="mention" value="mention"
/> />
@@ -669,7 +679,7 @@ Object {
<input <input
data-testid="desktopNotification-none" data-testid="desktopNotification-none"
id="desktopNotification-none" id="desktopNotification-none"
name="desktopNotification-none" name="desktop"
type="radio" type="radio"
value="none" value="none"
/> />
@@ -836,13 +846,18 @@ Object {
<fieldset <fieldset
class="mm-modal-generic-section-item__fieldset-radio" class="mm-modal-generic-section-item__fieldset-radio"
> >
<legend
class="hidden-label"
>
Notify me about…
</legend>
<label <label
class="mm-modal-generic-section-item__label-radio" class="mm-modal-generic-section-item__label-radio"
> >
<input <input
data-testid="MobileNotification-all" data-testid="MobileNotification-all"
id="MobileNotification-all" id="MobileNotification-all"
name="MobileNotification-all" name="push"
type="radio" type="radio"
value="all" value="all"
/> />
@@ -855,7 +870,7 @@ Object {
checked="" checked=""
data-testid="MobileNotification-mention" data-testid="MobileNotification-mention"
id="MobileNotification-mention" id="MobileNotification-mention"
name="MobileNotification-mention" name="push"
type="radio" type="radio"
value="mention" value="mention"
/> />
@@ -868,7 +883,7 @@ Object {
<input <input
data-testid="MobileNotification-none" data-testid="MobileNotification-none"
id="MobileNotification-none" id="MobileNotification-none"
name="MobileNotification-none" name="push"
type="radio" type="radio"
value="none" value="none"
/> />
@@ -1530,6 +1545,11 @@ Object {
<fieldset <fieldset
class="mm-modal-generic-section-item__fieldset-radio" class="mm-modal-generic-section-item__fieldset-radio"
> >
<legend
class="hidden-label"
>
Notify me about…
</legend>
<label <label
class="mm-modal-generic-section-item__label-radio" class="mm-modal-generic-section-item__label-radio"
> >
@@ -1537,7 +1557,7 @@ Object {
checked="" checked=""
data-testid="desktopNotification-all" data-testid="desktopNotification-all"
id="desktopNotification-all" id="desktopNotification-all"
name="desktopNotification-all" name="desktop"
type="radio" type="radio"
value="all" value="all"
/> />
@@ -1550,7 +1570,7 @@ Object {
<input <input
data-testid="desktopNotification-mention" data-testid="desktopNotification-mention"
id="desktopNotification-mention" id="desktopNotification-mention"
name="desktopNotification-mention" name="desktop"
type="radio" type="radio"
value="mention" value="mention"
/> />
@@ -1562,7 +1582,7 @@ Object {
<input <input
data-testid="desktopNotification-none" data-testid="desktopNotification-none"
id="desktopNotification-none" id="desktopNotification-none"
name="desktopNotification-none" name="desktop"
type="radio" type="radio"
value="none" value="none"
/> />
@@ -2047,6 +2067,11 @@ Object {
<fieldset <fieldset
class="mm-modal-generic-section-item__fieldset-radio" class="mm-modal-generic-section-item__fieldset-radio"
> >
<legend
class="hidden-label"
>
Notify me about…
</legend>
<label <label
class="mm-modal-generic-section-item__label-radio" class="mm-modal-generic-section-item__label-radio"
> >
@@ -2054,7 +2079,7 @@ Object {
checked="" checked=""
data-testid="desktopNotification-all" data-testid="desktopNotification-all"
id="desktopNotification-all" id="desktopNotification-all"
name="desktopNotification-all" name="desktop"
type="radio" type="radio"
value="all" value="all"
/> />
@@ -2067,7 +2092,7 @@ Object {
<input <input
data-testid="desktopNotification-mention" data-testid="desktopNotification-mention"
id="desktopNotification-mention" id="desktopNotification-mention"
name="desktopNotification-mention" name="desktop"
type="radio" type="radio"
value="mention" value="mention"
/> />
@@ -2079,7 +2104,7 @@ Object {
<input <input
data-testid="desktopNotification-none" data-testid="desktopNotification-none"
id="desktopNotification-none" id="desktopNotification-none"
name="desktopNotification-none" name="desktop"
type="radio" type="radio"
value="none" value="none"
/> />
@@ -2564,6 +2589,11 @@ Object {
<fieldset <fieldset
class="mm-modal-generic-section-item__fieldset-radio" class="mm-modal-generic-section-item__fieldset-radio"
> >
<legend
class="hidden-label"
>
Notify me about…
</legend>
<label <label
class="mm-modal-generic-section-item__label-radio" class="mm-modal-generic-section-item__label-radio"
> >
@@ -2571,7 +2601,7 @@ Object {
checked="" checked=""
data-testid="desktopNotification-all" data-testid="desktopNotification-all"
id="desktopNotification-all" id="desktopNotification-all"
name="desktopNotification-all" name="desktop"
type="radio" type="radio"
value="all" value="all"
/> />
@@ -2584,7 +2614,7 @@ Object {
<input <input
data-testid="desktopNotification-mention" data-testid="desktopNotification-mention"
id="desktopNotification-mention" id="desktopNotification-mention"
name="desktopNotification-mention" name="desktop"
type="radio" type="radio"
value="mention" value="mention"
/> />
@@ -2596,7 +2626,7 @@ Object {
<input <input
data-testid="desktopNotification-none" data-testid="desktopNotification-none"
id="desktopNotification-none" id="desktopNotification-none"
name="desktopNotification-none" name="desktop"
type="radio" type="radio"
value="none" value="none"
/> />

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

@@ -2,7 +2,7 @@
// See LICENSE.txt for license information. // See LICENSE.txt for license information.
import React from 'react'; import React from 'react';
import {FormattedMessage} from 'react-intl'; import {defineMessage, FormattedMessage} from 'react-intl';
import type {FieldsetCheckbox} from 'components/widgets/modals/components/checkbox_setting_item'; import type {FieldsetCheckbox} from 'components/widgets/modals/components/checkbox_setting_item';
import type {FieldsetRadio} from 'components/widgets/modals/components/radio_setting_item'; import type {FieldsetRadio} from 'components/widgets/modals/components/radio_setting_item';
@@ -41,8 +41,12 @@ export const AutoFollowThreadsInputFieldData: FieldsetCheckbox = {
dataTestId: 'autoFollowThreads', dataTestId: 'autoFollowThreads',
}; };
export const desktopNotificationInputFieldData = (defaultOption: string): FieldsetRadio => { const defaultMessage = defineMessage({
return { id: 'channel_notifications.default',
defaultMessage: '(default)',
});
export const desktopNotificationInputFieldData = (defaultOption: string): FieldsetRadio => ({
options: [ options: [
{ {
dataTestId: `desktopNotification-${NotificationLevels.ALL}`, dataTestId: `desktopNotification-${NotificationLevels.ALL}`,
@@ -53,13 +57,12 @@ export const desktopNotificationInputFieldData = (defaultOption: string): Fields
values={{ values={{
optionalDefault: defaultOption === NotificationLevels.ALL ? ( optionalDefault: defaultOption === NotificationLevels.ALL ? (
<FormattedMessage <FormattedMessage
id='channel_notifications.default' {...defaultMessage}
defaultMessage='(default)'
/>) : undefined, />) : undefined,
}} }}
/> />
), ),
name: `desktopNotification-${NotificationLevels.ALL}`, name: 'desktop',
key: `desktopNotification-${NotificationLevels.ALL}`, key: `desktopNotification-${NotificationLevels.ALL}`,
value: NotificationLevels.ALL, value: NotificationLevels.ALL,
}, },
@@ -72,13 +75,12 @@ export const desktopNotificationInputFieldData = (defaultOption: string): Fields
values={{ values={{
optionalDefault: defaultOption === NotificationLevels.MENTION ? ( optionalDefault: defaultOption === NotificationLevels.MENTION ? (
<FormattedMessage <FormattedMessage
id='channel_notifications.default' {...defaultMessage}
defaultMessage='(default)'
/>) : undefined, />) : undefined,
}} }}
/> />
), ),
name: `desktopNotification-${NotificationLevels.MENTION}`, name: 'desktop',
key: `desktopNotification-${NotificationLevels.MENTION}`, key: `desktopNotification-${NotificationLevels.MENTION}`,
value: NotificationLevels.MENTION, value: NotificationLevels.MENTION,
}, },
@@ -91,19 +93,18 @@ export const desktopNotificationInputFieldData = (defaultOption: string): Fields
values={{ values={{
optionalDefault: defaultOption === NotificationLevels.NONE ? ( optionalDefault: defaultOption === NotificationLevels.NONE ? (
<FormattedMessage <FormattedMessage
id='channel_notifications.default' {...defaultMessage}
defaultMessage='(default)'
/>) : undefined, />) : undefined,
}} }}
/> />
), ),
name: `desktopNotification-${NotificationLevels.NONE}`, name: 'desktop',
key: `desktopNotification-${NotificationLevels.NONE}`, key: `desktopNotification-${NotificationLevels.NONE}`,
value: NotificationLevels.NONE, value: NotificationLevels.NONE,
}, },
], ],
}; }
}; );
export const desktopNotificationSoundsCheckboxFieldData: FieldsetCheckbox = { export const desktopNotificationSoundsCheckboxFieldData: FieldsetCheckbox = {
name: 'desktopNotificationSoundsCheckbox', name: 'desktopNotificationSoundsCheckbox',
@@ -116,8 +117,7 @@ export const desktopNotificationSoundsSelectFieldData: FieldsetReactSelect = {
options: optionsOfMessageNotificationSoundsSelect, options: optionsOfMessageNotificationSoundsSelect,
}; };
export const mobileNotificationInputFieldData = (defaultOption: string): FieldsetRadio => { export const mobileNotificationInputFieldData = (defaultOption: string): FieldsetRadio => ({
return {
options: [ options: [
{ {
dataTestId: `MobileNotification-${NotificationLevels.ALL}`, dataTestId: `MobileNotification-${NotificationLevels.ALL}`,
@@ -128,13 +128,12 @@ export const mobileNotificationInputFieldData = (defaultOption: string): Fieldse
values={{ values={{
optionalDefault: defaultOption === NotificationLevels.ALL ? ( optionalDefault: defaultOption === NotificationLevels.ALL ? (
<FormattedMessage <FormattedMessage
id='channel_notifications.default' {...defaultMessage}
defaultMessage='(default)'
/>) : undefined, />) : undefined,
}} }}
/> />
), ),
name: `MobileNotification-${NotificationLevels.ALL}`, name: 'push',
key: `MobileNotification-${NotificationLevels.ALL}`, key: `MobileNotification-${NotificationLevels.ALL}`,
value: NotificationLevels.ALL, value: NotificationLevels.ALL,
}, },
@@ -142,18 +141,18 @@ export const mobileNotificationInputFieldData = (defaultOption: string): Fieldse
dataTestId: `MobileNotification-${NotificationLevels.MENTION}`, dataTestId: `MobileNotification-${NotificationLevels.MENTION}`,
title: ( title: (
<FormattedMessage <FormattedMessage
id='channelNotifications.mobileNotification.mention' id='channelNotifications.mobileNotification.mention'
defaultMessage='Mentions, direct messages, and keywords only {optionalDefault}' defaultMessage='Mentions, direct messages, and keywords only {optionalDefault}'
values={{ values={{
optionalDefault: defaultOption === NotificationLevels.MENTION ? ( optionalDefault: defaultOption === NotificationLevels.MENTION ? (
<FormattedMessage <FormattedMessage
id='channel_notifications.default' {...defaultMessage}
defaultMessage='(default)'
/>) : undefined, />) : undefined,
}} }}
/> />
), ),
name: `MobileNotification-${NotificationLevels.MENTION}`, name: 'push',
key: `MobileNotification-${NotificationLevels.MENTION}`, key: `MobileNotification-${NotificationLevels.MENTION}`,
value: NotificationLevels.MENTION, value: NotificationLevels.MENTION,
}, },
@@ -166,19 +165,18 @@ export const mobileNotificationInputFieldData = (defaultOption: string): Fieldse
values={{ values={{
optionalDefault: defaultOption === NotificationLevels.NONE ? ( optionalDefault: defaultOption === NotificationLevels.NONE ? (
<FormattedMessage <FormattedMessage
id='channel_notifications.default' {...defaultMessage}
defaultMessage='(default)'
/>) : undefined, />) : undefined,
}} }}
/> />
), ),
name: `MobileNotification-${NotificationLevels.NONE}`, name: 'push',
key: `MobileNotification-${NotificationLevels.NONE}`, key: `MobileNotification-${NotificationLevels.NONE}`,
value: NotificationLevels.NONE, value: NotificationLevels.NONE,
}, },
], ],
}; }
}; );
export default { export default {
desktopNotificationInputFieldData, desktopNotificationInputFieldData,

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

@@ -54,7 +54,12 @@ function RadioSettingItem({
}); });
const content = ( const content = (
<fieldset className='mm-modal-generic-section-item__fieldset-radio'> <fieldset
className='mm-modal-generic-section-item__fieldset-radio'
>
<legend className='hidden-label'>
{title}
</legend>
{[...fields]} {[...fields]}
</fieldset> </fieldset>
); );