UX/UI - Host/Examiner - Step 2 & 3 info on application details page

[fionazhou-jsb]

📖 User Story
As a host, on the application details page
I want to view URLs entered (if any) in Step 2 and information entered in Step 3
So that I can view what I have entered in the application

As an examiner, on the application details page
I want to view URLs and Step 3 information entered by host
So that I can make decisions based on the information available

Context:

This is missing from the current application

🎨 UX/UI Link:
Host: https://www.figma.com/design/R9GF5wvwq2TrnbnsbhPfvV/STR-Application-Tickets?node-id=4343-4474&t=bKyESWphmXFWWL8I-4

Examiner: https://www.figma.com/design/R9GF5wvwq2TrnbnsbhPfvV/STR-Application-Tickets?node-id=4411-5157&t=bKyESWphmXFWWL8I-4

📏 Business Rules:

• Host should see the list of URLs entered in Step 2 if added and these URLs on application details page
• Examiner should see the list of URLs entered in Step 2 if added and these URLs on application details page
• These URLs are clickable and will open in a new tab
• Host should see the information entered in Step 3 such as whether their property is in a community where the PR applies, exemption reasons, service provider, on application details page.
• Examiner should see the information entered in Step 3 such as whether their property is in a community where the PR applies, exemption reasons, service provider, on application details page.

🎭 Story Scenarios
Scenario 1: Host on Application details page
Given the Host has completed the application and payment successfully
When the host is on Application details page
Then the host can view and click URLs (if entered)
AND Then the host can view the questions answered in Step 3

Scenario 2: Examiner on Application details page
Given the Host has completed the application and payment successfully
When the examiner is on Application details page
Then the examiner can view and click URLs (if entered by host)
AND Then the examiner can view the questions hosts answered in Step 3

🌐 Accessibility Scenarios

Keyboard Users

Scenario: Comprehensive Keyboard Navigation
Given I am a keyboard user on the website
When I use the Tab key to navigate through the website
Then all interactive elements should be accessible and highlighted
And I should be able to activate these elements using the Enter or Space key

Scenario: Full Content Accessibility via Keyboard
Given I am a keyboard user navigating the website
When I traverse through different pages and sections
Then all content should be fully accessible using the keyboard alone
And there should be no traps that prevent me from navigating away using the keyboard

Screen Reader Users

Scenario: Accessible Image Descriptions
Given I am using a screen reader on the website
When I encounter images
Then each image should have descriptive alt text that conveys the same message as the image

Scenario: Structured Navigation for Screen Readers
Given I am navigating the website using a screen reader
When I move through different page elements
Then the content should be structured with proper headings
And the reading order should be logical and sequential

Scenario: Descriptive Form Fields
Given I am filling out a form using a screen reader
When I navigate through the form fields
Then each field should be clearly labeled with descriptive text
And instructions should be directly associated with their respective inputs

Low Vision Users

Scenario: Effective High Contrast Mode
Given I am a user with low vision on the website
When I enable high contrast mode
Then all content should display with high color contrast suitable for low vision
And the layout should remain coherent and unchanged

Scenario: Text Resizing Accommodation
Given I am a user with low vision on the website
When I increase the text size
Then the text should resize without loss of information or functionality
And the page layout should adapt accordingly without disrupting the user experience

Scenario: Personalized Styling Preferences
Given I am a user with low vision adjusting settings on the website
When I customize my styling preferences, including colors, fonts, and spacing
Then these adjustments should be applied consistently across all pages
And the changes should persist during my entire session or until altered by me

##

🌍 Global Scenarios

## Data Validation # Mikaela to confirm: Do we need to do these for MVP - data validation required for inputing data in the right format - as defined by business rules.

Internet Connection

Standard Internet Connection

Given I am accessing the website from a standard internet connection
When I navigate to any page on the site
Then the page should load completely within 2 seconds, ensuring a fast and efficient user experience.

Low-Speed Internet

Given a user accesses "Application Details View" with a low-speed internet connection defined as under [specific speed] Mbps
When the user attempts to load and interact with the dashboard page
Then the "Application Details View" should prioritize critical content and functionality, loading essential elements first to ensure usability.

Mobile Responsiveness

Given I am accessing "Application Details View" on a mobile device
When I click on the "any" link
Then "_____ " should display correctly and be easily editable on my device, ensuring a responsive design.

[mbertucci]

Alexis this story is pretty straightforward. It's not a copy of a previous story

[atronse]

I think this is just to add the Platform URLs to the Application details page.
I think we had previously decided to included data labels on optional fields that have been left blank, so I've included the Parcel Identifier as well.

Host: https://www.figma.com/design/R9GF5wvwq2TrnbnsbhPfvV/STR-Application-Tickets?node-id=4450-5004&t=dC8fYX3EQQFwxsJN-4

Examiner: https://www.figma.com/design/R9GF5wvwq2TrnbnsbhPfvV/STR-Application-Tickets?node-id=4612-5318&t=oENajPAPugcFWURA-4

[atronse]

@mbertucci this is ready for review

[fionazhou-jsb]

@atronse we need to show all the values from Step 3 as well. Currently it only shows the documents uploaded only cc @mbertucci

[mbertucci]

Ready for development. Moving to Refinement and will see if @dimak1 has time this sprint to work on it.

[dimak1]

From my understanding, we need to add Platform Urls to the Application Details page. I would estimate dev at 3 points.

[rstens]

QA application ids 72, 69, 68 and 64 may be helpful.

[rstens]

Titles for URL are a bit odd, can we maybe find a better way to present?
@andyyanggov

Maybe something like this:

[rstens]

After discussion with Andy: we'll pass this ticket, changes to tiles will be brought up in a new ticker later. @andyyanggov

[rstens]

Tested all 5 business rules (checked) and scenarios.