Stepper And SBC Account Info

[mbertucci]

📖 User Story

As a user, immediately after choosing to either use an SBC-Connect Account or I have been directed to the Application Details View page because I don't have an SBC Account I want to be presented with "Application Details View" page featuring a stepper for each step in the application (Contact Information, Property Details, ~Document Upload~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 BCeID, 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. Let's call it the STRR Envelope In that frame they can see all of the steps to submit an application. (there are other components that they see like the amount owing, and there will be a contact us button. )

This will also be enveloped with the Registries Envelope which includes the BC Gov Logo Registries Name SBC Account, Notifications (top right in blue bar) and the back / save buttons at the bottom.

Then there is also the wider BC Gov Envelope blue bar at the bottom

📏 Business Rules

• [ ] The icon on the steppers is meaningful
• [ ] Steppers will have X steps which are: Contact Information, Property Details, Upload Documents, and Review and Confirm
• [ ] Stepper should highlight "Contact Information" step
• [ ] Users can navigate to different step by clicking on the icon on the stepper
• [ ] Users will be redirected to the corresponding page after clicking

UX UI Designs:

https://www.figma.com/file/R9GF5wvwq2TrnbnsbhPfvV/STR-Host-Application-Tickets?type=design&node-id=716-34333&mode=design&t=Nm1PexDgpWhaDoMg-4

🎭 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, And if I have chosen an account, my account information, and notification bell is visible in the top right corner, alongside notifications and access to the registries wrapper, ** And ** if I have not chosen and account the top right of the registries envelope is blank 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]

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

[mbertucci]

@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]

@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]

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

[mbertucci]

@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]

This looks great! I noticed a few things:

• [ ] 3rd step text should be 'Principal Residence' instead of 'Determine Eligibility', that's a recent change. It currently reads 'Determine Edit'

• [ ] Stepper buttons should appear in focus order, currently they are skipped-- focus moves from 'Create account' to Back/Next button group.

• [ ] There are also some hover styles that need to be implemented, I can provide more details, I can see that it's not well documented in the prototype, sorry! This is the documented stepper style from the style guide: https://sites.google.com/d/1i1i467p52p1C1xEXqGusPrN8717lRhkt/p/10f7bd-jv5_t1mu4P_34cn2j7uYRh5wBq/edit

• [ ] I noticed that there is a little flash where the icon disappears on click, not a huge deal, but it is something that I noticed.

• [ ] Not sure if the page section is in scope but the second line under the name display under primary contact should be the small paragraph size 14/22px

• [ ] The drop shadow is missing on the stepper and fee summary components.

• [ ] There's some screenreader things that I noticed: the stepper is not being announced as an interactive element. Also the selected/current page state is not being announced, Here's a reference that might be userful https://www.w3.org/WAI/tutorials/forms/multi-page/

• [ ] The icons have been implemented using a SVGs so they will need to have alt text added to them. 1-'Add contacts' 2-'Add properties' 3-'Upload documents' (might change if we swap the icon) 4- 'Check and verify'

[samIndustrio]

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]

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]

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

[atronse]

Yes, it should always be open on the Desktop view

[mbertucci]

• please see Alexis' notes and fix - thank you

[trevoratindustrio]

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