WebApp: Fix content inaccessibility under header in fullscreen mode (#5628)

src/assets/localization/fallback.strings

@@ -1635,3 +1635,4 @@
 "CollectibleStatusesCategory" = "Collectibles";
 "PeerPersonalAccount" = "personal account";
 "PeerChannel" = "channel";
+"WebAppCollapse" = "Collapse";

src/components/modals/webApp/WebAppModalTabContent.module.scss

@@ -302,6 +302,7 @@
   padding: 1rem;
   padding-inline-end: calc(1rem + var(--scrollbar-width));
   justify-content: space-between;
+  pointer-events: none;
 }
 
 .icon {
@@ -331,6 +332,7 @@
   border-radius: 1rem;
   background-color: rgba(0, 0, 0, 0.2);
   backdrop-filter: blur(25px);
+  pointer-events: auto;
 
   &:hover {
     background-color: rgba(0, 0, 0, 0.1);

src/components/modals/webApp/WebAppModalTabContent.tsx

@@ -972,14 +972,14 @@ const WebAppModalTabContent: FC<OwnProps & StateProps> = ({
               styles.headerButton,
               styles.left,
             )}
+            tabIndex={0}
+            role="button"
+            aria-label={lang('WebAppCollapse')}
+            onClick={handleCollapseClick}
           >
             <Icon
               name="down"
-              className={buildClassName(
-                styles.icon,
-                styles.collapseIcon,
-              )}
-              onClick={handleCollapseClick}
+              className={styles.icon}
             />
           </div>
           <div
@@ -987,6 +987,11 @@ const WebAppModalTabContent: FC<OwnProps & StateProps> = ({
               styles.headerButton,
               styles.right,
             )}
+            tabIndex={0}
+            role="button"
+            aria-haspopup="menu"
+            aria-label={lang('AriaMoreButton')}
+            onClick={handleShowContextMenu}
           >
             <Icon
               name="more"
@@ -994,7 +999,6 @@ const WebAppModalTabContent: FC<OwnProps & StateProps> = ({
                 styles.icon,
                 styles.moreIcon,
               )}
-              onClick={handleShowContextMenu}
             />
           </div>
         </div>

src/types/language.d.ts

@@ -1335,6 +1335,7 @@ export interface LangPair {
   'CollectibleStatusesCategory': undefined;
   'PeerPersonalAccount': undefined;
   'PeerChannel': undefined;
+  'WebAppCollapse': undefined;
 }
 
 export interface LangPairWithVariables<V extends unknown = LangVariable> {