Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

PWA Bootstrap 5 upgrade #1167

Open
JoeArmani opened this issue Nov 22, 2024 · 2 comments · Fixed by episphere/connectApp#859 or episphere/connectApp#864
Open

PWA Bootstrap 5 upgrade #1167

JoeArmani opened this issue Nov 22, 2024 · 2 comments · Fixed by episphere/connectApp#859 or episphere/connectApp#864
Assignees
Labels
CCC Priority 1 Issues to be addressed in the current release PWA

Comments

@JoeArmani
Copy link
Collaborator

JoeArmani commented Nov 22, 2024

PWA: Bootstrap 5 upgrade (from Bootstrap 4)

https://getbootstrap.com/docs/5.0/getting-started/introduction/
https://getbootstrap.com/docs/5.0/getting-started/accessibility/


DevOps determined these upgrades and compatibilities are important alongside the rollout of Quest 2.
• Bootstrap 4 is out of date. Bootstrap 5 is required for security compliance.
• Bootstrap 5 offers enhanced accessibility and speed, and some additional features compared to Bootstrap 4.
• Quest, the survey module loaded into the PWA, uses Bootstrap 5, and we should make these Bootstrap versions compatible.
• Bootstrap 5 removes the jQuery dependency.

This update retains the PWA's existing visual aspects, with upgraded semantics for accessibility and Bootstrap 5 compatibility.

The following components received updates and should be tested on desktop, tablet, and mobile-sized screens:

  1. Participant sign-up form
  2. Participant verification form
  3. Navigation menu
  4. Dashboard
  5. Messages page
  6. Forms page
    -- HIPAA revocation form
    -- Data destruction form
  7. My Profile page
    -- Name update
    -- Contact information update
    -- Mailing address update
    -- Sign In Information update
  8. My Payment page
  9. My Samples page
  10. All pop-up modals. These will be encountered while navigating through the above list.
  11. Email and phone login

Additional test: please check for duplicate login emails. This PR takes the first step to resolve #1156

Additional test: please go to My ToDo List (surveys page), turn on VoiceOver, and use the keyboard to navigate to the survey start and continue buttons. VoiceOver should read the survey names. Refresh the page after toggling languages and repeat. Note: VoiceOver adds the word 'Button' in English based on screen reader settings regardless of the selected language in MyConnect. This tests PR episphere/connectApp#864, where the screen reader was reading the language markup syntax instead of the survey name when accessing a survey button

@JoeArmani JoeArmani added PWA CCC Priority 1 Issues to be addressed in the current release labels Nov 22, 2024
@JoeArmani JoeArmani linked a pull request Nov 26, 2024 that will close this issue
@JoeArmani JoeArmani moved this from Development to Team Review in Connect Development and Support Nov 26, 2024
@JoeArmani
Copy link
Collaborator Author

This PR is in review.

@JoeArmani JoeArmani moved this from Team Review to Testing in Connect Development and Support Dec 5, 2024
@JoeArmani
Copy link
Collaborator Author

JoeArmani commented Dec 5, 2024

This is in dev and ready to test. I've successfully tested everything locally.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CCC Priority 1 Issues to be addressed in the current release PWA
Projects
2 participants