Nyc UI 453 ada compliance by CaylaSavitzky · Pull Request #8 · camsys/mta-oba-react

CaylaSavitzky · 2026-03-26T19:50:57Z

represents a set of changes needed for ada compliance

not finished but a review would help

…cted

Copilot

Pull request overview

This PR is part of the ongoing ADA compliance work, primarily improving keyboard focus visibility and focus affordances across route/stop cards, header/footer links, and the Google Translate trigger.

Changes:

Introduces a reusable UnderlineOnFocusElement helper and applies it to multiple interactive labels/links.
Adds “group” focus styling patterns to card headers and header logo elements for consistent focus underline/border behavior.
Updates Google Translate trigger icon styling to use currentColor and adjusts focus styles across a few buttons/links.

Reviewed changes

Copilot reviewed 12 out of 12 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
src/css/bustime.sass	Adds (commented) focus-decoration experiments inside card-header focus styling.
src/css/_helpers.sass	Normalizes a Sass variable line and adds a new translate-related color token.
src/components/views/StopCardWrapper.tsx	Applies grouped focus underline behavior to stop-direction header labels.
src/components/views/RouteCard.tsx	Applies grouped focus underline behavior to route-direction destination text.
src/components/views/FavoritesCard.tsx	Refactors favorite item rendering to use new selectable header/card components.
src/components/views/CardHeaderComponents.tsx	Adds selectable favorite route/stop card components using underline-on-focus behavior.
src/components/views/AllRoutesWrapper.tsx	Wraps abbreviated route card header with underline-on-focus helper.
src/components/shared/common.tsx	Adds `UnderlineOnFocusElement` and enhances `ChangeViewButton` focus ring/outline styling.
src/components/shared/buttons.tsx	Tweaks shuttle button focus outline styling.
src/components/pageStructure/Header.js	Adds focus border styling via Tailwind utilities to logo elements/links.
src/components/pageStructure/GoogleTranslate.tsx	Converts translate trigger to use underline-on-focus helper + `currentColor` SVG strokes.
src/components/pageStructure/Footer.js	Converts footer links to use underline-on-focus helper.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-26T19:56:43Z

+            <div className={`card route-card ${routeMatch.routeId}`} onClick={()=>search(routeMatch.routeId)}>
+                <button
+                    className="group card-header link-header"
+                    style={{ borderColor: "#" + routeMatch.color }}
+                    tabIndex={0}


These new selectable favorite cards attach navigation onClick to a wrapping <div> while also rendering a <button> inside. This creates nested interactive behavior (and relies on event bubbling), which can confuse assistive tech and makes keyboard/mouse behavior harder to reason about. Prefer putting the click handler on the <button> (or render a single interactive element) and keep the wrapper purely presentational.

Copilot · 2026-03-26T19:56:43Z

+                    <a href="#" onClick={(e) => {e.preventDefault(); search("")}} aria-label="MTA Bus Time Home" className="logo-link group">
+                        <img src={bustimeLogo} alt="MTA Bus Time" className="logo group-focus:border-mta-yellow border-b-3 border-transparent" />


border-b-3 is not a standard Tailwind border-width utility (default is typically 0/2/4/8). If Tailwind isn’t configured to generate it, this focus indicator won’t render. Use a supported class (e.g., border-b-2/border-b-4) or an arbitrary value (border-b-[3px]) if you need 3px.

Copilot · 2026-03-26T19:56:44Z

                <div className="w-px h-3/4 bg-mta-black-4 self-end"></div>

-                <a href="https://www.mta.info/" target="_blank" aria-label="MTA Home" className="bottom flex mta-logo-link justify-end items-end">
+                <a href="https://www.mta.info/" target="_blank" aria-label="MTA Home" className=" bottom flex mta-logo-link justify-end items-end focus:border-mta-yellow border-b-3 border-transparent">


This external link uses target="_blank" without rel="noopener noreferrer", which can enable reverse-tabnabbing. Add the appropriate rel attributes when opening a new tab/window.

Suggested change

<a href="https://www.mta.info/" target="_blank" aria-label="MTA Home" className=" bottom flex mta-logo-link justify-end items-end focus:border-mta-yellow border-b-3 border-transparent">

<a href="https://www.mta.info/" target="_blank" rel="noopener noreferrer" aria-label="MTA Home" className=" bottom flex mta-logo-link justify-end items-end focus:border-mta-yellow border-b-3 border-transparent">

Copilot · 2026-03-26T19:56:44Z

