ZF/jitsi-meet
1
0
Fork 0
mirror of https://gitcode.com/GitHub_Trending/ji/jitsi-meet.git synced 2025-12-30 11:22:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Accessibility: add validation warning on room name (#14009)

Browse Source 
feat(accessibility): add validation warning on room name
This commit is contained in:
AHMAD KADRI
2023-11-06 09:59:51 +01:00
committed by GitHub
parent 4115ebe856
commit 34f1eb60f4
2 changed files with 70 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
css/_welcome_page.scss
View File

@@ -61,6 +61,35 @@ body.welcome-page {
}
.not-allow-title-character-div {
color: #f03e3e;
background-color: #fff;
font-size: 12px;
font-weight: 600;
margin: 10px 0px 5px 0px;
text-align: $welcomePageHeaderTextAlign;
border-radius: 5px;
padding: 5px;
.not-allow-title-character-text {
float: right;
line-height: 1.9;
};
.jitsi-icon {
margin-right: 9px;
float: left;
svg {
fill:#f03e3e;
& > *:first-child {
fill: none !important;
}
}
}
}
.insecure-room-name-warning {
align-items: center;
color: rgb(215, 121, 118);

58
react/features/welcome/components/WelcomePage.web.tsx
View File

@@ -35,6 +35,7 @@ class WelcomePage extends AbstractWelcomePage<IProps> {
_additionalCardTemplate: HTMLTemplateElement | null;
_additionalContentTemplate: HTMLTemplateElement | null;
_additionalToolbarContentTemplate: HTMLTemplateElement | null;
_titleHasNotAllowCharacter: boolean;
/**
* Default values for {@code WelcomePage} component's properties.
@@ -61,6 +62,14 @@ class WelcomePage extends AbstractWelcomePage<IProps> {
interfaceConfig.GENERATE_ROOMNAMES_ON_WELCOME_PAGE
};
/**
* Used To display a warning massage if the title input has no allow character.
*
* @private
* @type {boolean}
*/
this._titleHasNotAllowCharacter = false;
/**
* The HTML Element used as the container for additional content. Used
* for directly appending the additional content template to the dom.
@@ -205,7 +214,7 @@ class WelcomePage extends AbstractWelcomePage<IProps> {
<SettingsButton
defaultTab = { SETTINGS_TABS.CALENDAR }
isDisplayedOnWelcomePage = { true } />
{ showAdditionalToolbarContent
{showAdditionalToolbarContent
? <div
className = 'settings-toolbar-content'
ref = { this._setAdditionalToolbarContentRef } />
@@ -213,10 +222,10 @@ class WelcomePage extends AbstractWelcomePage<IProps> {
}
</div>
<h1 className = 'header-text-title'>
{ t('welcomepage.headerTitle') }
{t('welcomepage.headerTitle')}
</h1>
<span className = 'header-text-subtitle'>
{ t('welcomepage.headerSubtitle')}
{t('welcomepage.headerSubtitle')}
</span>
<div id = 'enter_room'>
<div className = 'join-meeting-container'>
@@ -232,11 +241,11 @@ class WelcomePage extends AbstractWelcomePage<IProps> {
pattern = { ROOM_NAME_VALIDATE_PATTERN_STR }
placeholder = { this.state.roomPlaceholder }
ref = { this._setRoomInputRef }
title = { t('welcomepage.roomNameAllowedChars') }
type = 'text'
value = { this.state.room } />
</form>
</div>
<button
aria-disabled = 'false'
aria-label = 'Start meeting'
@@ -245,17 +254,27 @@ class WelcomePage extends AbstractWelcomePage<IProps> {
onClick = { this._onFormSubmit }
tabIndex = { 0 }
type = 'button'>
{ t('welcomepage.startMeeting') }
{t('welcomepage.startMeeting')}
</button>
</div>
</div>
{ this._renderInsecureRoomNameWarning() }
{this._titleHasNotAllowCharacter && (
<div
className = 'not-allow-title-character-div'
role = 'alert'>
<Icon src = { IconWarning } />
<span className = 'not-allow-title-character-text'>
{t('welcomepage.roomNameAllowedChars')}
</span>
</div>
)}
{this._renderInsecureRoomNameWarning()}
{ _moderatedRoomServiceUrl && (
{_moderatedRoomServiceUrl && (
<div id = 'moderated-meetings'>
{
translateToHTML(
t, 'welcomepage.moderatedMessage', { url: _moderatedRoomServiceUrl })
t, 'welcomepage.moderatedMessage', { url: _moderatedRoomServiceUrl })
}
</div>)}
</div>
@@ -264,22 +283,22 @@ class WelcomePage extends AbstractWelcomePage<IProps> {
<div className = 'welcome-cards-container'>
<div className = 'welcome-card-column'>
<div className = 'welcome-tabs welcome-card welcome-card--blue'>
{ this._renderTabs() }
{this._renderTabs()}
</div>
{ showAdditionalCard
{showAdditionalCard
? <div
className = 'welcome-card welcome-card--dark'
ref = { this._setAdditionalCardRef } />
: null }
: null}
</div>
{ showAdditionalContent
{showAdditionalContent
? <div
className = 'welcome-page-content'
ref = { this._setAdditionalContentRef } />
: null }
: null}
</div>
{ DISPLAY_WELCOME_FOOTER && this._renderFooter()}
{DISPLAY_WELCOME_FOOTER && this._renderFooter()}
</div>
);
@@ -295,7 +314,7 @@ class WelcomePage extends AbstractWelcomePage<IProps> {
<div className = 'insecure-room-name-warning'>
<Icon src = { IconWarning } />
<span>
{ getUnsafeRoomText(this.props.t, 'welcome') }
{getUnsafeRoomText(this.props.t, 'welcome')}
</span>
</div>
);
@@ -329,6 +348,9 @@ class WelcomePage extends AbstractWelcomePage<IProps> {
// @ts-ignore
// eslint-disable-next-line require-jsdoc
_onRoomChange(event: React.ChangeEvent<HTMLInputElement>) {
const specialCharacters = [ '?', '&', ':', '\'', '"', '%', '#', '.' ];
this._titleHasNotAllowCharacter = specialCharacters.some(char => event.target.value.includes(char));
super._onRoomChange(event.target.value);
}
@@ -342,8 +364,10 @@ class WelcomePage extends AbstractWelcomePage<IProps> {
t,
_deeplinkingCfg: {
ios = { downloadLink: undefined },
android = { fDroidUrl: undefined,
downloadLink: undefined }
android = {
fDroidUrl: undefined,
downloadLink: undefined
}
}
} = this.props;