search

bcgov / entity

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

Stepper #20647

Closed mbertucci closed 5 months ago

mbertucci commented 7 months ago

📖 User Story

As a user, immediately after choosing to either use an SBC-Connect Account or I have been directed to the "Contact Information Page" of the "STRR Registration Form". because I don't have an SBC Account I want to be presented with "Contact Information" page featuring a stepper for each step in the application (Contact Information, Property Details, Determine Eligibility, and Review and Submit) So that I can easily navigate through the application process and have constant access to my account information, notifications, and other essential tools.

Context:

A user will have authenticated using "BC Services Card" , then behind the scenes "SBC-Connect" platform will check to see if the user already has an account with SBC-Connect.

If they do then then we want the user to be presented with a screen that shows all of their accounts. Directs them to pick an account or to create a new one.

Then they go to a page that is basically the skeleton/ envelope / frame for the rest of the application process. This is called the STR Envelope

image.png

https://teams.microsoft.com/l/entity/95de633a-083e-42f5-b444-a4295d8e9314/_djb2_msteams_prefix_2663860892?context=%7B%22channelId%22%3A%2219%3Ae003049a06f1494eb8669501e4faccbd%40thread.tacv2%22%7D&tenantId=6fdb5200-3d0d-4a8a-b036-d3685e359adc

📏 Business Rules

UX UI Designs:

🎭 Story Scenarios

Scenario 1: Host has an SBC Account and has selected one of the accounts.

Given I am on the "Account Selection or Creation" View When I click to confirm my choice of using my existing SBC-Connect account Then I should be taken directly to the application details view page, And I see a stepper indicating the steps in the application process: Contact Information, Property Details, Document Upload, Review and Submit, and Fee Summary, So that I can efficiently navigate through my application with all necessary information and tools at my disposal.

🔗 Mural Links

Story in Mural:

🌐 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 #### Scenario 1: 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. #### Scenario 2: Optimizing Dashboard for Hosts with Low Internet Connectivity - **Given** a user accesses [Form Name] with a low-speed internet connection - **When** the user attempts to load and interact with the dashboard page - **Then** [Form Name] should prioritize critical content and functionality, loading essential elements first to ensure usability. ### Mobile Responsiveness #### Scenario 1: Mobile Responsiveness - **Given** I am accessing [Form Name] on a mobile device - **When** I click on the "[Link Name]" link - **Then** [Form Name] should display correctly and be easily editable on my device, ensuring a responsive design.
mbertucci commented 6 months ago

@atronse Please confirm the link to the design is correct Thank you :)

mbertucci commented 6 months ago

@trevoratindustrio Fiona and I weren't sure if we should break this up in to two stories .. one for the stepper and one for the SBC Connect Access.

trevoratindustrio commented 6 months ago

@mbertucci Let's break them up - this story feels like purpose is the framework for the app/forms and then the sbc account info load/view story is isolated to that piece of functionality

atronse commented 6 months ago

Normally the stepper has some styles for validation on form submit as well, would this be a separate ticket/story?

mbertucci commented 6 months ago

@atronse I believe we would add the requirements for form validation as business rules and scenarios for each story. Let's chat later this afternoon about this.

atronse commented 5 months ago

This looks great! I noticed a few things:

samIndustrio commented 5 months ago

Thanks for the quick feedback will address all these points just two questions below:

The fee summary currently is collapsed by default on the mobile site - but only when the site is loaded at a mobile screen size. Do we need to automatically collapse it when moving between mobile & desktop?

Fee summary control should be hiding/showing as expected when moving between mobile & desktop just had a look and this seems to be working

atronse commented 5 months ago

It doesn't necessarily need to be collapsed when moving from desktop to mobile view, I think it's fine as long as it loads in the collapsed state on mobile.

I'm still seeing the issue with the Collapsed fee summary on desktop, i can show it tomorrow at stand up

samIndustrio commented 5 months ago

Is the expected behavior that collapsed fee summary on mobile will switch to open on desktop (while still hiding the control)?

atronse commented 5 months ago

Yes, it should always be open on the Desktop view

mbertucci commented 5 months ago
trevoratindustrio commented 5 months ago

Feature built in https://github.com/bcgov/STRR/pull/9 and design fixes addressed in https://github.com/bcgov/STRR/pull/10