PR Page - Display upload for all applicants

[fionazhou-jsb]

UPDATE: only allow pdf documents see spike

📖 User Story As a Team Lead, I want users to upload supporting documents required on PR requirement page So that examiners will have all the documents required to review my applications.

Context:

Currently users are asked to upload supporting documents when their rental property has PR requirement applied. The ask here is to show doc upload on the PR requirement page all the time regardless whether the rental property has PR requirement applied or exempted.

Decision: for Dec release we do not need to enforce this rule - combined total uploaded is 2 GB. Restriction on each file should be sufficient.

Post Dec release: doc upload is required for PR applied and optional for no PR requirement and no BL requirement.

Note: the hyperlink for "View document requirements" has not been created yet so just use a placeholder.

🎨 UX/UI Link: Host: Principal Residence | Review & Confirm | Detail Page Examiner: Detail Page

📏 Business Rules:

• [ ] Update language per design
• [ ] Host will be asked to upload supporting documents on the PR requirement page all the time.
• [ ] Each document uploaded cannot exceed 10 MB (confirmed with dev at Oct 17 refinement)
• [ ] Users can upload as many documents as they can
• [ ] Users upload one document at a time - single upload
• [ ] Users can upload files such as PDF, Word, jpg, png (just common photo format)
• [ ] Users cannot upload emails and exe. file.
• [ ] Users can delete documents uploaded, one at a time (single delete)
• [ ] View documentation requirements will be a hyperlink to a Housing webpage. However, this page has not been created yet.
• [ ] This is a required field if PR requirement is required (by selecting Yes for "Does the principal residence requirement apply to this property?"). At least one document needs to be uploaded.
• [ ] This is an optional field if PR requirement is exempted (by selecting No for "Does the principal residence requirement apply to this property?").
• [ ] Error handling: if users skip doc upload section or navigate to another page without uploading any documents, show error message and show a red error on the Stepper.
• [ ] Hosts can see the list of documents uploaded (just file name but not clickable or downloadable) on Review page
• [ ] Host can see the document uploaded on application details page and can view/download it. (file name and hyperlink)
• [ ] Examiner can see the document uploaded on application details page and can view/download it. (file name and hyperlink)

🎭 Story Scenarios Scenario Max Document Size Given the user is on the "PR Requirement" Page When the users is about to upload a file Then the document upload section should state the permitted document types and max file size for upload documents

Scenario upload documents individually Given the user is on the "PR Requirement" Page When the user clicks on the upload button then the user is provided with a simple upload function to upload one document from their computer or mobile device Then there is a list uploaded documents that shows each documents that have been uploaded

Scenario delete uploaded document Given the user is on the "PR Requirement" Page and wants to delete a document When the user clicks on a document from list that they want to delete Then the document selected is deleted

🌐 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.

[fionazhou-jsb]

@mbertucci for you to review. If it's good, we can give it to Andy for design

[stcepeda]

Reviewed. looks good.

[andyyanggov]

Are the document requirements still the same if the rental unit is not the PR? I imagine the wording at least needs updating?

[stcepeda]

@andyyanggov The documents requirement will be different depending on PR or not. They may also have to upload documentation if they are requesting an exemption. So the wording on the documentation upload section will need to be changed to something generic, like " upload all required documentation to support your application.

[andyyanggov]

So the 'Documentation Details' section—or more specifically, the 'View Documentation Requirements' expansion panel—is different based on PR or not?

[stcepeda]

I think it can be the same for all applicants. They will need to review documentation required for their type of application and ensure to upload it. It could be customized in the future, but for now... one size fits all approach.

[andyyanggov]

@mbertucci Is there / will there be another ticket to design/update the 'View Documentation Requirements' expansion panel? (I don't see any existing designs in Figma)

[fionazhou-jsb]

@andyyanggov the idea is a hyperlink to a HOUS website which will list all the docs required in an application. So it's easy for HOUS to manage and maintain the doc requirements. cc @mbertucci @stcepeda

[andyyanggov]

@fionazhou-jsb I see, in that case, I will update the design to use the correct component.

[fionazhou-jsb]

@stcepeda can you review this design? Links are under UX/UI link. I just reviewed and it looks good to me.

[mbertucci]

no dependencies as the work can be done with this ticket

[stcepeda]

@mbertucci reviewed. looks good