Skip to content
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

Conversation

romaricpascal
Copy link
Member

@romaricpascal romaricpascal commented Jan 23, 2025

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

@romaricpascal romaricpascal linked an issue Jan 23, 2025 that may be closed by this pull request
1 task
@romaricpascal romaricpascal force-pushed the enhance-file-upload-copy-aria-describedby branch from 85ca974 to 28ebe59 Compare January 23, 2025 16:21
Copy link

github-actions bot commented Jan 23, 2025

📋 Stats

File sizes

File Size
dist/govuk-frontend-development.min.css 120.03 KiB
dist/govuk-frontend-development.min.js 47.01 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js 100.92 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs 94.8 KiB
packages/govuk-frontend/dist/govuk/all.mjs 1.32 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs 1.74 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css 120.02 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js 47 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs 5.55 KiB
packages/govuk-frontend/dist/govuk/init.mjs 7.5 KiB

Modules

File Size (bundled) Size (minified)
all.mjs 88.93 KiB 44.54 KiB
accordion.mjs 26.58 KiB 13.41 KiB
button.mjs 9.09 KiB 3.78 KiB
character-count.mjs 25.39 KiB 10.9 KiB
checkboxes.mjs 7.81 KiB 3.42 KiB
error-summary.mjs 10.99 KiB 4.54 KiB
exit-this-page.mjs 20.2 KiB 10.34 KiB
file-upload.mjs 19.5 KiB 10.13 KiB
header.mjs 6.46 KiB 3.22 KiB
notification-banner.mjs 9.35 KiB 3.7 KiB
password-input.mjs 18.24 KiB 8.33 KiB
radios.mjs 6.81 KiB 2.98 KiB
service-navigation.mjs 6.44 KiB 3.26 KiB
skip-link.mjs 6.4 KiB 2.76 KiB
tabs.mjs 12.04 KiB 6.67 KiB

View stats and visualisations on the review app


Action run for 9cd1689

Copy link

github-actions bot commented Jan 23, 2025

JavaScript changes to npm package

diff --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

Copy link

github-actions bot commented Jan 23, 2025

Other changes to npm package

diff --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 romaricpascal force-pushed the enhance-file-upload-copy-aria-describedby branch from 28ebe59 to 9cd1689 Compare January 23, 2025 16:26
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-pr-5646 January 23, 2025 16:26 Inactive
Copy link
Contributor

@patrickpatrickpatrick patrickpatrickpatrick left a 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!

@romaricpascal romaricpascal merged commit 69c7891 into spike-enhanced-file-upload Jan 27, 2025
49 checks passed
@romaricpascal romaricpascal deleted the enhance-file-upload-copy-aria-describedby branch January 27, 2025 13:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Implement copy of attributes from <input> to the <button>
3 participants