Reassign main landmark and label it

Author: dashdashzako

public/index.html

@@ -32,7 +32,7 @@
     </div>
   </noscript>
 
-  <main id="root"></main>
+  <div id="root"></div>
 
   <script>
     window.loggerEndpoint = 'http://localhost:3001/api/logs';

public/locales/en.json

@@ -1,5 +1,6 @@
 {
   "additional-info.title": "Additional information",
+  "application.label": "Aiana MOOC player",
   "button.toggle.off": "off",
   "button.toggle.on": "on",
   "controls.add_bookmark": "Add bookmark",

public/locales/fr.json

@@ -1,5 +1,6 @@
 {
   "additional-info.title": "Additional information",
+  "application.label": "Lecteur de MOOC Aiana",
   "button.toggle.off": "non",
   "button.toggle.on": "oui",
   "controls.add_bookmark": "Ajouter un signet",

src/components/Player.tsx

@@ -22,8 +22,9 @@ import MediaPlayer from './media/MediaPlayer';
 import MediaPlayerControls from './media/MediaPlayerControls';
 import TimeSpent from './time-management/TimeSpent';
 import InteractiveTranscript from './transcript/Transcript';
+import { useTranslation } from 'react-i18next';
 
-const StyledDiv = styled.div`
+const Main = styled.main`
   height: 100%;
   width: 100%;
   max-height: 100%;
@@ -64,6 +65,7 @@ function byName(name: string): Filter {
 
 function Player(props: IPlayerProps) {
   const [isDraggable, setDraggable] = useState(true);
+  const [t] = useTranslation();
 
   const { additionalInformationText, widgets, updateWidgetHandler } = props;
 
@@ -78,7 +80,7 @@ function Player(props: IPlayerProps) {
   const transcriptWidget = widgets.find(byName(WIDGET_ID_TRANSCRIPT));
 
   return (
-    <StyledDiv>
+    <Main aria-label={t('application.label')}>
       <div className="aip-widgets">
         {chaptersWidget && chaptersWidget.visible && (
           <ChaptersMenu
@@ -146,7 +148,7 @@ function Player(props: IPlayerProps) {
       </div>
       <TimelineBar display={false} />
       <MediaPlayerControls />
-    </StyledDiv>
+    </Main>
   );
 }
 

src/components/app/ConnectedAiana.tsx

@@ -33,7 +33,7 @@ interface IDispatchProps {
 
 interface IAiana extends IStateProps, IDispatchProps {}
 
-const StyledDiv = styled.div`
+const Div = styled.div`
   background-color: ${(props) => props.theme.bg};
   color: ${(props) => props.theme.fg};
 
@@ -101,7 +101,7 @@ function Aiana(props: IAiana) {
 
   return (
     <ThemeProvider theme={themes[theme]}>
-      <StyledDiv
+      <Div
         className={classNames('aip-app', {
           'aip-app__fullscreen': isDocumentFullscreen()
         })}
@@ -111,7 +111,7 @@ function Aiana(props: IAiana) {
           textTransform: fontUppercase ? 'uppercase' : 'none'
         }}
       >
-        <Suspense fallback={<Loader text="Media player is loading." />}>
+        <Suspense fallback={<Loader />}>
           <SvgFilters />
           <div
             className="aip-player-wrapper"
@@ -124,7 +124,7 @@ function Aiana(props: IAiana) {
             </MediaContextProvider>
           </div>
         </Suspense>
-      </StyledDiv>
+      </Div>
     </ThemeProvider>
   );
 }