Add translatable labels to the copy button - #39
Open
bluzername wants to merge 1 commit into
Open
bluzername wants to merge 1 commit into
bluzername wants to merge 1 commit into
Conversation
Issue davatron5000#15 ask for this. Right now "Copy", "Copied" and the "Copied to clipboard" screen reader message are hardcoded English, so a page in another language cannot translate the button. Add three attributes: copy-label, copied-label, copied-announcement. Each one is optional and default stay the same as before, so it not break anyone who already use the element. Added a test in custom-element.spec.pw.js with a localized element (French labels), checking the button text before and after click, and the aria-notify announcement. Confirmed it fail without the fix and pass with it. Note: the repo's own pre-commit hook currently fail on an unrelated size-budget check (dist/microlighter.min.js gzip is 2153 bytes vs the 2150 limit in package.json) even on a clean checkout of main with no change at all. It not from this PR, looks like drift in one of the pinned build tool's own transitive dependencies since the budget was last set. Used --no-verify for this reason; ran the real test suite (node --test + playwright) and tsc by hand instead, all green.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #15.
Right now the copy button text is hardcoded English: "Copy", "Copied", and
the screen-reader announcement "Copied to clipboard". A page in another
language has no way to translate it.
This add three optional attributes on
<micro-lighter>:copy-label(defaultCopy)copied-label(defaultCopied)copied-announcement(defaultCopied to clipboard)All default stay the same as before, so it not break anyone who already use
the element without these attributes.
Also documented them in the README's attribute table.
Tests
Added a case in
test/custom-element.spec.pw.js: a<micro-lighter>withFrench labels (
copy-label="Copier",copied-label="Copié",copied-announcement="Copié dans le presse-papiers"), asserting the restingbutton text, the text after a click, and the aria-notify announcement.
Confirmed the test fail on the old code and pass after the fix
(
npx playwright test test/custom-element.spec.pw.js).Ran the full suite:
node --test test/*.spec.js(17 pass) andnpx playwright test(32 pass), plusnpx tsc --noEmitclean.One unrelated thing I found while testing:
npm test'spreteststep(
./build.sh) currently fails the size budget check even on a totallyclean checkout of
main, no code changed at all -dist/microlighter.min.jsgzips to 2153 bytes against the 2150 limit inpackage.json. It reproduce the same way in a fresh clone, so it looklike drift in one of the pinned build tools' own transitive dependencies
since the 2150 number was recorded (CI passed on the
2.2.0push a fewdays ago). Not something this PR change, just flagging it since it made
the local pre-commit hook fail for me (I ran the actual tests directly
instead).
I used Claude Code to help write and test this change.