Add labels for screen readers to various regions of the UI

src/components/layout/Layout.tsx

@@ -144,7 +144,7 @@ const Layout = ({ footer, children, disableSidebar, font }: any) => {
             }}
           >
             <FlexboxGrid.Item>
-              <ButtonToolbar>
+              <ButtonToolbar aria-label="history">
                 <StyledButton
                   aria-label="back"
                   appearance="subtle"
@@ -218,7 +218,9 @@ const Layout = ({ footer, children, disableSidebar, font }: any) => {
             </FlexboxGrid.Item>
           </FlexboxGrid>
 
-          <Content id="container-content">{children}</Content>
+          <Content id="container-content" role="main">
+            {children}
+          </Content>
         </MainContainer>
         <RootFooter id="container-footer">{footer}</RootFooter>
       </RootContainer>

src/components/player/PlayerBar.tsx

@@ -347,7 +347,7 @@ const PlayerBar = () => {
   return (
     <Player ref={playersRef} currentEntryList={currentEntryList} muted={muted}>
       {playQueue.showDebugWindow && <DebugWindow currentEntryList={currentEntryList} />}
-      <PlayerContainer>
+      <PlayerContainer aria-label="playback controls" role="complementary">
         <FlexboxGrid align="middle" style={{ height: '100%' }}>
           <FlexboxGrid.Item colspan={6} style={{ textAlign: 'left', paddingLeft: '10px' }}>
             <PlayerColumn left height="80px">
@@ -685,6 +685,7 @@ const PlayerBar = () => {
               >
                 {config.serverType === Server.Subsonic && (
                   <StyledRate
+                    aria-label="rating"
                     size="xs"
                     readOnly={false}
                     value={