[MM-63048] Add aria-label to the file preview back/forward buttons (#31388)

webapp/channels/src/components/file_preview_modal/file_preview_modal_main_nav/__snapshots__/file_preview_modal_main_nav.test.tsx.snap

@@ -14,6 +14,7 @@ exports[`components/file_preview_modal/file_preview_modal_main_nav/FilePreviewMo
     }
   >
     <button
+      aria-label="Previous file"
       className="file_preview_modal_main_nav__prev"
       id="previewArrowLeft"
       onClick={[MockFunction]}
@@ -49,6 +50,7 @@ exports[`components/file_preview_modal/file_preview_modal_main_nav/FilePreviewMo
     }
   >
     <button
+      aria-label="Next file"
       className="file_preview_modal_main_nav__next"
       id="previewArrowRight"
       onClick={[MockFunction]}

webapp/channels/src/components/file_preview_modal/file_preview_modal_main_nav/file_preview_modal_main_nav.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React, {memo} from 'react';
-import {FormattedMessage} from 'react-intl';
+import {FormattedMessage, useIntl} from 'react-intl';
 
 import './file_preview_modal_main_nav.scss';
 
@@ -16,6 +16,7 @@ interface Props {
 }
 
 const FilePreviewModalMainNav: React.FC<Props> = (props: Props) => {
+    const {formatMessage} = useIntl();
     const leftArrow = (
         <WithTooltip
             key='previewArrowLeft'
@@ -30,6 +31,7 @@ const FilePreviewModalMainNav: React.FC<Props> = (props: Props) => {
                 id='previewArrowLeft'
                 className='file_preview_modal_main_nav__prev'
                 onClick={props.handlePrev}
+                aria-label={formatMessage({id: 'file_preview_modal_main_nav.prevAriaLabel', defaultMessage: 'Previous file'})}
             >
                 <i className='icon icon-chevron-left'/>
             </button>
@@ -50,6 +52,7 @@ const FilePreviewModalMainNav: React.FC<Props> = (props: Props) => {
                 id='previewArrowRight'
                 className='file_preview_modal_main_nav__next'
                 onClick={props.handleNext}
+                aria-label={formatMessage({id: 'file_preview_modal_main_nav.nextAriaLabel', defaultMessage: 'Next file'})}
             >
                 <i className='icon icon-chevron-right'/>
             </button>

webapp/channels/src/i18n/en.json

@@ -4081,6 +4081,8 @@
   "file_preview_modal_info.shared_in": "Shared in ~{name}",
   "file_preview_modal_main_actions.public_link-copied": "Public link copied",
   "file_preview_modal_main_nav.file": "{count, number} of {total, number}",
+  "file_preview_modal_main_nav.nextAriaLabel": "Next file",
+  "file_preview_modal_main_nav.prevAriaLabel": "Previous file",
   "file_search_result_item.copy_link": "Copy link",
   "file_search_result_item.download": "Download",
   "file_search_result_item.more_actions": "More Actions",