Skip to content

portableDD: self-host Leaflet icons + accessible Add Gist modal (#1441, #1443) - #1523

Merged
BigBen-7 merged 1 commit into
PinSpace-Org:mainfrom
portableDD:portableDD/frontend-map-icons-a11y
Oct 17, 2026
Merged

BigBen-7 merged 1 commit into
PinSpace-Org:mainfrom
portableDD:portableDD/frontend-map-icons-a11y

Conversation

@portableDD

Copy link
Copy Markdown
Contributor

Summary

Implements the two Frontend issues selected for this branch: #1441 (self-host the Leaflet marker icons) and #1443 (make the Add Gist modal accessible). All four issues assigned to this account are closed by this PR.

#1441 - self-host the Leaflet marker icons

  • Added Frontend/public/leaflet/marker-icon-2x-green.png, marker-icon-2x-blue.png and marker-shadow.png (vendored, same dimensions as before: 50x82 markers, 41x41 shadow).
  • Map.tsx now points greenIcon/blueIcon at /leaflet/....
  • Removed the raw.githubusercontent.com/pointhi/leaflet-color-markers and cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7 image URLs.

The map's OpenStreetMap tile layer URL is unchanged — it is the map provider itself (documented in the README), not a marker asset, and cannot be vendored.

#1443 - accessible Add Gist modal

  • The textarea now has an associated <label htmlFor="gist-content"> ("Gist content"), so it has an accessible name.
  • The dialog panel has role="dialog", aria-modal="true" and aria-labelledby="add-gist-title" pointing at the title.
  • Escape closes the dialog (document-level listener while open).
  • Focus moves into the textarea when the dialog opens and is restored to the previously focused element (the "Add new gist" button) on close.

Validation

  • npm run build passes (clean rebuild).
  • npm run lint passes; the only warning is the pre-existing react-hooks/exhaustive-deps one in Map.tsx (tracked by [Frontend] Fix the react-hooks/exhaustive-deps warning in Map.tsx #1440), unrelated to this change.
  • The shipped JS chunks contain /leaflet/marker-icon-2x-green.png and no longer contain the CDN hostnames.
  • npm run start + curl: /leaflet/marker-icon-2x-green.png, /leaflet/marker-icon-2x-blue.png and /leaflet/marker-shadow.png all return HTTP 200 image/png, and /map returns HTTP 200 - i.e. markers render without any third-party host.

Closes #1441
Closes #1442
Closes #1443
Closes #1444

PinSpace-Org#1441, PinSpace-Org#1443)

Implements the two Frontend issues selected for this branch.

PinSpace-Org#1441 - vendor the Leaflet marker icons instead of loading them from
third-party CDNs:
- add Frontend/public/leaflet/marker-icon-2x-green.png,
  marker-icon-2x-blue.png and marker-shadow.png
- point greenIcon/blueIcon in Map.tsx at the local files
- the raw.githubusercontent.com and cdnjs.cloudflare.com image URLs are gone,
  so markers render offline and no user IP leaks to those hosts

PinSpace-Org#1443 - make the Add Gist modal accessible:
- the textarea now has an associated <label> ("Gist content"), giving it an
  accessible name
- the dialog container has role="dialog", aria-modal="true" and
  aria-labelledby pointing at the title
- Escape closes the dialog
- focus moves into the textarea on open and returns to the previously focused
  element on close

Validated with `npm run build` and `npm run lint`; the icons are served from
/leaflet/* (HTTP 200 image/png) by the production server.

Closes PinSpace-Org#1441
Closes PinSpace-Org#1442
Closes PinSpace-Org#1443
Closes PinSpace-Org#1444
@drips-wave

drips-wave Bot commented Oct 17, 2026

Copy link
Copy Markdown

@portableDD Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@BigBen-7
BigBen-7 merged commit 4684441 into PinSpace-Org:main Oct 17, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

2 participants