prevent SR announcing poll inputs as one element

bigbluebutton-html5/imports/ui/components/poll/component.jsx

@@ -40,6 +40,10 @@ const intlMessages = defineMessages({
     id: 'app.poll.activePollInstruction',
     description: 'instructions displayed when a poll is active',
   },
+  ariaInputCount: {
+    id: 'app.poll.ariaInputCount',
+    description: 'aria label for custom poll input field',
+  },
   customPlaceholder: {
     id: 'app.poll.customPlaceholder',
     description: 'custom poll input field placeholder text',
@@ -185,13 +189,17 @@ class Poll extends Component {
     items = _.range(1, MAX_CUSTOM_FIELDS + 1).map((ele, index) => {
       const id = index;
       return (
-        <input
-          key={`custom-poll-${id}`}
-          placeholder={intl.formatMessage(intlMessages.customPlaceholder)}
-          className={styles.input}
-          onChange={event => this.handleInputChange(id, event)}
-          defaultValue={customPollValues[id]}
-        />
+        <div key={`custom-poll-${id}`} className={styles.pollInput}>
+          <input
+            aria-label={intl.formatMessage(
+              intlMessages.ariaInputCount, { 0: id + 1, 1: MAX_CUSTOM_FIELDS },
+            )}
+            placeholder={intl.formatMessage(intlMessages.customPlaceholder)}
+            className={styles.input}
+            onChange={event => this.handleInputChange(id, event)}
+            defaultValue={customPollValues[id]}
+          />
+        </div>
       );
     });
 

bigbluebutton-html5/imports/ui/components/poll/styles.scss

@@ -42,23 +42,22 @@
 }
 
 .customInputWrapper {
+  width: 100%;
+  margin-top: var(--md-padding-y);
+  
+  > Button {
     width: 100%;
+    margin-top: var(--sm-padding-y);
+    margin-bottom: var(--sm-padding-y);
+  }
+}
 
-    > input {
-        width: 100%;
-        margin-top: var(--sm-padding-y);
-        margin-bottom: var(--sm-padding-y);
-    }
-
-    > input:first-child {
-        margin-top: var(--md-padding-y);
-    }
-
-    > Button {
-        width: 100%;
-        margin-top: var(--sm-padding-y);
-        margin-bottom: var(--sm-padding-y);
-    }
+.pollInput {
+  > input {
+    width: 100%;
+    margin-top: var(--sm-padding-y);
+    margin-bottom: var(--sm-padding-y);
+  }
 }
 
 .header {

bigbluebutton-html5/private/locales/en.json

@@ -115,6 +115,7 @@
     "app.poll.publishLabel": "Publish poll",
     "app.poll.backLabel": "Back to polling options",
     "app.poll.closeLabel": "Close",
+    "app.poll.ariaInputCount": "Input {0} of {1}",
     "app.poll.customPlaceholder": "Add poll option",
     "app.poll.tf": "True / False",
     "app.poll.yn": "Yes / No",