Improve focus visibility for action buttons in note editor

[Arpan200502]

The current focus state for button.action only changes the background
color slightly, which results in very low contrast when navigating with
the keyboard.

This change adds a visible focus outline for button.action:focus-visible
so the focused button is clearly distinguishable during keyboard
navigation.

Fixes #11948

[matkoniecz]

Can you post screeenshot from your testing?

[matkoniecz]

Is it working well also in dark mode?

[Arpan200502]

@hlfan @matkoniecz

I have a clarification regarding the correct repository for submitting my changes.

The issue/PR is raised in the iD repository, but the fixes I implemented were made in the OpenStreetMap website repository, where the iD editor is integrated. I tested the changes there, and they work as expected.

Should I submit the pull request to the OpenStreetMap website repository where the changes were made and validated, or should I replicate the fixes directly in the iD repository and submit the PR there instead?

I want to ensure the contribution is made to the correct codebase.

[hlfan]

If your changes are only to the editor, then this repo is the correct place. Once this PR is merged and a new release made, it will find its way into the website without your engagement.

the OpenStreetMap website repository, where the iD editor is integrated.

This isn't the case anymore since openstreetmap/openstreetmap-website#6565 migrated the dependency to npm.

[Arpan200502]

If your changes are only to the editor, then this repo is the correct place. Once this PR is merged and a new release made, it will find its way into the website without your engagement.

the OpenStreetMap website repository, where the iD editor is integrated.

This isn't the case anymore since openstreetmap/openstreetmap-website#6565 migrated the dependency to npm.

ok got it thanks

[Arpan200502]

If your changes are only to the editor, then this repo is the correct place. Once this PR is merged and a new release made, it will find its way into the website without your engagement.

the OpenStreetMap website repository, where the iD editor is integrated.

This isn't the case anymore since openstreetmap/openstreetmap-website#6565 migrated the dependency to npm.

@hlfan I’m trying to run the iD editor locally to test a fix, but the UI is not rendering properly.

What I’m seeing

• The editor loads, but most of the UI is broken or missing

• Multiple messages like:

  • Missing en translation: inspector.feature_list
  • Missing en translation: toolbar.inspect

• Toolbar buttons are not visible or appear as blank blocks

• In some cases, the screen is almost entirely white

Environment

• OS: Windows
• Node: v20.x (downgraded from v24 after compatibility issues)
• npm:

Steps I followed

rm -rf node_modules package-lock.json dist
npm cache clean --force
npm install --include=dev --omit=optional
npm run build
npm start

Additional notes

• I previously encountered issues with Node v24 (fs.globSync not found), so I switched to Node v20

• Build now completes, but the UI still appears broken with missing translations

• I accessed the editor at:

  • http://localhost:8080/

Screenshots

Is there an additional step required to properly generate or load translations/assets for local development?

Also, is this a known issue on Windows environments?

---

Any guidance would be helpful, as I’m currently unable to verify my fix locally.

[tyrasd]

@Arpan200502: npm run all should build the missing translations/css/icons/etc.

[matkoniecz]

also, you can look at build from

@github-actions github-actions bot deployed to pr-preview-12003 7 minutes ago