+function UnderlineOnFocusElement({ 
+    as: Element = 'a', 
+    variant = 'mta_yellow', 
+    className, 
+    children, 
+    ...props 
+}: Props) {


UnderlineOnFocusElement is typed with Props, but Props is not declared or imported in this file. This will cause a TypeScript error (Cannot find name 'Props') and makes the component’s API unclear. Define a proper props type (e.g., a polymorphic prop type that includes as, variant, className, children, and the underlying element props) and use it here.

ts cleanup is coming in another branch, accepting it for now

Copilot · 2026-03-26T19:56:44Z



-export {ChangeViewButton, ChangeViewButtonProps}
+// // has multiple variants rather than accepting color as prop becasue tailwind struggles with dynamic classes


Typo in comment: “becasue” should be “because”.

Suggested change

// // has multiple variants rather than accepting color as prop becasue tailwind struggles with dynamic classes

// // has multiple variants rather than accepting color as prop because tailwind struggles with dynamic classes

Copilot · 2026-03-26T19:56:44Z

+          // text-decoration: underline
+          // text-decoration-color: $black
+          // text-decoration-thickness: 2px


There are commented-out text-decoration focus styles left in the .card-header &:focus block. Since they’re not active, they add noise and make it unclear what the intended focus treatment is. Either remove them or re-enable them (if still needed) as part of the ADA focus styling work.

Suggested change

// text-decoration: underline

// text-decoration-color: $black

// text-decoration-thickness: 2px

text-decoration: underline

text-decoration-color: $black

text-decoration-thickness: 2px

Copilot · 2026-03-26T19:56:45Z

                <div className="w-px h-3/4 bg-mta-black-4 self-end"></div>

-                <a href="https://www.mta.info/" target="_blank" aria-label="MTA Home" className="bottom flex mta-logo-link justify-end items-end">
+                <a href="https://www.mta.info/" target="_blank" aria-label="MTA Home" className=" bottom flex mta-logo-link justify-end items-end focus:border-mta-yellow border-b-3 border-transparent">


border-b-3 is likely not generated by Tailwind’s default border-width scale. If it’s not configured, the intended focus border won’t appear here. Consider switching to a supported utility (e.g., border-b-2/border-b-4) or border-b-[3px].

Copilot · 2026-03-26T19:56:45Z

            <div className={`card route-card ${routeMatch.routeId}`} onClick={()=>search(routeMatch.routeId)}>
-                <button
+                <UnderlineOnFocusElement
+                    variant="black"
+                    as="button"
                    className="card-header link-header"
                    style={{ borderColor: "#" + routeMatch.color }}
                    tabIndex={0}
                >
                    <h3 className="card-title">{OBA.Config.noWidows(routeMatch.routeTitle)}</h3>
-                </button>
+                </UnderlineOnFocusElement>


AbreviatedRouteCard still puts the navigation onClick on the wrapping <div> while rendering a <button> without an onClick. This relies on event bubbling and results in a non-interactive container behaving like a control. For clearer semantics/accessibility, move the click handler onto the <button> (or render a single interactive element) and keep the wrapper non-clickable.

Copilot · 2026-03-26T19:56:45Z

 import log from 'loglevel';
 import stopPopupIcon from "../../img/icon/bus-stop.svg"
 import {StarBorderIcon, BusStopIcon, VehicleIcon} from "../shared/icons";
+import { SelectableFavoriteRouteCard, SelectableFavoriteStopCard } from "./CardHeaderComponents";



After refactoring FavoriteItem to delegate rendering to SelectableFavoriteRouteCard / SelectableFavoriteStopCard, several imports and locals in this file appear unused (e.g., Cookies, OBA, stopPopupIcon, StarBorderIcon/BusStopIcon/VehicleIcon, and the removeFavorite/search destructures in FavoriteItem). Cleaning these up will reduce bundle noise and avoid unused-var tooling failures.

…abbable

Copilot

Pull request overview

Copilot reviewed 12 out of 12 changed files in this pull request and generated 7 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

CaylaSavitzky added 2 commits March 26, 2026 14:14

NYCUI-446 The buttons are not visually distinct when in focus or sele…

821ff74

…cted

NYCUI-457 light blue highlight over dropdowns not visually distinct

b987121

CaylaSavitzky requested a review from Copilot March 26, 2026 19:51

Copilot started reviewing on behalf of CaylaSavitzky March 26, 2026 19:51 View session

Copilot AI reviewed Mar 26, 2026

View reviewed changes

CaylaSavitzky and others added 3 commits March 26, 2026 16:04

adding favorites button for underline

ca8fb8f

updated Refresh button styles

947115a

quick ada compliance fixes

8b06674

CaylaSavitzky force-pushed the NYCUI-453-ada-compliance branch from 8f4447b to 8b06674 Compare March 30, 2026 17:52

terryguan97 and others added 4 commits March 31, 2026 12:19

updated focus state of bus info on route stops

df4af2e

in geocard stops-view under a route direction, made view full route t…

33b73f2

…abbable

made elements in stop cards tabbable

0cf6004

Merge branch 'main' into NYCUI-453-ada-compliance

1e04303

CaylaSavitzky requested a review from Copilot April 14, 2026 19:52

Copilot started reviewing on behalf of CaylaSavitzky April 14, 2026 19:52 View session

Copilot AI reviewed Apr 14, 2026

View reviewed changes

CaylaSavitzky merged commit ca347bf into main Apr 14, 2026
4 checks passed

CaylaSavitzky deleted the NYCUI-453-ada-compliance branch April 17, 2026 04:43

		<a href="#" onClick={(e) => {e.preventDefault(); search("")}} aria-label="MTA Bus Time Home" className="logo-link group">
		<img src={bustimeLogo} alt="MTA Bus Time" className="logo group-focus:border-mta-yellow border-b-3 border-transparent" />

	<a href="https://www.mta.info/" target="_blank" aria-label="MTA Home" className=" bottom flex mta-logo-link justify-end items-end focus:border-mta-yellow border-b-3 border-transparent">
	<a href="https://www.mta.info/" target="_blank" rel="noopener noreferrer" aria-label="MTA Home" className=" bottom flex mta-logo-link justify-end items-end focus:border-mta-yellow border-b-3 border-transparent">



		export {ChangeViewButton, ChangeViewButtonProps} No newline at end of file
		// // has multiple variants rather than accepting color as prop becasue tailwind struggles with dynamic classes

Conversation

CaylaSavitzky commented Mar 26, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

CaylaSavitzky Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants