[openstreetmap/openstreetmap-website] Improve accessibility of note action buttons (PR #6869)

Arpan Mukherjee notifications at github.com
Thu Mar 5 19:30:48 UTC 2026


### Description

Fixes #11948

Improve keyboard accessibility of note action buttons.

Previously both **Resolve** and **Comment** buttons used the `btn-primary` Bootstrap variant, making the focused button difficult to distinguish when navigating via keyboard.

This change updates the secondary **Comment** action to use `btn-outline-primary`, improving visual contrast between buttons while staying consistent with Bootstrap styling used in the project.

### How has this been tested?

1. Ran the OpenStreetMap website locally using Docker.
2. Created a test note and opened the note page.
3. Navigated between buttons using the **TAB** key.
4. Verified that the focused button is now clearly distinguishable.
5. Confirmed no layout or functional regressions.


Normal mode  : 
<img width="316" height="240" alt="image" src="https://github.com/user-attachments/assets/8bf64c1e-85a9-488a-bd5b-cf303f4d83c9" />

edit mode : 
<img width="339" height="259" alt="image" src="https://github.com/user-attachments/assets/daec6175-eea5-4177-abf6-44e9a0757e7d" />

edit mode using TAB : 
<img width="336" height="257" alt="image" src="https://github.com/user-attachments/assets/37b8fe9e-2c2f-4d46-b914-c202fd80de8a" />

You can view, comment on, or merge this pull request online at:

  https://github.com/openstreetmap/openstreetmap-website/pull/6869

-- Commit Summary --

  * Improve accessibility of note action buttons

-- File Changes --

    M app/views/notes/show.html.erb (2)

-- Patch Links --

https://github.com/openstreetmap/openstreetmap-website/pull/6869.patch
https://github.com/openstreetmap/openstreetmap-website/pull/6869.diff

-- 
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/pull/6869
You are receiving this because you are subscribed to this thread.

Message ID: <openstreetmap/openstreetmap-website/pull/6869 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20260305/0070c34e/attachment-0001.htm>


More information about the rails-dev mailing list