-
Notifications
You must be signed in to change notification settings - Fork 336
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Copy aria-describedby
attribute on <button>
#5646
Merged
romaricpascal
merged 1 commit into
spike-enhanced-file-upload
from
enhance-file-upload-copy-aria-describedby
Jan 27, 2025
Merged
Copy aria-describedby
attribute on <button>
#5646
romaricpascal
merged 1 commit into
spike-enhanced-file-upload
from
enhance-file-upload-copy-aria-describedby
Jan 27, 2025
Conversation
This file contains 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
1 task
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-5646
January 23, 2025 16:20
Inactive
romaricpascal
force-pushed
the
enhance-file-upload-copy-aria-describedby
branch
from
January 23, 2025 16:21
85ca974
to
28ebe59
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-5646
January 23, 2025 16:22
Inactive
📋 StatsFile sizes
Modules
View stats and visualisations on the review app Action run for 9cd1689 |
JavaScript changes to npm packagediff --git a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js
index 374ce22cc..4b409f096 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js
@@ -759,10 +759,12 @@ class FileUpload extends ConfigurableComponent {
n.className = "govuk-file-upload-wrapper";
const i = document.createElement("button");
i.classList.add("govuk-file-upload__button"), i.type = "button", i.id = this.id;
- const s = document.createElement("span");
- s.className = "govuk-button govuk-button--secondary govuk-file-upload__pseudo-button", s.innerText = this.i18n.t("selectFilesButton"), s.setAttribute("aria-hidden", "true"), i.appendChild(s), i.addEventListener("click", this.onClick.bind(this));
+ const s = this.$root.getAttribute("aria-describedby");
+ s && i.setAttribute("aria-describedby", s);
const o = document.createElement("span");
- o.className = "govuk-body govuk-file-upload__status", o.innerText = this.i18n.t("filesSelectedDefault"), o.setAttribute("aria-hidden", "true"), i.appendChild(o), i.setAttribute("aria-label", `${this.$label.innerText}, ${this.i18n.t("selectFilesButton")}, ${this.i18n.t("filesSelectedDefault")}`), n.insertAdjacentElement("beforeend", i), this.$root.insertAdjacentElement("afterend", n), this.$root.setAttribute("tabindex", "-1"), this.$root.setAttribute("aria-hidden", "true"), n.insertAdjacentElement("afterbegin", this.$root), this.$wrapper = n, this.$button = i, this.$status = o, this.$root.addEventListener("change", this.onChange.bind(this)), this.updateDisabledState(), this.observeDisabledState(), this.$root.addEventListener("change", this.onChange.bind(this)), this.$announcements = document.createElement("span"), this.$announcements.classList.add("govuk-file-upload-announcements"), this.$announcements.classList.add("govuk-visually-hidden"), this.$announcements.setAttribute("aria-live", "assertive"), this.$wrapper.insertAdjacentElement("afterend", this.$announcements), this.$wrapper.addEventListener("drop", this.hideDropZone.bind(this)), document.addEventListener("dragenter", this.updateDropzoneVisibility.bind(this)), document.addEventListener("dragenter", (() => {
+ o.className = "govuk-button govuk-button--secondary govuk-file-upload__pseudo-button", o.innerText = this.i18n.t("selectFilesButton"), o.setAttribute("aria-hidden", "true"), i.appendChild(o), i.addEventListener("click", this.onClick.bind(this));
+ const r = document.createElement("span");
+ r.className = "govuk-body govuk-file-upload__status", r.innerText = this.i18n.t("filesSelectedDefault"), r.setAttribute("aria-hidden", "true"), i.appendChild(r), i.setAttribute("aria-label", `${this.$label.innerText}, ${this.i18n.t("selectFilesButton")}, ${this.i18n.t("filesSelectedDefault")}`), n.insertAdjacentElement("beforeend", i), this.$root.insertAdjacentElement("afterend", n), this.$root.setAttribute("tabindex", "-1"), this.$root.setAttribute("aria-hidden", "true"), n.insertAdjacentElement("afterbegin", this.$root), this.$wrapper = n, this.$button = i, this.$status = r, this.$root.addEventListener("change", this.onChange.bind(this)), this.updateDisabledState(), this.observeDisabledState(), this.$root.addEventListener("change", this.onChange.bind(this)), this.$announcements = document.createElement("span"), this.$announcements.classList.add("govuk-file-upload-announcements"), this.$announcements.classList.add("govuk-visually-hidden"), this.$announcements.setAttribute("aria-live", "assertive"), this.$wrapper.insertAdjacentElement("afterend", this.$announcements), this.$wrapper.addEventListener("drop", this.hideDropZone.bind(this)), document.addEventListener("dragenter", this.updateDropzoneVisibility.bind(this)), document.addEventListener("dragenter", (() => {
this.enteredAnotherElement = !0
})), document.addEventListener("dragleave", (() => {
this.enteredAnotherElement || this.hideDropZone(), this.enteredAnotherElement = !1
Action run for 9cd1689 |
Other changes to npm packagediff --git a/packages/govuk-frontend/dist/govuk/all.bundle.js b/packages/govuk-frontend/dist/govuk/all.bundle.js
index a6d922cdd..68d48e9ac 100644
--- a/packages/govuk-frontend/dist/govuk/all.bundle.js
+++ b/packages/govuk-frontend/dist/govuk/all.bundle.js
@@ -1690,6 +1690,10 @@
$button.classList.add('govuk-file-upload__button');
$button.type = 'button';
$button.id = this.id;
+ const ariaDescribedBy = this.$root.getAttribute('aria-describedby');
+ if (ariaDescribedBy) {
+ $button.setAttribute('aria-describedby', ariaDescribedBy);
+ }
const buttonSpan = document.createElement('span');
buttonSpan.className = 'govuk-button govuk-button--secondary govuk-file-upload__pseudo-button';
buttonSpan.innerText = this.i18n.t('selectFilesButton');
diff --git a/packages/govuk-frontend/dist/govuk/all.bundle.mjs b/packages/govuk-frontend/dist/govuk/all.bundle.mjs
index 62c861a22..e32972b10 100644
--- a/packages/govuk-frontend/dist/govuk/all.bundle.mjs
+++ b/packages/govuk-frontend/dist/govuk/all.bundle.mjs
@@ -1684,6 +1684,10 @@ class FileUpload extends ConfigurableComponent {
$button.classList.add('govuk-file-upload__button');
$button.type = 'button';
$button.id = this.id;
+ const ariaDescribedBy = this.$root.getAttribute('aria-describedby');
+ if (ariaDescribedBy) {
+ $button.setAttribute('aria-describedby', ariaDescribedBy);
+ }
const buttonSpan = document.createElement('span');
buttonSpan.className = 'govuk-button govuk-button--secondary govuk-file-upload__pseudo-button';
buttonSpan.innerText = this.i18n.t('selectFilesButton');
diff --git a/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.bundle.js b/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.bundle.js
index 905b3c3e4..312098ada 100644
--- a/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.bundle.js
+++ b/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.bundle.js
@@ -517,6 +517,10 @@
$button.classList.add('govuk-file-upload__button');
$button.type = 'button';
$button.id = this.id;
+ const ariaDescribedBy = this.$root.getAttribute('aria-describedby');
+ if (ariaDescribedBy) {
+ $button.setAttribute('aria-describedby', ariaDescribedBy);
+ }
const buttonSpan = document.createElement('span');
buttonSpan.className = 'govuk-button govuk-button--secondary govuk-file-upload__pseudo-button';
buttonSpan.innerText = this.i18n.t('selectFilesButton');
diff --git a/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.bundle.mjs b/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.bundle.mjs
index 72724da01..e759a6c30 100644
--- a/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.bundle.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.bundle.mjs
@@ -511,6 +511,10 @@ class FileUpload extends ConfigurableComponent {
$button.classList.add('govuk-file-upload__button');
$button.type = 'button';
$button.id = this.id;
+ const ariaDescribedBy = this.$root.getAttribute('aria-describedby');
+ if (ariaDescribedBy) {
+ $button.setAttribute('aria-describedby', ariaDescribedBy);
+ }
const buttonSpan = document.createElement('span');
buttonSpan.className = 'govuk-button govuk-button--secondary govuk-file-upload__pseudo-button';
buttonSpan.innerText = this.i18n.t('selectFilesButton');
diff --git a/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.mjs b/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.mjs
index 3eeaf0c49..acccac3da 100644
--- a/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.mjs
@@ -40,6 +40,10 @@ class FileUpload extends ConfigurableComponent {
$button.classList.add('govuk-file-upload__button');
$button.type = 'button';
$button.id = this.id;
+ const ariaDescribedBy = this.$root.getAttribute('aria-describedby');
+ if (ariaDescribedBy) {
+ $button.setAttribute('aria-describedby', ariaDescribedBy);
+ }
const buttonSpan = document.createElement('span');
buttonSpan.className = 'govuk-button govuk-button--secondary govuk-file-upload__pseudo-button';
buttonSpan.innerText = this.i18n.t('selectFilesButton');
Action run for 9cd1689 |
This ensure hints and errors are associated with the `<button>` for assistive technology users.
romaricpascal
force-pushed
the
enhance-file-upload-copy-aria-describedby
branch
from
January 23, 2025 16:26
28ebe59
to
9cd1689
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-5646
January 23, 2025 16:26
Inactive
patrickpatrickpatrick
approved these changes
Jan 27, 2025
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good to me!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
This ensure hints and errors are associated with the
<button>
for assistive technology users.For example, VoiceOver announcing the hint ("Your photo must be at least 50KB and no more than 10MB") visible before the file upload in this recording.
Screen.Recording.2025-01-23.at.16.32.55.mov