Repository: freeCodeCamp/freeCodeCamp
File: client/src/templates/Challenges/classic/mobile-layout.tsx (TypeScript)

Code before:
                  onClick={() => togglePane('showPreviewPortal')}
                >
                  <span className='sr-only'>{getPortalBtnSrText()}</span>
                  <FontAwesomeIcon icon={faWindowRestore} />
                </button>
              </div>
              {displayPreviewPane && preview}
              {showPreviewPortal && (
                <p className='preview-external-window'>
                  {i18next.t('learn.preview-external-window')}
                </p>
              )}
            </TabsContent>
          )}
          {!hasEditableBoundaries && (
            <ToolPanel
              guideUrl={guideUrl}
              isMobile={true}
              videoUrl={videoUrl}
            />
          )}
          {hasPreview && this.state.currentTab !== 'preview' && (
            <div className='portal-button-wrap'>
              <button
                className='portal-button'
                data-playwright-test-label='preview-portal-button'
                aria-expanded={!!showPreviewPortal}
                onClick={() => togglePane('showPreviewPortal')}
              >
                <span className='sr-only'>{getPortalBtnSrText()}</span>
                <FontAwesomeIcon icon={faWindowRestore} />
              </button>
            </div>
          )}
        </Tabs>
        {displayPreviewPortal && (
          <PreviewPortal windowTitle={windowTitle}>{preview}</PreviewPortal>
        )}
      </>
    );
  }
}

MobileLayout.displayName = 'MobileLayout';

export default connect(mapStateToProps, mapDispatchToProps)(MobileLayout);


Review comment (suggestion):
`data-playwright-test-label` is not recommended for interactive elements, and we should use the `getByRole` locator in the test in this case.

More about the recommendation here: https://contribute.freecodecamp.org/#/how-to-add-playwright-tests?id=-identifying-a-dom-element.

Code after:
                  onClick={() => togglePane('showPreviewPortal')}
                >
                  <span className='sr-only'>{getPortalBtnSrText()}</span>
                  <FontAwesomeIcon icon={faWindowRestore} />
                </button>
              </div>
              {displayPreviewPane && preview}
              {showPreviewPortal && (
                <p className='preview-external-window'>
                  {i18next.t('learn.preview-external-window')}
                </p>
              )}
            </TabsContent>
          )}
          {!hasEditableBoundaries && (
            <ToolPanel
              guideUrl={guideUrl}
              isMobile={true}
              videoUrl={videoUrl}
            />
          )}
          {hasPreview && this.state.currentTab !== 'preview' && (
            <div className='portal-button-wrap'>
              <button
                className='portal-button'
                aria-expanded={!!showPreviewPortal}
                onClick={() => togglePane('showPreviewPortal')}
              >
                <span className='sr-only'>{getPortalBtnSrText()}</span>
                <FontAwesomeIcon icon={faWindowRestore} />
              </button>
            </div>
          )}
        </Tabs>
        {displayPreviewPortal && (
          <PreviewPortal windowTitle={windowTitle}>{preview}</PreviewPortal>
        )}
      </>
    );
  }
}

MobileLayout.displayName = 'MobileLayout';

export default connect(mapStateToProps, mapDispatchToProps)(MobileLayout);