melmai / kcalerts-restapi Goto Github PK

ISSUE: Snow Route alerts display generic alert icon.
FIX: Add conditional to render snow icon for Snow Route alerts.

The current version requires alerts to be associated with a route to display. System wide alerts do not have this. Will need to implement banners to display on the home page for System alerts.

Example:
{ "alert_id": 1713, "effect_name": "Snow Routes", "effect": "DETOUR", "cause_name": "snow", "cause": "WEATHER", "header_text": "Snow is falling across King County, but Metro buses are currently able to operate on their regular routes. Transit Alerts will be sent out if there is a need to switch to snow routes.", "short_header_text": "Snow is falling across King County, but Metro buses are regular operation", "url": "https://kingcountymetro.blog/", "severity": "Significant", "created_dt": "1670339549", "last_modified_dt": "1670428019", "service_effect_text": "Bus, Marine and Rail service is operating on snow routes.", "alert_lifecycle": "New", "banner_text": "Snow is falling across King County, but Metro buses are currently able to operate on their regular routes. Transit Alerts will be sent out if there is a need to switch to snow routes.", "effect_periods": [{ "effect_start": "1670339520", "effect_end": "" }], "affected_services": { "services": [ { "route_type": "0", "mode_name": "Light Rail" }, { "route_type": "3", "mode_name": "Bus" }, { "route_type": "4", "mode_name": "Boat" } ], "elevators": [] } }

CITRS is requesting a snowflake icon be added to the accordion panel so that users can see if there are any snow-related alerts that apply to a route without expanding the accordion.

Mark has created a working mockup in codepen: https://codepen.io/markbilodeau/full/bGOjBWw

Here's a page from Stack Overflow that talks about accessibility of numeric badges and pills: https://stackoverflow.com/questions/68170589/do-html-elements-like-pill-badge-need-extra-aria-role

If we use the featured answer on our project, it would be like this:

<div class="route-status">
<span role="status" class="ongoing" aria-label="2 ongoing alerts">2</span>
<span role="status" class="upcoming" aria-label="1 upcoming alerts">1</span>
</div>

However, there are problems with starting a label with a number when the accordion title ends with a number. When I listen to Route 120 with the aria-label is in place, I hear:

"Route one twenty two ongoing alerts one upcoming alerts" (so it sounds like it's Route 122 and not Route 120.)

Maybe we should just use aria-hidden="true" to hide the status altogether.

Issue: The current ID of the container that holds all of the alerts will collide with Sitecore10 accordion elements.
Solution: Need to update the ID to be unique.

Need to update the alerts to display:

1. link in description
2. update verbiage from View/Hide to Show/Hide
3. shorten effective dates to only start dates

Search works but routes should reset to show all once text is removed

Alert type icons - replace ::before with element text
Alert status type icons - add aria-hidden=true to .route-status div

The alert banners for single/multi route pages are displaying system alerts as well. These alerts do not have a route attached to them.

Look into requirements for client side caching of the JSON data.

Please change the cause source to 'cause_name'.

When filtering routes by search, the routes do not hide as expected when filtering by status (ie: switching to Planned Updates)

Refactor code to reduce redundancies in code

Conditional link should display snow map within a fancybox popover.

Add a link to display before the accordion of route alerts. This link should only display when there are active snow alerts.

Badges are missing for alert status.

Screen reader reads out slashes for dates

<p class="en-translation" aria-labelledby="effective-date-label">             <span class="sr-only" id="effective-date-label">Effective March 18 thru September 1, 2023</span>             <span aria-hidden="true">Effective 3/18/2023 thru 9/1/2023</span>  </p>