Merge pull request #18256 from overleaf/rd-a11y-form

[web] Create accessibility survey link on the project dashboard

GitOrigin-RevId: 49503da67347c9e0e15a10f041252f25f0effc15

services/web/frontend/extracted-translations.json

@@ -510,6 +510,7 @@
   "headers": "",
   "help": "",
   "help_improve_overleaf_fill_out_this_survey": "",
+  "help_improve_screen_reader_fill_out_this_survey": "",
   "hide_configuration": "",
   "hide_deleted_user": "",
   "hide_document_preamble": "",
@@ -1290,6 +1291,7 @@
   "tag_name_is_already_used": "",
   "tags": "",
   "take_short_survey": "",
+  "take_survey": "",
   "tc_everyone": "",
   "tc_guests": "",
   "tc_switch_everyone_tip": "",

services/web/frontend/js/features/project-list/components/notifications/accessibility-survey-banner.tsx

@@ -0,0 +1,47 @@
+import { memo, useEffect, useState } from 'react'
+import Notification from './notification'
+import customLocalStorage from '@/infrastructure/local-storage'
+import { useTranslation } from 'react-i18next'
+
+function AccessibilitySurveyBanner() {
+  const { t } = useTranslation()
+  const [show, setShow] = useState(false)
+
+  useEffect(() => {
+    const isDismissed = customLocalStorage.getItem(
+      'has_dismissed_accessibility_survey_banner'
+    )
+    if (!isDismissed) setShow(true)
+  }, [])
+
+  const handleClose = () => {
+    customLocalStorage.setItem(
+      'has_dismissed_accessibility_survey_banner',
+      'true'
+    )
+    setShow(false)
+  }
+
+  if (!show) return null
+
+  return (
+    <Notification
+      className="sr-only"
+      bsStyle="info"
+      onDismiss={handleClose}
+      body={<p>{t('help_improve_screen_reader_fill_out_this_survey')}</p>}
+      action={
+        <a
+          className="btn btn-secondary btn-sm pull-right btn-info"
+          href="https://docs.google.com/forms/d/e/1FAIpQLSdxKP_biRXvrkmJzlBjMwI_qPSuv4NbBvYUzSOc3OOTIOTmnQ/viewform"
+          target="_blank"
+          rel="noreferrer"
+        >
+          {t('take_survey')}
+        </a>
+      }
+    />
+  )
+}
+
+export default memo(AccessibilitySurveyBanner)

services/web/frontend/js/features/project-list/components/notifications/user-notifications.tsx

@@ -12,6 +12,7 @@ import customLocalStorage from '../../../../infrastructure/local-storage'
 import { sendMB } from '../../../../infrastructure/event-tracking'
 import classNames from 'classnames'
 import GeoBanners from './geo-banners'
+import AccessibilitySurveyBanner from './accessibility-survey-banner'
 
 type Subscription = {
   groupId: string
@@ -85,6 +86,8 @@ function UserNotifications() {
         <GeoBanners />
         {!showWritefull && !dismissedWritefull && <GroupsAndEnterpriseBanner />}
 
+        <AccessibilitySurveyBanner />
+
         <WritefullPremiumPromoBanner
           show={showWritefull}
           setShow={setShowWritefull}

services/web/frontend/js/features/project-list/components/notifications/writefull-premium-promo-banner.tsx

@@ -31,6 +31,7 @@ function WritefullPremiumPromoBanner({
   }
 
   return (
+    <div data-testid="writefull-premium-promo-banner">
       <Notification
         bsStyle="info"
         newNotificationStyle
@@ -38,8 +39,8 @@ function WritefullPremiumPromoBanner({
         body={
           <>
             Enjoying Writefull? Get <strong>10% off Writefull Premium</strong>,
-          giving you access to TeXGPT—AI assistance to generate LaTeX code. Use{' '}
+            giving you access to TeXGPT—AI assistance to generate LaTeX code.
-          <strong>OVERLEAF10</strong> at the checkout.
+            Use <strong>OVERLEAF10</strong> at the checkout.
           </>
         }
         action={
@@ -57,6 +58,7 @@ function WritefullPremiumPromoBanner({
           </a>
         }
       />
+    </div>
   )
 }
 

services/web/frontend/js/features/project-list/components/project-list-root.tsx

@@ -78,6 +78,7 @@ function ProjectListPageContent() {
   ) : (
     <>
       <SystemMessages />
+
       <div className="project-list-wrapper clearfix container mx-0 px-0">
         {totalProjectsCount > 0 ? (
           <>

services/web/locales/en.json

@@ -756,6 +756,7 @@
   "help": "Help",
   "help_articles_matching": "Help articles matching your subject",
   "help_improve_overleaf_fill_out_this_survey": "If you would like to help us improve Overleaf, please take a moment to fill out <0>this survey</0>.",
+  "help_improve_screen_reader_fill_out_this_survey": "Help us improve your experience using a screen reader with __appName__ by filling out this quick survey.",
   "hide_configuration": "Hide configuration",
   "hide_deleted_user": "Hide deleted users",
   "hide_document_preamble": "Hide document preamble",
@@ -1833,6 +1834,7 @@
   "tags": "Tags",
   "take_me_home": "Take me home!",
   "take_short_survey": "Take a short survey",
+  "take_survey": "Take survey",
   "tc_everyone": "Everyone",
   "tc_guests": "Guests",
   "tc_switch_everyone_tip": "Toggle track-changes for everyone",

services/web/test/frontend/features/project-list/components/notifications.test.tsx

@@ -998,7 +998,12 @@ describe('<UserNotifications />', function () {
       it('dismisses the banner when the close button is clicked', function () {
         renderWithinProjectListProvider(UserNotifications)
         screen.getByRole('link', { name: /Writefull/ })
-        const closeButton = screen.getByRole('button', { name: 'Close' })
+        const WritefullPromoBanner = screen.getByTestId(
+          'writefull-premium-promo-banner'
+        )
+        const closeButton = within(WritefullPromoBanner).getByRole('button', {
+          name: 'Close',
+        })
         fireEvent.click(closeButton)
         expect(screen.queryByRole('link', { name: /Writefull/ })).to.be.null
         expect(localStorage.getItem('has_dismissed_writefull_promo_banner')).to