search

bcgov / entity

ServiceBC Registry Team working on Legal Entities
Apache License 2.0
23 stars 58 forks source link

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

Open fionazhou-jsb opened 1 month ago

fionazhou-jsb commented 1 month ago

📖 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:

🎭 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 commented 1 month ago

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

atronse commented 1 month ago

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 commented 1 month ago

@mbertucci this is ready for review

fionazhou-jsb commented 1 month ago

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

mbertucci commented 1 month ago

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

dimak1 commented 2 weeks ago

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