feat(polls/web/native): fixed identical answers verification (#14782)

* feat(polls/web/native): fixed identical answers verification

react/features/base/ui/components/native/Input.tsx

@@ -1,13 +1,16 @@
 import React, { forwardRef, useCallback, useState } from 'react';
 import {
     KeyboardTypeOptions,
-    NativeSyntheticEvent, ReturnKeyTypeOptions,
+    NativeSyntheticEvent,
+    ReturnKeyTypeOptions,
     StyleProp,
     Text,
     TextInput,
     TextInputChangeEventData,
-    TextInputFocusEventData, TextInputKeyPressEventData,
+    TextInputFocusEventData,
+    TextInputKeyPressEventData,
     TextInputSubmitEditingEventData,
+    TextStyle,
     TouchableOpacity,
     View,
     ViewStyle
@@ -25,8 +28,16 @@ interface IProps extends IInputProps {
     autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters' | undefined;
     autoFocus?: boolean;
     blurOnSubmit?: boolean | undefined;
+    bottomLabel?: string;
     customStyles?: ICustomStyles;
     editable?: boolean | undefined;
+
+    /**
+     * The id to set on the input element.
+     * This is required because we need it internally to tie the input to its
+     * info (label, error) so that screen reader users don't get lost.
+     */
+    id?: string;
     keyboardType?: KeyboardTypeOptions;
     maxLength?: number | undefined;
     minHeight?: number | string | undefined;
@@ -52,11 +63,13 @@ const Input = forwardRef<TextInput, IProps>(({
     autoCapitalize,
     autoFocus,
     blurOnSubmit,
+    bottomLabel,
     clearable,
     customStyles,
     disabled,
     error,
     icon,
+    id,
     keyboardType,
     label,
     maxLength,
@@ -106,7 +119,7 @@ const Input = forwardRef<TextInput, IProps>(({
         onSubmitEditing?.(text);
     }, [ onSubmitEditing ]);
 
-    return (<View style = { [ styles.inputContainer, customStyles?.container ] }>
+    return (<View style = { [ styles.inputContainer, customStyles?.container ] as StyleProp<ViewStyle> }>
         {label && <Text style = { styles.label }>{ label }</Text>}
         <View style = { styles.fieldContainer as StyleProp<ViewStyle> }>
             {icon && <Icon
@@ -121,6 +134,7 @@ const Input = forwardRef<TextInput, IProps>(({
                 autoFocus = { autoFocus }
                 blurOnSubmit = { blurOnSubmit }
                 editable = { !disabled }
+                id = { id }
                 keyboardType = { keyboardType }
                 maxLength = { maxLength }
 
@@ -145,11 +159,11 @@ const Input = forwardRef<TextInput, IProps>(({
                     clearable && styles.clearableInput,
                     customStyles?.input,
                     disabled && styles.inputDisabled,
-                    error && styles.inputError,
-                    focused && styles.inputFocused,
                     icon && styles.iconInput,
-                    multiline && styles.inputMultiline
-                ] }
+                    multiline && styles.inputMultiline,
+                    focused && styles.inputFocused,
+                    error && styles.inputError
+                ] as StyleProp<TextStyle> }
                 textContentType = { textContentType }
                 value = { typeof value === 'number' ? `${value}` : value } />
             { clearable && !disabled && value !== '' && (
@@ -163,6 +177,20 @@ const Input = forwardRef<TextInput, IProps>(({
                 </TouchableOpacity>
             )}
         </View>
+        {
+            bottomLabel && (
+                <View>
+                    <Text
+                        id = { `${id}-description` }
+                        style = { [
+                            styles.bottomLabel,
+                            error && styles.bottomLabelError
+                        ] }>
+                        { bottomLabel }
+                    </Text>
+                </View>
+            )
+        }
     </View>);
 });
 

react/features/base/ui/components/native/inputStyles.ts

@@ -73,5 +73,15 @@ export default {
 
     clearIcon: {
         color: BaseTheme.palette.icon01
+    },
+
+    bottomLabel: {
+        ...BaseTheme.typography.labelRegular,
+        color: BaseTheme.palette.text02,
+        marginTop: BaseTheme.spacing[2]
+    },
+
+    bottomLabelError: {
+        color: BaseTheme.palette.textError
     }
 };

react/features/polls/components/native/PollCreate.tsx

@@ -97,16 +97,26 @@ const PollCreate = (props: AbstractProps) => {
             type = { TERTIARY } />
     );
 
+    const pollCreateButtonsContainerStyles = Platform.OS === 'android'
+        ? chatStyles.pollCreateButtonsContainerAndroid : chatStyles.pollCreateButtonsContainerIos;
 
     /* eslint-disable react/jsx-no-bind */
-    const renderListItem = ({ index }: { index: number; }) =>
+    const renderListItem = ({ index }: { index: number; }) => {
+
+        const isIdenticalAnswer
+            = answers.slice(0, index).length === 0 ? false : answers.slice(0, index).some(prevAnswer =>
+                prevAnswer.name === answers[index].name
+                && prevAnswer.name !== '' && answers[index].name !== '');
 
-        // padding to take into account the two default options
-        (
+        return (
             <View
                 style = { dialogStyles.optionContainer as ViewStyle }>
                 <Input
                     blurOnSubmit = { false }
+                    bottomLabel = { (
+                        isIdenticalAnswer ? t('polls.errors.notUniqueOption', { index: index + 1 }) : '') }
+                    error = { isIdenticalAnswer }
+                    id = { `polls-answer-input-${index}` }
                     label = { t('polls.create.pollOption', { index: index + 1 }) }
                     maxLength = { CHAR_LIMIT }
                     multiline = { true }
@@ -128,8 +138,7 @@ const PollCreate = (props: AbstractProps) => {
                 }
             </View>
         );
-    const pollCreateButtonsContainerStyles = Platform.OS === 'android'
-        ? chatStyles.pollCreateButtonsContainerAndroid : chatStyles.pollCreateButtonsContainerIos;
+    };
 
     return (
         <View style = { chatStyles.pollCreateContainer as ViewStyle }>

react/features/polls/functions.ts

@@ -58,7 +58,7 @@ export function hasIdenticalAnswers(currentAnswers: Array<IAnswerData>): boolean
 
     const nonEmptyCurrentAnswers = currentAnswers.filter((answer): boolean => answer.name !== '');
 
-    const currentAnswersSet = new Set(nonEmptyCurrentAnswers);
+    const currentAnswersSet = new Set(nonEmptyCurrentAnswers.map(answer => answer.name));
 
     return currentAnswersSet.size !== nonEmptyCurrentAnswers.length;
 }