Globally improve accessibility for screen reader users (#12969)

feat(a11y): Globally improve accessibility for screen reader users

react/features/invite/components/add-people-dialog/web/CopyMeetingLinkSection.tsx

@@ -34,15 +34,12 @@ function CopyMeetingLinkSection({ url }: IProps) {
 
     return (
         <>
-            <label
-                className = { classes.label }
-                htmlFor = { 'copy-button-id' }
-                id = 'copy-button-label'>{t('addPeople.shareLink')}</label>
+            <p className = { classes.label }>{t('addPeople.shareLink')}</p>
             <CopyButton
-                aria-label = { t('addPeople.copyLink') }
+                accessibilityText = { t('addPeople.accessibilityLabel.meetingLink', { url: getDecodedURI(url) }) }
                 className = 'invite-more-dialog-conference-url'
                 displayedText = { getDecodedURI(url) }
-                id = 'copy-button-id'
+                id = 'add-people-copy-link-button'
                 textOnCopySuccess = { t('addPeople.linkCopied') }
                 textOnHover = { t('addPeople.copyLink') }
                 textToCopy = { url } />

react/features/invite/components/add-people-dialog/web/DialInNumber.tsx

@@ -44,7 +44,6 @@ class DialInNumber extends Component<IProps> {
 
         // Bind event handler so it is only bound once for every instance.
         this._onCopyText = this._onCopyText.bind(this);
-        this._onCopyTextKeyPress = this._onCopyTextKeyPress.bind(this);
     }
 
     /**
@@ -62,20 +61,6 @@ class DialInNumber extends Component<IProps> {
         copyText(textToCopy);
     }
 
-    /**
-     * KeyPress handler for accessibility.
-     *
-     * @param {Object} e - The key event to handle.
-     *
-     * @returns {void}
-     */
-    _onCopyTextKeyPress(e: React.KeyboardEvent) {
-        if (e.key === ' ' || e.key === 'Enter') {
-            e.preventDefault();
-            this._onCopyText();
-        }
-    }
-
     /**
      * Implements React's {@link Component#render()}.
      *
@@ -87,7 +72,7 @@ class DialInNumber extends Component<IProps> {
 
         return (
             <div className = 'dial-in-number'>
-                <div>
+                <p>
                     <span className = 'phone-number'>
                         <span className = 'info-label'>
                             { t('info.dialInNumber') }
@@ -107,16 +92,13 @@ class DialInNumber extends Component<IProps> {
                             { `${_formatConferenceIDPin(conferenceID)}#` }
                         </span>
                     </span>
-                </div>
-                <a
+                </p>
+                <button
                     aria-label = { t('info.copyNumber') }
-                    className = 'dial-in-copy'
-                    onClick = { this._onCopyText }
-                    onKeyPress = { this._onCopyTextKeyPress }
-                    role = 'button'
-                    tabIndex = { 0 }>
+                    className = 'dial-in-copy invisible-button'
+                    onClick = { this._onCopyText }>
                     <Icon src = { IconCopy } />
-                </a>
+                </button>
             </div>
         );
     }

react/features/invite/components/add-people-dialog/web/InviteContactsForm.tsx

@@ -185,6 +185,7 @@ class InviteContactsForm extends AbstractAddPeopleDialog<IProps, IState> {
                 className = { this.props.classes.formWrap }
                 onKeyDown = { this._onKeyDown }>
                 <MultiSelectAutocomplete
+                    id = 'invite-contacts-input'
                     isDisabled = { isMultiSelectDisabled }
                     loadingMessage = { t(loadingMessage) }
                     noMatchesFound = { t(noMatches) }