From 36f0d3789d7538acf81786fe17d183b48c4c5371 Mon Sep 17 00:00:00 2001 From: Romaric Pascal Date: Tue, 4 Feb 2025 15:54:00 +0000 Subject: [PATCH 1/8] Update name and description of macro options - Consistently talk about 'choosing a file' to align with the button's default. - Ensure order is consistent between description, default and condition for translation options. - Ensure all translation options are suffixed by 'Text' Co-authored-by: @seaemsi --- .../components/file-upload/file-upload.yaml | 26 ++++++++++++------- 1 file changed, 17 insertions(+), 9 deletions(-) diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml b/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml index ff521e4412..a8f7d56c98 100644 --- a/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml +++ b/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml @@ -80,23 +80,31 @@ params: - name: javascript type: boolean required: false - description: Whether to enable JavaScript enhancements for the component - - name: selectFilesButtonText + description: Can be used to enable JavaScript enhancements for the component. + - name: chooseFilesButtonText type: string required: false - description: The text of the button that opens the file picker. JavaScript enhanced version of the component only. Default is "Choose file". - - name: instructionText + description: The text of the button that opens the file picker. Default is `"Choose file"`. If `javascript` is not provided, this option will be ignored. + - name: dropInstructionText type: string required: false - description: The text of the instruction text that follows the button that opens the file picker. JavaScript enhanced version of the component only. Default is "or drop file". - - name: filesSelected + description: The text informing users they can drop files. Default is `"or drop file"`. If `javascript` is not provided, this option will be ignored. + - name: multipleFilesChosenText type: object required: false - description: The text to display when multiple files has been chosen by the user. JavaScript enhanced version of the component only. The component will replace the `%{count}` placeholder with the number of files selected. This is a [pluralised list of messages](https://frontend.design-system.service.gov.uk/localise-govuk-frontend). - - name: filesSelectedDefault + description: The text displayed when multiple files have been chosen by the user. The component will replace the `%{count}` placeholder with the number of files selected. [Our pluralisation rules apply to this macro option](https://frontend.design-system.service.gov.uk/localise-govuk-frontend/#understanding-pluralisation-rules). If `javascript` is not provided, this option will be ignored. + - name: noFileChosenText type: string required: false - description: The text to display when no file has been chosen by the user. JavaScript enhanced version of the component only. Default is "No file chosen". + description: The text displayed when no file has been chosen by the user. Default is `"No file chosen"`. If `javascript` is not provided, this option will be ignored. + - name: enteredDropZoneText + type: string + required: false + description: The text announced by assistive technology when user drags files and enters the drop zone. Default is `"Entered drop zone"`. If `javascript` is not provided, this option will be ignored. + - name: leftDropZoneText + type: string + require: false + description: The text announced by assistive technology when user drags files and leaves the drop zone without dropping. Default is `"Left drop zone"`. If `javascript` is not provided, this option will be ignored. - name: classes type: string required: false From b43afbc2e8a415bfc309f7035297b5424021e683 Mon Sep 17 00:00:00 2001 From: Romaric Pascal Date: Tue, 4 Feb 2025 15:57:53 +0000 Subject: [PATCH 2/8] Update 'Choose file' button translation option to match docs --- .../src/views/examples/translated/index.njk | 2 +- .../src/govuk/components/file-upload/file-upload.mjs | 4 ++-- .../src/govuk/components/file-upload/file-upload.yaml | 4 ++-- .../src/govuk/components/file-upload/template.njk | 4 ++-- .../src/govuk/components/file-upload/template.test.js | 2 +- 5 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/govuk-frontend-review/src/views/examples/translated/index.njk b/packages/govuk-frontend-review/src/views/examples/translated/index.njk index 34de661f02..de97062790 100644 --- a/packages/govuk-frontend-review/src/views/examples/translated/index.njk +++ b/packages/govuk-frontend-review/src/views/examples/translated/index.njk @@ -347,7 +347,7 @@ text: "Llwythwch ffeil i fyny" }, javascript: true, - selectFilesButtonText: "Dewiswch ffeil", + chooseFilesButtonText: "Dewiswch ffeil", filesSelectedDefaultText: "Dim ffeiliau wedi'u dewis", filesSelectedText: { other: "%{count} ffeil wedi'u dewis", diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.mjs b/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.mjs index 504d60fd3f..1000f12cb8 100644 --- a/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.mjs +++ b/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.mjs @@ -122,7 +122,7 @@ export class FileUpload extends ConfigurableComponent { const buttonSpan = document.createElement('span') buttonSpan.className = 'govuk-button govuk-button--secondary govuk-file-upload__pseudo-button' - buttonSpan.innerText = this.i18n.t('selectFilesButton') + buttonSpan.innerText = this.i18n.t('chooseFilesButton') containerSpan.appendChild(buttonSpan) @@ -359,7 +359,7 @@ export class FileUpload extends ConfigurableComponent { */ static defaults = Object.freeze({ i18n: { - selectFilesButton: 'Choose file', + chooseFilesButton: 'Choose file', filesSelectedDefault: 'No file chosen', filesSelected: { // the 'one' string isn't used as the component displays the filename diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml b/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml index a8f7d56c98..578747139c 100644 --- a/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml +++ b/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml @@ -222,7 +222,7 @@ examples: text: Llwythwch ffeil i fyny multiple: true javascript: true - selectFilesButtonText: Dewiswch ffeil + chooseFilesButtonText: Dewiswch ffeil instructionText: neu ollwng ffeil filesSelectedDefaultText: Dim ffeiliau wedi'u dewis filesSelectedText: @@ -319,7 +319,7 @@ examples: label: text: Llwythwch ffeil i fyny multiple: true - selectFilesButtonText: Dewiswch ffeil + chooseFilesButtonText: Dewiswch ffeil filesSelectedDefaultText: Dim ffeiliau wedi'u dewis filesSelectedText: other: "%{count} ffeil wedi'u dewis" diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/template.njk b/packages/govuk-frontend/src/govuk/components/file-upload/template.njk index 23ddf5ef5d..57bd570613 100644 --- a/packages/govuk-frontend/src/govuk/components/file-upload/template.njk +++ b/packages/govuk-frontend/src/govuk/components/file-upload/template.njk @@ -50,8 +50,8 @@ class="govuk-file-upload-wrapper" data-module="govuk-file-upload" {{- govukI18nAttributes({ - key: 'select-files-button', - message: params.selectFilesButtonText + key: 'choose-files-button', + message: params.chooseFilesButtonText }) -}} {{- govukI18nAttributes({ key: 'files-selected-default', diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/template.test.js b/packages/govuk-frontend/src/govuk/components/file-upload/template.test.js index 2f97e67d69..f2a9107425 100644 --- a/packages/govuk-frontend/src/govuk/components/file-upload/template.test.js +++ b/packages/govuk-frontend/src/govuk/components/file-upload/template.test.js @@ -245,7 +245,7 @@ describe('File upload', () => { const $wrapper = $('.govuk-form-group > .govuk-file-upload-wrapper') - expect($wrapper.attr('data-i18n.select-files-button')).toBe( + expect($wrapper.attr('data-i18n.choose-files-button')).toBe( 'Dewiswch ffeil' ) expect($wrapper.attr('data-i18n.files-selected-default')).toBe( From f09e17bf1e2765a71a0bab28824ae73432259ead Mon Sep 17 00:00:00 2001 From: Romaric Pascal Date: Tue, 4 Feb 2025 17:19:17 +0000 Subject: [PATCH 3/8] Update 'or drop file' translation to match docs --- .../src/govuk/components/file-upload/file-upload.mjs | 6 +++--- .../src/govuk/components/file-upload/file-upload.yaml | 2 +- .../src/govuk/components/file-upload/template.njk | 4 ++-- .../src/govuk/components/file-upload/template.test.js | 3 +++ 4 files changed, 9 insertions(+), 6 deletions(-) diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.mjs b/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.mjs index 1000f12cb8..b9eaf1a20b 100644 --- a/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.mjs +++ b/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.mjs @@ -132,7 +132,7 @@ export class FileUpload extends ConfigurableComponent { const instructionSpan = document.createElement('span') instructionSpan.className = 'govuk-body govuk-file-upload__instruction' - instructionSpan.innerText = this.i18n.t('instruction') + instructionSpan.innerText = this.i18n.t('dropInstruction') containerSpan.appendChild(instructionSpan) @@ -360,6 +360,7 @@ export class FileUpload extends ConfigurableComponent { static defaults = Object.freeze({ i18n: { chooseFilesButton: 'Choose file', + dropInstruction: 'or drop file', filesSelectedDefault: 'No file chosen', filesSelected: { // the 'one' string isn't used as the component displays the filename @@ -368,8 +369,7 @@ export class FileUpload extends ConfigurableComponent { other: '%{count} files chosen' }, dropZoneEntered: 'Entered drop zone', - dropZoneLeft: 'Left drop zone', - instruction: 'or drop file' + dropZoneLeft: 'Left drop zone' } }) diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml b/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml index 578747139c..f00891782e 100644 --- a/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml +++ b/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml @@ -223,7 +223,7 @@ examples: multiple: true javascript: true chooseFilesButtonText: Dewiswch ffeil - instructionText: neu ollwng ffeil + dropInstructionText: neu ollwng ffeil filesSelectedDefaultText: Dim ffeiliau wedi'u dewis filesSelectedText: other: "%{count} ffeil wedi'u dewis" diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/template.njk b/packages/govuk-frontend/src/govuk/components/file-upload/template.njk index 57bd570613..e353fb1e27 100644 --- a/packages/govuk-frontend/src/govuk/components/file-upload/template.njk +++ b/packages/govuk-frontend/src/govuk/components/file-upload/template.njk @@ -62,8 +62,8 @@ messages: params.filesSelectedText }) -}} {{- govukI18nAttributes({ - key: 'instruction', - message: params.instructionText + key: 'drop-instruction', + message: params.dropInstructionText }) -}} > {% endif %} diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/template.test.js b/packages/govuk-frontend/src/govuk/components/file-upload/template.test.js index f2a9107425..b18c98741e 100644 --- a/packages/govuk-frontend/src/govuk/components/file-upload/template.test.js +++ b/packages/govuk-frontend/src/govuk/components/file-upload/template.test.js @@ -248,6 +248,9 @@ describe('File upload', () => { expect($wrapper.attr('data-i18n.choose-files-button')).toBe( 'Dewiswch ffeil' ) + expect($wrapper.attr('data-i18n.drop-instruction')).toBe( + 'neu ollwng ffeil' + ) expect($wrapper.attr('data-i18n.files-selected-default')).toBe( "Dim ffeiliau wedi'u dewis" ) From 552f030370420459f449717b730afdf0e16c8265 Mon Sep 17 00:00:00 2001 From: Romaric Pascal Date: Tue, 4 Feb 2025 17:27:49 +0000 Subject: [PATCH 4/8] Update 'No file chosen' translation to match docs --- .../src/views/examples/translated/index.njk | 2 +- .../src/govuk/components/file-upload/file-upload.mjs | 6 +++--- .../components/file-upload/file-upload.puppeteer.test.js | 4 ++-- .../src/govuk/components/file-upload/file-upload.yaml | 4 ++-- .../src/govuk/components/file-upload/template.njk | 4 ++-- .../src/govuk/components/file-upload/template.test.js | 4 ++-- 6 files changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/govuk-frontend-review/src/views/examples/translated/index.njk b/packages/govuk-frontend-review/src/views/examples/translated/index.njk index de97062790..617178692e 100644 --- a/packages/govuk-frontend-review/src/views/examples/translated/index.njk +++ b/packages/govuk-frontend-review/src/views/examples/translated/index.njk @@ -348,7 +348,7 @@ }, javascript: true, chooseFilesButtonText: "Dewiswch ffeil", - filesSelectedDefaultText: "Dim ffeiliau wedi'u dewis", + noFileChosenText: "Dim ffeiliau wedi'u dewis", filesSelectedText: { other: "%{count} ffeil wedi'u dewis", one: "%{count} ffeil wedi'i dewis" diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.mjs b/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.mjs index b9eaf1a20b..2d285b1e91 100644 --- a/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.mjs +++ b/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.mjs @@ -105,7 +105,7 @@ export class FileUpload extends ConfigurableComponent { // Create status element that shows what/how many files are selected const $status = document.createElement('span') $status.className = 'govuk-body govuk-file-upload__status' - $status.innerText = this.i18n.t('filesSelectedDefault') + $status.innerText = this.i18n.t('noFileChosen') $button.appendChild($status) @@ -264,7 +264,7 @@ export class FileUpload extends ConfigurableComponent { if (fileCount === 0) { // If there are no files, show the default selection text - this.$status.innerText = this.i18n.t('filesSelectedDefault') + this.$status.innerText = this.i18n.t('noFileChosen') this.$button.classList.add('govuk-file-upload__button--empty') } else { if ( @@ -361,7 +361,7 @@ export class FileUpload extends ConfigurableComponent { i18n: { chooseFilesButton: 'Choose file', dropInstruction: 'or drop file', - filesSelectedDefault: 'No file chosen', + noFileChosen: 'No file chosen', filesSelected: { // the 'one' string isn't used as the component displays the filename // instead, however it's here for coverage's sake diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.puppeteer.test.js b/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.puppeteer.test.js index 704f69c221..5b7e3d4860 100644 --- a/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.puppeteer.test.js +++ b/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.puppeteer.test.js @@ -415,7 +415,7 @@ describe('/components/file-upload', () => { ) expect(buttonElementText).toBe('Dewiswch ffeil') - expect(statusElementText).toBe("Dim ffeiliau wedi'u dewis") + expect(statusElementText).toBe("Dim ffeil wedi'i dewis") }) describe('status element', () => { @@ -424,7 +424,7 @@ describe('/components/file-upload', () => { el.innerHTML.trim() ) - expect(statusText).toBe("Dim ffeiliau wedi'u dewis") + expect(statusText).toBe("Dim ffeil wedi'i dewis") }) it('uses the correct translation when multiple files are selected', async () => { diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml b/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml index f00891782e..1518a4a29d 100644 --- a/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml +++ b/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml @@ -224,7 +224,7 @@ examples: javascript: true chooseFilesButtonText: Dewiswch ffeil dropInstructionText: neu ollwng ffeil - filesSelectedDefaultText: Dim ffeiliau wedi'u dewis + noFileChosenText: Dim ffeil wedi'i dewis filesSelectedText: other: "%{count} ffeil wedi'u dewis" one: "%{count} ffeil wedi'i dewis" @@ -320,7 +320,7 @@ examples: text: Llwythwch ffeil i fyny multiple: true chooseFilesButtonText: Dewiswch ffeil - filesSelectedDefaultText: Dim ffeiliau wedi'u dewis + noFileChosenText: Dim ffeiliau wedi'u dewis filesSelectedText: other: "%{count} ffeil wedi'u dewis" one: "%{count} ffeil wedi'i dewis" diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/template.njk b/packages/govuk-frontend/src/govuk/components/file-upload/template.njk index e353fb1e27..4bf653209c 100644 --- a/packages/govuk-frontend/src/govuk/components/file-upload/template.njk +++ b/packages/govuk-frontend/src/govuk/components/file-upload/template.njk @@ -54,8 +54,8 @@ message: params.chooseFilesButtonText }) -}} {{- govukI18nAttributes({ - key: 'files-selected-default', - message: params.filesSelectedDefaultText + key: 'no-file-chosen', + message: params.noFileChosenText }) -}} {{- govukI18nAttributes({ key: 'files-selected', diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/template.test.js b/packages/govuk-frontend/src/govuk/components/file-upload/template.test.js index b18c98741e..15cf85e21c 100644 --- a/packages/govuk-frontend/src/govuk/components/file-upload/template.test.js +++ b/packages/govuk-frontend/src/govuk/components/file-upload/template.test.js @@ -251,8 +251,8 @@ describe('File upload', () => { expect($wrapper.attr('data-i18n.drop-instruction')).toBe( 'neu ollwng ffeil' ) - expect($wrapper.attr('data-i18n.files-selected-default')).toBe( - "Dim ffeiliau wedi'u dewis" + expect($wrapper.attr('data-i18n.no-file-chosen')).toBe( + "Dim ffeil wedi'i dewis" ) expect($wrapper.attr('data-i18n.files-selected.one')).toBe( "%{count} ffeil wedi'i dewis" From 07f8d9ac2cfdaf1a05697bd00b5cfea5926fd0c5 Mon Sep 17 00:00:00 2001 From: Romaric Pascal Date: Tue, 4 Feb 2025 17:30:14 +0000 Subject: [PATCH 5/8] Update translations for multiple files selected to match docs --- .../src/views/examples/translated/index.njk | 2 +- .../src/govuk/components/file-upload/file-upload.mjs | 6 +++--- .../src/govuk/components/file-upload/file-upload.yaml | 4 ++-- .../src/govuk/components/file-upload/template.njk | 4 ++-- .../src/govuk/components/file-upload/template.test.js | 4 ++-- 5 files changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/govuk-frontend-review/src/views/examples/translated/index.njk b/packages/govuk-frontend-review/src/views/examples/translated/index.njk index 617178692e..6e7e663b8c 100644 --- a/packages/govuk-frontend-review/src/views/examples/translated/index.njk +++ b/packages/govuk-frontend-review/src/views/examples/translated/index.njk @@ -349,7 +349,7 @@ javascript: true, chooseFilesButtonText: "Dewiswch ffeil", noFileChosenText: "Dim ffeiliau wedi'u dewis", - filesSelectedText: { + multipleFilesChosenText: { other: "%{count} ffeil wedi'u dewis", one: "%{count} ffeil wedi'i dewis" } diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.mjs b/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.mjs index 2d285b1e91..567c868c83 100644 --- a/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.mjs +++ b/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.mjs @@ -274,7 +274,7 @@ export class FileUpload extends ConfigurableComponent { this.$status.innerText = this.$input.files[0].name } else { // Otherwise, tell the user how many files are selected - this.$status.innerText = this.i18n.t('filesSelected', { + this.$status.innerText = this.i18n.t('multipleFilesChosen', { count: fileCount }) } @@ -362,7 +362,7 @@ export class FileUpload extends ConfigurableComponent { chooseFilesButton: 'Choose file', dropInstruction: 'or drop file', noFileChosen: 'No file chosen', - filesSelected: { + multipleFilesChosen: { // the 'one' string isn't used as the component displays the filename // instead, however it's here for coverage's sake one: '%{count} file chosen', @@ -425,7 +425,7 @@ function isContainingFiles(dataTransfer) { * * Messages used by the component * @property {string} [selectFiles] - Text of button that opens file browser - * @property {TranslationPluralForms} [filesSelected] - Text indicating how + * @property {TranslationPluralForms} [multipleFilesChosen] - Text indicating how * many files have been selected * @property {string} [dropZoneEntered] - Text announced to assistive technology * when users entered the drop zone while dragging diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml b/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml index 1518a4a29d..1bb303d536 100644 --- a/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml +++ b/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml @@ -225,7 +225,7 @@ examples: chooseFilesButtonText: Dewiswch ffeil dropInstructionText: neu ollwng ffeil noFileChosenText: Dim ffeil wedi'i dewis - filesSelectedText: + multipleFilesChosenText: other: "%{count} ffeil wedi'u dewis" one: "%{count} ffeil wedi'i dewis" @@ -321,6 +321,6 @@ examples: multiple: true chooseFilesButtonText: Dewiswch ffeil noFileChosenText: Dim ffeiliau wedi'u dewis - filesSelectedText: + multipleFilesChosenText: other: "%{count} ffeil wedi'u dewis" one: "%{count} ffeil wedi'i dewis" diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/template.njk b/packages/govuk-frontend/src/govuk/components/file-upload/template.njk index 4bf653209c..2537006051 100644 --- a/packages/govuk-frontend/src/govuk/components/file-upload/template.njk +++ b/packages/govuk-frontend/src/govuk/components/file-upload/template.njk @@ -58,8 +58,8 @@ message: params.noFileChosenText }) -}} {{- govukI18nAttributes({ - key: 'files-selected', - messages: params.filesSelectedText + key: 'multiple-files-chosen', + messages: params.multipleFilesChosenText }) -}} {{- govukI18nAttributes({ key: 'drop-instruction', diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/template.test.js b/packages/govuk-frontend/src/govuk/components/file-upload/template.test.js index 15cf85e21c..1a94e6e03d 100644 --- a/packages/govuk-frontend/src/govuk/components/file-upload/template.test.js +++ b/packages/govuk-frontend/src/govuk/components/file-upload/template.test.js @@ -254,10 +254,10 @@ describe('File upload', () => { expect($wrapper.attr('data-i18n.no-file-chosen')).toBe( "Dim ffeil wedi'i dewis" ) - expect($wrapper.attr('data-i18n.files-selected.one')).toBe( + expect($wrapper.attr('data-i18n.multiple-files-chosen.one')).toBe( "%{count} ffeil wedi'i dewis" ) - expect($wrapper.attr('data-i18n.files-selected.other')).toBe( + expect($wrapper.attr('data-i18n.multiple-files-chosen.other')).toBe( "%{count} ffeil wedi'u dewis" ) }) From 80e50466fd27bb9618b0169d03e8cfb1eff33fdf Mon Sep 17 00:00:00 2001 From: Romaric Pascal Date: Tue, 4 Feb 2025 17:33:32 +0000 Subject: [PATCH 6/8] Add back missing `enteredDropZoneText` option to the template Looks like it was dropped at some point, possibly during a rebase --- .../src/govuk/components/file-upload/file-upload.mjs | 6 +++--- .../src/govuk/components/file-upload/file-upload.yaml | 2 ++ .../src/govuk/components/file-upload/template.njk | 4 ++++ .../src/govuk/components/file-upload/template.test.js | 3 +++ 4 files changed, 12 insertions(+), 3 deletions(-) diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.mjs b/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.mjs index 567c868c83..68428d8e5e 100644 --- a/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.mjs +++ b/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.mjs @@ -231,7 +231,7 @@ export class FileUpload extends ConfigurableComponent { ) { this.$button.classList.add('govuk-file-upload__button--dragging') this.$input.classList.add('govuk-file-upload--dragging') - this.$announcements.innerText = this.i18n.t('dropZoneEntered') + this.$announcements.innerText = this.i18n.t('enteredDropZone') } } } else { @@ -368,7 +368,7 @@ export class FileUpload extends ConfigurableComponent { one: '%{count} file chosen', other: '%{count} files chosen' }, - dropZoneEntered: 'Entered drop zone', + enteredDropZone: 'Entered drop zone', dropZoneLeft: 'Left drop zone' } }) @@ -427,7 +427,7 @@ function isContainingFiles(dataTransfer) { * @property {string} [selectFiles] - Text of button that opens file browser * @property {TranslationPluralForms} [multipleFilesChosen] - Text indicating how * many files have been selected - * @property {string} [dropZoneEntered] - Text announced to assistive technology + * @property {string} [enteredDropZone] - Text announced to assistive technology * when users entered the drop zone while dragging * @property {string} [dropZoneLeft] - Text announced to assistive technology * when users left the drop zone while dragging diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml b/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml index 1bb303d536..239b4e06ab 100644 --- a/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml +++ b/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml @@ -228,6 +228,7 @@ examples: multipleFilesChosenText: other: "%{count} ffeil wedi'u dewis" one: "%{count} ffeil wedi'i dewis" + enteredDropZoneText: Wedi mynd i mewn i'r parth gollwng # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures - name: with value @@ -324,3 +325,4 @@ examples: multipleFilesChosenText: other: "%{count} ffeil wedi'u dewis" one: "%{count} ffeil wedi'i dewis" + enteredDropZoneText: Wedi mynd i mewn i'r parth gollwng diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/template.njk b/packages/govuk-frontend/src/govuk/components/file-upload/template.njk index 2537006051..03c280eafb 100644 --- a/packages/govuk-frontend/src/govuk/components/file-upload/template.njk +++ b/packages/govuk-frontend/src/govuk/components/file-upload/template.njk @@ -65,6 +65,10 @@ key: 'drop-instruction', message: params.dropInstructionText }) -}} + {{- govukI18nAttributes({ + key: 'entered-drop-zone', + message: params.enteredDropZoneText + }) -}} > {% endif %} { expect($wrapper.attr('data-i18n.multiple-files-chosen.other')).toBe( "%{count} ffeil wedi'u dewis" ) + expect($wrapper.attr('data-i18n.entered-drop-zone')).toBe( + "Wedi mynd i mewn i'r parth gollwng" + ) }) it('prevents the rendering of translation messages when false', () => { From 1db2c10853aadd769dc4bacaa3ba16a39b347287 Mon Sep 17 00:00:00 2001 From: Romaric Pascal Date: Tue, 4 Feb 2025 17:35:36 +0000 Subject: [PATCH 7/8] Add back missing `leftDropZoneText` option to the template Looks like it was dropped at some point, possibly during a rebase --- .../src/govuk/components/file-upload/file-upload.mjs | 6 +++--- .../src/govuk/components/file-upload/file-upload.yaml | 4 +++- .../src/govuk/components/file-upload/template.njk | 4 ++++ .../src/govuk/components/file-upload/template.test.js | 3 +++ 4 files changed, 13 insertions(+), 4 deletions(-) diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.mjs b/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.mjs index 68428d8e5e..d171eae537 100644 --- a/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.mjs +++ b/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.mjs @@ -253,7 +253,7 @@ export class FileUpload extends ConfigurableComponent { hideDropZone() { this.$button.classList.remove('govuk-file-upload__button--dragging') this.$input.classList.remove('govuk-file-upload--dragging') - this.$announcements.innerText = this.i18n.t('dropZoneLeft') + this.$announcements.innerText = this.i18n.t('leftDropZone') } /** @@ -369,7 +369,7 @@ export class FileUpload extends ConfigurableComponent { other: '%{count} files chosen' }, enteredDropZone: 'Entered drop zone', - dropZoneLeft: 'Left drop zone' + leftDropZone: 'Left drop zone' } }) @@ -429,7 +429,7 @@ function isContainingFiles(dataTransfer) { * many files have been selected * @property {string} [enteredDropZone] - Text announced to assistive technology * when users entered the drop zone while dragging - * @property {string} [dropZoneLeft] - Text announced to assistive technology + * @property {string} [leftDropZone] - Text announced to assistive technology * when users left the drop zone while dragging */ diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml b/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml index 239b4e06ab..2dc9ce33b8 100644 --- a/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml +++ b/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml @@ -103,7 +103,7 @@ params: description: The text announced by assistive technology when user drags files and enters the drop zone. Default is `"Entered drop zone"`. If `javascript` is not provided, this option will be ignored. - name: leftDropZoneText type: string - require: false + required: false description: The text announced by assistive technology when user drags files and leaves the drop zone without dropping. Default is `"Left drop zone"`. If `javascript` is not provided, this option will be ignored. - name: classes type: string @@ -229,6 +229,7 @@ examples: other: "%{count} ffeil wedi'u dewis" one: "%{count} ffeil wedi'i dewis" enteredDropZoneText: Wedi mynd i mewn i'r parth gollwng + leftDropZoneText: Parth gollwng i'r chwith # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures - name: with value @@ -326,3 +327,4 @@ examples: other: "%{count} ffeil wedi'u dewis" one: "%{count} ffeil wedi'i dewis" enteredDropZoneText: Wedi mynd i mewn i'r parth gollwng + leftDropZoneText: Parth gollwng i'r chwith diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/template.njk b/packages/govuk-frontend/src/govuk/components/file-upload/template.njk index 03c280eafb..7c5baf16f1 100644 --- a/packages/govuk-frontend/src/govuk/components/file-upload/template.njk +++ b/packages/govuk-frontend/src/govuk/components/file-upload/template.njk @@ -69,6 +69,10 @@ key: 'entered-drop-zone', message: params.enteredDropZoneText }) -}} + {{- govukI18nAttributes({ + key: 'left-drop-zone', + message: params.leftDropZoneText + }) -}} > {% endif %} { expect($wrapper.attr('data-i18n.entered-drop-zone')).toBe( "Wedi mynd i mewn i'r parth gollwng" ) + expect($wrapper.attr('data-i18n.left-drop-zone')).toBe( + "Parth gollwng i'r chwith" + ) }) it('prevents the rendering of translation messages when false', () => { From 64ce29967d8dc2f6a24a142223af57d45fe042be Mon Sep 17 00:00:00 2001 From: Romaric Pascal Date: Tue, 4 Feb 2025 17:40:07 +0000 Subject: [PATCH 8/8] Align `FileUploadTranslations` type descriptions with macro options --- .../govuk/components/file-upload/file-upload.mjs | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.mjs b/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.mjs index d171eae537..4dfef4f1cd 100644 --- a/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.mjs +++ b/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.mjs @@ -424,13 +424,15 @@ function isContainingFiles(dataTransfer) { * @typedef {object} FileUploadTranslations * * Messages used by the component - * @property {string} [selectFiles] - Text of button that opens file browser - * @property {TranslationPluralForms} [multipleFilesChosen] - Text indicating how - * many files have been selected - * @property {string} [enteredDropZone] - Text announced to assistive technology - * when users entered the drop zone while dragging - * @property {string} [leftDropZone] - Text announced to assistive technology - * when users left the drop zone while dragging + * @property {string} [chooseFile] - The text of the button that opens the file picker + * @property {string} [dropInstruction] - The text informing users they can drop files + * @property {TranslationPluralForms} [multipleFilesChosen] - The text displayed when multiple files + * have been chosen by the user + * @property {string} [noFileChosen] - The text to displayed when no file has been chosen by the user + * @property {string} [enteredDropZone] - The text announced by assistive technology + * when user drags files and enters the drop zone + * @property {string} [leftDropZone] - The text announced by assistive technology + * when user drags files and leaves the drop zone without dropping */ /**