Fix VoiceOver access to hidden Service Navigation menu button
#6342
+161
−9
Conversation
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
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-6342
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 c88509283..875ede4ab 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js
@@ -997,10 +997,10 @@ class ServiceNavigation extends Component {
super(t), this.$menuButton = void 0, this.$menu = void 0, this.menuIsOpen = !1, this.mql = null;
const e = this.$root.querySelector(".govuk-js-service-navigation-toggle");
if (!e) return this;
- const i = e.getAttribute("aria-controls");
+ const i = e.getAttribute("data-aria-controls");
if (!i) throw new ElementError({
component: ServiceNavigation,
- identifier: 'Navigation button (`<button class="govuk-js-service-navigation-toggle">`) attribute (`aria-controls`)'
+ identifier: 'Navigation button (`<button class="govuk-js-service-navigation-toggle">`) attribute (`data-aria-controls`)'
});
const n = document.getElementById(i);
if (!n) throw new ElementError({
@@ -1008,7 +1008,7 @@ class ServiceNavigation extends Component {
element: n,
identifier: `Navigation (\`<ul id="${i}">\`)`
});
- this.$menu = n, this.$menuButton = e, this.setupResponsiveChecks(), this.$menuButton.addEventListener("click", (() => this.handleMenuButtonClick()))
+ this.$menu = n, this.$menuButton = e, this.$menuButton.setAttribute("aria-controls", this.$menu.id), this.setupResponsiveChecks(), this.$menuButton.addEventListener("click", (() => this.handleMenuButtonClick()))
}
setupResponsiveChecks() {
const t = getBreakpoint("tablet");
@@ -1019,13 +1019,22 @@ class ServiceNavigation extends Component {
this.mql = window.matchMedia(`(min-width: ${t.value})`), "addEventListener" in this.mql ? this.mql.addEventListener("change", (() => this.checkMode())) : this.mql.addListener((() => this.checkMode())), this.checkMode()
}
checkMode() {
- this.mql && this.$menu && this.$menuButton && (this.mql.matches ? (this.$menu.removeAttribute("hidden"), this.$menuButton.setAttribute("hidden", "")) : (this.$menuButton.removeAttribute("hidden"), this.$menuButton.setAttribute("aria-expanded", this.menuIsOpen.toString()), this.menuIsOpen ? this.$menu.removeAttribute("hidden") : this.$menu.setAttribute("hidden", "")))
+ this.mql && this.$menu && this.$menuButton && (this.mql.matches ? (this.$menu.removeAttribute("hidden"), function(t, e) {
+ for (const i in e) t.setAttribute(i, e[i])
+ }(this.$menuButton, e)) : (! function(t, e) {
+ for (const i of e) t.removeAttribute(i)
+ }(this.$menuButton, Object.keys(e)), this.$menuButton.setAttribute("aria-expanded", this.menuIsOpen.toString()), this.menuIsOpen ? this.$menu.removeAttribute("hidden") : this.$menu.setAttribute("hidden", "")))
}
handleMenuButtonClick() {
this.menuIsOpen = !this.menuIsOpen, this.checkMode()
}
}
ServiceNavigation.moduleName = "govuk-service-navigation";
+const e = {
+ hidden: "",
+ disabled: "",
+ "aria-hidden": "true"
+};
class SkipLink extends Component {
constructor(t) {
var e;
Action run for f2446a2 |
Rendered HTML changes to npm packagediff --git a/packages/govuk-frontend/dist/govuk/components/service-navigation/template-default.html b/packages/govuk-frontend/dist/govuk/components/service-navigation/template-default.html
index faefef37c..311f26cea 100644
--- a/packages/govuk-frontend/dist/govuk/components/service-navigation/template-default.html
+++ b/packages/govuk-frontend/dist/govuk/components/service-navigation/template-default.html
@@ -9,7 +9,7 @@ data-module="govuk-service-navigation"
<nav aria-label="Menu" class="govuk-service-navigation__wrapper">
- <button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" aria-controls="navigation" hidden>
+ <button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" data-aria-controls="navigation" hidden>
Menu
</button>
diff --git a/packages/govuk-frontend/dist/govuk/components/service-navigation/template-inverse.html b/packages/govuk-frontend/dist/govuk/components/service-navigation/template-inverse.html
index 8fb4bdade..6ed4fb168 100644
--- a/packages/govuk-frontend/dist/govuk/components/service-navigation/template-inverse.html
+++ b/packages/govuk-frontend/dist/govuk/components/service-navigation/template-inverse.html
@@ -14,7 +14,7 @@ data-module="govuk-service-navigation"
<nav aria-label="Menu" class="govuk-service-navigation__wrapper">
- <button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" aria-controls="navigation" hidden>
+ <button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" data-aria-controls="navigation" hidden>
Menu
</button>
diff --git a/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-a-single-navigation-item-and-collapsenavigationonmobile-set-to-true.html b/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-a-single-navigation-item-and-collapsenavigationonmobile-set-to-true.html
index 8cf0da7d6..71617c2c4 100644
--- a/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-a-single-navigation-item-and-collapsenavigationonmobile-set-to-true.html
+++ b/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-a-single-navigation-item-and-collapsenavigationonmobile-set-to-true.html
@@ -14,7 +14,7 @@ data-module="govuk-service-navigation"
<nav aria-label="Menu" class="govuk-service-navigation__wrapper">
- <button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" aria-controls="navigation" hidden>
+ <button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" data-aria-controls="navigation" hidden>
Menu
</button>
diff --git a/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-html-navigation-items.html b/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-html-navigation-items.html
index 3e8fe3809..283903b43 100644
--- a/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-html-navigation-items.html
+++ b/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-html-navigation-items.html
@@ -9,7 +9,7 @@ data-module="govuk-service-navigation"
<nav aria-label="Menu" class="govuk-service-navigation__wrapper">
- <button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" aria-controls="navigation" hidden>
+ <button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" data-aria-controls="navigation" hidden>
Menu
</button>
diff --git a/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-large-navigation.html b/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-large-navigation.html
index ad9417df1..dcdf52259 100644
--- a/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-large-navigation.html
+++ b/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-large-navigation.html
@@ -9,7 +9,7 @@ data-module="govuk-service-navigation"
<nav aria-label="Menu" class="govuk-service-navigation__wrapper">
- <button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" aria-controls="navigation" hidden>
+ <button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" data-aria-controls="navigation" hidden>
Menu
</button>
diff --git a/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-navigation-with-a-current-item.html b/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-navigation-with-a-current-item.html
index 68234154f..56bb5a2e7 100644
--- a/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-navigation-with-a-current-item.html
+++ b/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-navigation-with-a-current-item.html
@@ -9,7 +9,7 @@ data-module="govuk-service-navigation"
<nav aria-label="Menu" class="govuk-service-navigation__wrapper">
- <button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" aria-controls="navigation" hidden>
+ <button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" data-aria-controls="navigation" hidden>
Menu
</button>
diff --git a/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-non-link-navigation-items.html b/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-non-link-navigation-items.html
index fe4b49ca7..277731780 100644
--- a/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-non-link-navigation-items.html
+++ b/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-non-link-navigation-items.html
@@ -9,7 +9,7 @@ data-module="govuk-service-navigation"
<nav aria-label="Menu" class="govuk-service-navigation__wrapper">
- <button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" aria-controls="navigation" hidden>
+ <button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" data-aria-controls="navigation" hidden>
Menu
</button>
diff --git a/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-service-name-and-navigation.html b/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-service-name-and-navigation.html
index b344d5451..310448148 100644
--- a/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-service-name-and-navigation.html
+++ b/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-service-name-and-navigation.html
@@ -14,7 +14,7 @@ data-module="govuk-service-navigation"
<nav aria-label="Menu" class="govuk-service-navigation__wrapper">
- <button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" aria-controls="navigation" hidden>
+ <button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" data-aria-controls="navigation" hidden>
Menu
</button>
Action run for f2446a2 |
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 f030cdff5..368b6f82a 100644
--- a/packages/govuk-frontend/dist/govuk/all.bundle.js
+++ b/packages/govuk-frontend/dist/govuk/all.bundle.js
@@ -2213,11 +2213,11 @@
if (!$menuButton) {
return this;
}
- const menuId = $menuButton.getAttribute('aria-controls');
+ const menuId = $menuButton.getAttribute('data-aria-controls');
if (!menuId) {
throw new ElementError({
component: ServiceNavigation,
- identifier: 'Navigation button (`<button class="govuk-js-service-navigation-toggle">`) attribute (`aria-controls`)'
+ identifier: 'Navigation button (`<button class="govuk-js-service-navigation-toggle">`) attribute (`data-aria-controls`)'
});
}
const $menu = document.getElementById(menuId);
@@ -2230,6 +2230,7 @@
}
this.$menu = $menu;
this.$menuButton = $menuButton;
+ this.$menuButton.setAttribute('aria-controls', this.$menu.id);
this.setupResponsiveChecks();
this.$menuButton.addEventListener('click', () => this.handleMenuButtonClick());
}
@@ -2255,9 +2256,9 @@
}
if (this.mql.matches) {
this.$menu.removeAttribute('hidden');
- this.$menuButton.setAttribute('hidden', '');
+ setAttributes(this.$menuButton, attributesForHidingButton);
} else {
- this.$menuButton.removeAttribute('hidden');
+ removeAttributes(this.$menuButton, Object.keys(attributesForHidingButton));
this.$menuButton.setAttribute('aria-expanded', this.menuIsOpen.toString());
if (this.menuIsOpen) {
this.$menu.removeAttribute('hidden');
@@ -2272,6 +2273,35 @@
}
}
ServiceNavigation.moduleName = 'govuk-service-navigation';
+ const attributesForHidingButton = {
+ hidden: '',
+ disabled: '',
+ 'aria-hidden': 'true'
+ };
+
+ /**
+ * Sets a group of attributes on the given element
+ *
+ * @param {Element} $element - The element to set the attribute on
+ * @param {{[attributeName: string]: string}} attributes - The attributes to set
+ */
+ function setAttributes($element, attributes) {
+ for (const attributeName in attributes) {
+ $element.setAttribute(attributeName, attributes[attributeName]);
+ }
+ }
+
+ /**
+ * Removes a list of attributes from the given element
+ *
+ * @param {Element} $element - The element to remove the attributes from
+ * @param {string[]} attributeNames - The names of the attributes to remove
+ */
+ function removeAttributes($element, attributeNames) {
+ for (const attributeName of attributeNames) {
+ $element.removeAttribute(attributeName);
+ }
+ }
/**
* Skip link component
diff --git a/packages/govuk-frontend/dist/govuk/all.bundle.mjs b/packages/govuk-frontend/dist/govuk/all.bundle.mjs
index 82431b278..2f1e22b6a 100644
--- a/packages/govuk-frontend/dist/govuk/all.bundle.mjs
+++ b/packages/govuk-frontend/dist/govuk/all.bundle.mjs
@@ -2207,11 +2207,11 @@ class ServiceNavigation extends Component {
if (!$menuButton) {
return this;
}
- const menuId = $menuButton.getAttribute('aria-controls');
+ const menuId = $menuButton.getAttribute('data-aria-controls');
if (!menuId) {
throw new ElementError({
component: ServiceNavigation,
- identifier: 'Navigation button (`<button class="govuk-js-service-navigation-toggle">`) attribute (`aria-controls`)'
+ identifier: 'Navigation button (`<button class="govuk-js-service-navigation-toggle">`) attribute (`data-aria-controls`)'
});
}
const $menu = document.getElementById(menuId);
@@ -2224,6 +2224,7 @@ class ServiceNavigation extends Component {
}
this.$menu = $menu;
this.$menuButton = $menuButton;
+ this.$menuButton.setAttribute('aria-controls', this.$menu.id);
this.setupResponsiveChecks();
this.$menuButton.addEventListener('click', () => this.handleMenuButtonClick());
}
@@ -2249,9 +2250,9 @@ class ServiceNavigation extends Component {
}
if (this.mql.matches) {
this.$menu.removeAttribute('hidden');
- this.$menuButton.setAttribute('hidden', '');
+ setAttributes(this.$menuButton, attributesForHidingButton);
} else {
- this.$menuButton.removeAttribute('hidden');
+ removeAttributes(this.$menuButton, Object.keys(attributesForHidingButton));
this.$menuButton.setAttribute('aria-expanded', this.menuIsOpen.toString());
if (this.menuIsOpen) {
this.$menu.removeAttribute('hidden');
@@ -2266,6 +2267,35 @@ class ServiceNavigation extends Component {
}
}
ServiceNavigation.moduleName = 'govuk-service-navigation';
+const attributesForHidingButton = {
+ hidden: '',
+ disabled: '',
+ 'aria-hidden': 'true'
+};
+
+/**
+ * Sets a group of attributes on the given element
+ *
+ * @param {Element} $element - The element to set the attribute on
+ * @param {{[attributeName: string]: string}} attributes - The attributes to set
+ */
+function setAttributes($element, attributes) {
+ for (const attributeName in attributes) {
+ $element.setAttribute(attributeName, attributes[attributeName]);
+ }
+}
+
+/**
+ * Removes a list of attributes from the given element
+ *
+ * @param {Element} $element - The element to remove the attributes from
+ * @param {string[]} attributeNames - The names of the attributes to remove
+ */
+function removeAttributes($element, attributeNames) {
+ for (const attributeName of attributeNames) {
+ $element.removeAttribute(attributeName);
+ }
+}
/**
* Skip link component
diff --git a/packages/govuk-frontend/dist/govuk/components/service-navigation/fixtures.json b/packages/govuk-frontend/dist/govuk/components/service-navigation/fixtures.json
index 6d4045d50..158bc6822 100644
--- a/packages/govuk-frontend/dist/govuk/components/service-navigation/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/service-navigation/fixtures.json
@@ -32,7 +32,7 @@
"no-js"
]
},
- "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n <div class=\"govuk-width-container\">\n\n <div class=\"govuk-service-navigation__container\">\n \n\n \n <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" aria-controls=\"navigation\" hidden>\n Menu\n </button>\n\n <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n \n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n \nNavigation item 1\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/2\">\n \nNavigation item 2\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/3\">\n \nNavigation item 3\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/4\">\n \nNavigation item 4\n </a>\n </li>\n\n </ul>\n </nav>\n </div>\n\n </div>\n\n </div>"
+ "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n <div class=\"govuk-width-container\">\n\n <div class=\"govuk-service-navigation__container\">\n \n\n \n <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" data-aria-controls=\"navigation\" hidden>\n Menu\n </button>\n\n <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n \n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n \nNavigation item 1\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/2\">\n \nNavigation item 2\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/3\">\n \nNavigation item 3\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/4\">\n \nNavigation item 4\n </a>\n </li>\n\n </ul>\n </nav>\n </div>\n\n </div>\n\n </div>"
},
{
"name": "with navigation with a current item",
@@ -61,7 +61,7 @@
"description": "The current item indicates that the user is present on that exact page. It looks the same as an active item, but marks this item as the one the user is currently viewing in ARIA.",
"pageTemplateOptions": {},
"screenshot": false,
- "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n <div class=\"govuk-width-container\">\n\n <div class=\"govuk-service-navigation__container\">\n \n\n \n <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" aria-controls=\"navigation\" hidden>\n Menu\n </button>\n\n <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n \n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n \nNavigation item 1\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item govuk-service-navigation__item--active\">\n <a class=\"govuk-service-navigation__link\" href=\"#/2\" aria-current=\"page\">\n \n <strong class=\"govuk-service-navigation__active-fallback\">Navigation item 2</strong>\n\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/3\">\n \nNavigation item 3\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/4\">\n \nNavigation item 4\n </a>\n </li>\n\n </ul>\n </nav>\n </div>\n\n </div>\n\n </div>"
+ "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n <div class=\"govuk-width-container\">\n\n <div class=\"govuk-service-navigation__container\">\n \n\n \n <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" data-aria-controls=\"navigation\" hidden>\n Menu\n </button>\n\n <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n \n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n \nNavigation item 1\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item govuk-service-navigation__item--active\">\n <a class=\"govuk-service-navigation__link\" href=\"#/2\" aria-current=\"page\">\n \n <strong class=\"govuk-service-navigation__active-fallback\">Navigation item 2</strong>\n\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/3\">\n \nNavigation item 3\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/4\">\n \nNavigation item 4\n </a>\n </li>\n\n </ul>\n </nav>\n </div>\n\n </div>\n\n </div>"
},
{
"name": "with large navigation",
@@ -137,7 +137,7 @@
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
- "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n <div class=\"govuk-width-container\">\n\n <div class=\"govuk-service-navigation__container\">\n \n\n \n <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" aria-controls=\"navigation\" hidden>\n Menu\n </button>\n\n <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n \n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/browse/benefits\">\n \nBenefits\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/browse/births-deaths-marriages\">\n \nBirths, deaths, marriages and care\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/browse/business\">\n \nBusiness and self-employed\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/browse/childcare-parenting\">\n \nChildcare and parenting\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/browse/citizenship\">\n \nCitizenship and living in the UK\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/browse/justice\">\n \nCrime, justice and the law\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/browse/disabilities\">\n \nDisabled people\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/browse/driving\">\n \nDriving and transport\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/browse/education\">\n \nEducation and learning\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/browse/employing-people\">\n \nEmploying people\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/browse/environment-countryside\">\n \nEnvironment and countryside\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/browse/housing-local-services\">\n \nHousing and local services\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/browse/tax\">\n \nMoney and tax\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/browse/abroad\">\n \nPassports, travel and living abroad\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/browse/visas-immigration\">\n \nVisas and immigration\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/browse/working\">\n \nWorking, jobs and pensions\n </a>\n </li>\n\n </ul>\n </nav>\n </div>\n\n </div>\n\n </div>"
+ "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n <div class=\"govuk-width-container\">\n\n <div class=\"govuk-service-navigation__container\">\n \n\n \n <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" data-aria-controls=\"navigation\" hidden>\n Menu\n </button>\n\n <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n \n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/browse/benefits\">\n \nBenefits\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/browse/births-deaths-marriages\">\n \nBirths, deaths, marriages and care\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/browse/business\">\n \nBusiness and self-employed\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/browse/childcare-parenting\">\n \nChildcare and parenting\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/browse/citizenship\">\n \nCitizenship and living in the UK\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/browse/justice\">\n \nCrime, justice and the law\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/browse/disabilities\">\n \nDisabled people\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/browse/driving\">\n \nDriving and transport\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/browse/education\">\n \nEducation and learning\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/browse/employing-people\">\n \nEmploying people\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/browse/environment-countryside\">\n \nEnvironment and countryside\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/browse/housing-local-services\">\n \nHousing and local services\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/browse/tax\">\n \nMoney and tax\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/browse/abroad\">\n \nPassports, travel and living abroad\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/browse/visas-immigration\">\n \nVisas and immigration\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/browse/working\">\n \nWorking, jobs and pensions\n </a>\n </li>\n\n </ul>\n </nav>\n </div>\n\n </div>\n\n </div>"
},
{
"name": "with HTML navigation items",
@@ -161,7 +161,7 @@
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
- "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n <div class=\"govuk-width-container\">\n\n <div class=\"govuk-service-navigation__container\">\n \n\n \n <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" aria-controls=\"navigation\" hidden>\n Menu\n </button>\n\n <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n \n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n \n<em>Navigation item 1</em>\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/2\">\n \n<em>Navigation item 2</em>\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/3\">\n \n<em>Navigation item 3</em>\n </a>\n </li>\n\n </ul>\n </nav>\n </div>\n\n </div>\n\n </div>"
+ "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n <div class=\"govuk-width-container\">\n\n <div class=\"govuk-service-navigation__container\">\n \n\n \n <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" data-aria-controls=\"navigation\" hidden>\n Menu\n </button>\n\n <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n \n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n \n<em>Navigation item 1</em>\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/2\">\n \n<em>Navigation item 2</em>\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/3\">\n \n<em>Navigation item 3</em>\n </a>\n </li>\n\n </ul>\n </nav>\n </div>\n\n </div>\n\n </div>"
},
{
"name": "with non-link navigation items",
@@ -182,7 +182,7 @@
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
- "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n <div class=\"govuk-width-container\">\n\n <div class=\"govuk-service-navigation__container\">\n \n\n \n <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" aria-controls=\"navigation\" hidden>\n Menu\n </button>\n\n <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n \n \n <li class=\"govuk-service-navigation__item\">\n <span class=\"govuk-service-navigation__text\">\n \nNavigation item 1\n </span>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <span class=\"govuk-service-navigation__text\">\n \n<em>Navigation item 2</em>\n </span>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <span class=\"govuk-service-navigation__text\">\n \nNavigation item 3\n </span>\n </li>\n\n </ul>\n </nav>\n </div>\n\n </div>\n\n </div>"
+ "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n <div class=\"govuk-width-container\">\n\n <div class=\"govuk-service-navigation__container\">\n \n\n \n <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" data-aria-controls=\"navigation\" hidden>\n Menu\n </button>\n\n <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n \n \n <li class=\"govuk-service-navigation__item\">\n <span class=\"govuk-service-navigation__text\">\n \nNavigation item 1\n </span>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <span class=\"govuk-service-navigation__text\">\n \n<em>Navigation item 2</em>\n </span>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <span class=\"govuk-service-navigation__text\">\n \nNavigation item 3\n </span>\n </li>\n\n </ul>\n </nav>\n </div>\n\n </div>\n\n </div>"
},
{
"name": "with service name",
@@ -248,7 +248,7 @@
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
- "html": "<section aria-label=\"Service information\" class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n <div class=\"govuk-width-container\">\n\n <div class=\"govuk-service-navigation__container\">\n \n <span class=\"govuk-service-navigation__service-name\">\n <a href=\"#/\" class=\"govuk-service-navigation__link\">\n Apply for a juggling license\n </a>\n </span>\n\n \n <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" aria-controls=\"navigation\" hidden>\n Menu\n </button>\n\n <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n \n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n \nNavigation item 1\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item govuk-service-navigation__item--active\">\n <a class=\"govuk-service-navigation__link\" href=\"#/2\" aria-current=\"true\">\n \n <strong class=\"govuk-service-navigation__active-fallback\">Navigation item 2</strong>\n\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/3\">\n \nNavigation item 3\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/4\">\n \nNavigation item 4\n </a>\n </li>\n\n </ul>\n </nav>\n </div>\n\n </div>\n\n </section>"
+ "html": "<section aria-label=\"Service information\" class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n <div class=\"govuk-width-container\">\n\n <div class=\"govuk-service-navigation__container\">\n \n <span class=\"govuk-service-navigation__service-name\">\n <a href=\"#/\" class=\"govuk-service-navigation__link\">\n Apply for a juggling license\n </a>\n </span>\n\n \n <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" data-aria-controls=\"navigation\" hidden>\n Menu\n </button>\n\n <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n \n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n \nNavigation item 1\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item govuk-service-navigation__item--active\">\n <a class=\"govuk-service-navigation__link\" href=\"#/2\" aria-current=\"true\">\n \n <strong class=\"govuk-service-navigation__active-fallback\">Navigation item 2</strong>\n\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/3\">\n \nNavigation item 3\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/4\">\n \nNavigation item 4\n </a>\n </li>\n\n </ul>\n </nav>\n </div>\n\n </div>\n\n </section>"
},
{
"name": "inverse",
@@ -282,7 +282,7 @@
"bodyClasses": "app-template__body--inverse"
},
"screenshot": false,
- "html": "<section aria-label=\"Service information\" class=\"govuk-service-navigation govuk-service-navigation--inverse\"\ndata-module=\"govuk-service-navigation\"\n>\n <div class=\"govuk-width-container\">\n\n <div class=\"govuk-service-navigation__container\">\n \n <span class=\"govuk-service-navigation__service-name\">\n <a href=\"#/\" class=\"govuk-service-navigation__link\">\n Apply for a juggling license\n </a>\n </span>\n\n \n <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" aria-controls=\"navigation\" hidden>\n Menu\n </button>\n\n <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n \n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n \nNavigation item 1\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item govuk-service-navigation__item--active\">\n <a class=\"govuk-service-navigation__link\" href=\"#/2\" aria-current=\"true\">\n \n <strong class=\"govuk-service-navigation__active-fallback\">Navigation item 2</strong>\n\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/3\">\n \nNavigation item 3\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/4\">\n \nNavigation item 4\n </a>\n </li>\n\n </ul>\n </nav>\n </div>\n\n </div>\n\n </section>"
+ "html": "<section aria-label=\"Service information\" class=\"govuk-service-navigation govuk-service-navigation--inverse\"\ndata-module=\"govuk-service-navigation\"\n>\n <div class=\"govuk-width-container\">\n\n <div class=\"govuk-service-navigation__container\">\n \n <span class=\"govuk-service-navigation__service-name\">\n <a href=\"#/\" class=\"govuk-service-navigation__link\">\n Apply for a juggling license\n </a>\n </span>\n\n \n <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" data-aria-controls=\"navigation\" hidden>\n Menu\n </button>\n\n <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n \n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n \nNavigation item 1\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item govuk-service-navigation__item--active\">\n <a class=\"govuk-service-navigation__link\" href=\"#/2\" aria-current=\"true\">\n \n <strong class=\"govuk-service-navigation__active-fallback\">Navigation item 2</strong>\n\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/3\">\n \nNavigation item 3\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/4\">\n \nNavigation item 4\n </a>\n </li>\n\n </ul>\n </nav>\n </div>\n\n </div>\n\n </section>"
},
{
"name": "with collapseNavigationOnMobile set to false",
@@ -351,7 +351,7 @@
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
- "html": "<section aria-label=\"Service information\" class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n <div class=\"govuk-width-container\">\n\n <div class=\"govuk-service-navigation__container\">\n \n <span class=\"govuk-service-navigation__service-name\">\n <a href=\"#/\" class=\"govuk-service-navigation__link\">\n Apply for a juggling license\n </a>\n </span>\n\n \n <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" aria-controls=\"navigation\" hidden>\n Menu\n </button>\n\n <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n \n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n \nLog out\n </a>\n </li>\n\n </ul>\n </nav>\n </div>\n\n </div>\n\n </section>"
+ "html": "<section aria-label=\"Service information\" class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n <div class=\"govuk-width-container\">\n\n <div class=\"govuk-service-navigation__container\">\n \n <span class=\"govuk-service-navigation__service-name\">\n <a href=\"#/\" class=\"govuk-service-navigation__link\">\n Apply for a juggling license\n </a>\n </span>\n\n \n <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" data-aria-controls=\"navigation\" hidden>\n Menu\n </button>\n\n <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n \n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n \nLog out\n </a>\n </li>\n\n </ul>\n </nav>\n </div>\n\n </div>\n\n </section>"
},
{
"name": "with no options set",
@@ -420,7 +420,7 @@
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
- "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n <div class=\"govuk-width-container\">\n\n <div class=\"govuk-service-navigation__container\">\n \n\n \n <nav aria-label=\"Enter the NavZone\" class=\"govuk-service-navigation__wrapper\">\n <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" aria-controls=\"navigation\" hidden>\n Enter the NavZone\n </button>\n\n <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n \n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n \nNavigation item 1\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/2\">\n \nNavigation item 2\n </a>\n </li>\n\n </ul>\n </nav>\n </div>\n\n </div>\n\n </div>"
+ "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n <div class=\"govuk-width-container\">\n\n <div class=\"govuk-service-navigation__container\">\n \n\n \n <nav aria-label=\"Enter the NavZone\" class=\"govuk-service-navigation__wrapper\">\n <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" data-aria-controls=\"navigation\" hidden>\n Enter the NavZone\n </button>\n\n <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n \n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n \nNavigation item 1\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/2\">\n \nNavigation item 2\n </a>\n </li>\n\n </ul>\n </nav>\n </div>\n\n </div>\n\n </div>"
},
{
"name": "with custom navigation toggle label",
@@ -441,7 +441,7 @@
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
- "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n <div class=\"govuk-width-container\">\n\n <div class=\"govuk-service-navigation__container\">\n \n\n \n <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" aria-controls=\"navigation\" aria-label=\"Enter the NavZone\" hidden>\n Menu\n </button>\n\n <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n \n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n \nNavigation item 1\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/2\">\n \nNavigation item 2\n </a>\n </li>\n\n </ul>\n </nav>\n </div>\n\n </div>\n\n </div>"
+ "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n <div class=\"govuk-width-container\">\n\n <div class=\"govuk-service-navigation__container\">\n \n\n \n <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" data-aria-controls=\"navigation\" aria-label=\"Enter the NavZone\" hidden>\n Menu\n </button>\n\n <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n \n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n \nNavigation item 1\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/2\">\n \nNavigation item 2\n </a>\n </li>\n\n </ul>\n </nav>\n </div>\n\n </div>\n\n </div>"
},
{
"name": "with identical navigation toggle text and label",
@@ -463,7 +463,7 @@
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
- "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n <div class=\"govuk-width-container\">\n\n <div class=\"govuk-service-navigation__container\">\n \n\n \n <nav aria-label=\"Enter the NavZone\" class=\"govuk-service-navigation__wrapper\">\n <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" aria-controls=\"navigation\" hidden>\n Enter the NavZone\n </button>\n\n <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n \n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n \nNavigation item 1\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/2\">\n \nNavigation item 2\n </a>\n </li>\n\n </ul>\n </nav>\n </div>\n\n </div>\n\n </div>"
+ "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n <div class=\"govuk-width-container\">\n\n <div class=\"govuk-service-navigation__container\">\n \n\n \n <nav aria-label=\"Enter the NavZone\" class=\"govuk-service-navigation__wrapper\">\n <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" data-aria-controls=\"navigation\" hidden>\n Enter the NavZone\n </button>\n\n <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n \n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n \nNavigation item 1\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/2\">\n \nNavigation item 2\n </a>\n </li>\n\n </ul>\n </nav>\n </div>\n\n </div>\n\n </div>"
},
{
"name": "with custom navigation label",
@@ -484,7 +484,7 @@
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
- "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n <div class=\"govuk-width-container\">\n\n <div class=\"govuk-service-navigation__container\">\n \n\n \n <nav aria-label=\"Main navigation\" class=\"govuk-service-navigation__wrapper\">\n <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" aria-controls=\"navigation\" hidden>\n Menu\n </button>\n\n <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n \n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n \nNavigation item 1\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/2\">\n \nNavigation item 2\n </a>\n </li>\n\n </ul>\n </nav>\n </div>\n\n </div>\n\n </div>"
+ "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n <div class=\"govuk-width-container\">\n\n <div class=\"govuk-service-navigation__container\">\n \n\n \n <nav aria-label=\"Main navigation\" class=\"govuk-service-navigation__wrapper\">\n <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" data-aria-controls=\"navigation\" hidden>\n Menu\n </button>\n\n <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n \n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n \nNavigation item 1\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/2\">\n \nNavigation item 2\n </a>\n </li>\n\n </ul>\n </nav>\n </div>\n\n </div>\n\n </div>"
},
{
"name": "with custom navigation toggle text and navigation label",
@@ -506,7 +506,7 @@
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
- "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n <div class=\"govuk-width-container\">\n\n <div class=\"govuk-service-navigation__container\">\n \n\n \n <nav aria-label=\"The NavZone\" class=\"govuk-service-navigation__wrapper\">\n <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" aria-controls=\"navigation\" hidden>\n Enter the NavZone\n </button>\n\n <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n \n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n \nNavigation item 1\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/2\">\n \nNavigation item 2\n </a>\n </li>\n\n </ul>\n </nav>\n </div>\n\n </div>\n\n </div>"
+ "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n <div class=\"govuk-width-container\">\n\n <div class=\"govuk-service-navigation__container\">\n \n\n \n <nav aria-label=\"The NavZone\" class=\"govuk-service-navigation__wrapper\">\n <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" data-aria-controls=\"navigation\" hidden>\n Enter the NavZone\n </button>\n\n <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n \n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n \nNavigation item 1\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/2\">\n \nNavigation item 2\n </a>\n </li>\n\n </ul>\n </nav>\n </div>\n\n </div>\n\n </div>"
},
{
"name": "with custom navigation classes",
@@ -527,7 +527,7 @@
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
- "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n <div class=\"govuk-width-container\">\n\n <div class=\"govuk-service-navigation__container\">\n \n\n \n <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper app-my-neat-navigation-class\">\n <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" aria-controls=\"navigation\" hidden>\n Menu\n </button>\n\n <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n \n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n \nNavigation item 1\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/2\">\n \nNavigation item 2\n </a>\n </li>\n\n </ul>\n </nav>\n </div>\n\n </div>\n\n </div>"
+ "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n <div class=\"govuk-width-container\">\n\n <div class=\"govuk-service-navigation__container\">\n \n\n \n <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper app-my-neat-navigation-class\">\n <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" data-aria-controls=\"navigation\" hidden>\n Menu\n </button>\n\n <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n \n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n \nNavigation item 1\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/2\">\n \nNavigation item 2\n </a>\n </li>\n\n </ul>\n </nav>\n </div>\n\n </div>\n\n </div>"
},
{
"name": "with custom navigation ID",
@@ -548,7 +548,7 @@
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
- "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n <div class=\"govuk-width-container\">\n\n <div class=\"govuk-service-navigation__container\">\n \n\n \n <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" aria-controls=\"main-nav\" hidden>\n Menu\n </button>\n\n <ul class=\"govuk-service-navigation__list\" id=\"main-nav\" >\n\n \n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n \nNavigation item 1\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/2\">\n \nNavigation item 2\n </a>\n </li>\n\n </ul>\n </nav>\n </div>\n\n </div>\n\n </div>"
+ "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n <div class=\"govuk-width-container\">\n\n <div class=\"govuk-service-navigation__container\">\n \n\n \n <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" data-aria-controls=\"main-nav\" hidden>\n Menu\n </button>\n\n <ul class=\"govuk-service-navigation__list\" id=\"main-nav\" >\n\n \n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n \nNavigation item 1\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/2\">\n \nNavigation item 2\n </a>\n </li>\n\n </ul>\n </nav>\n </div>\n\n </div>\n\n </div>"
},
{
"name": "with navigation having empty values",
@@ -572,7 +572,7 @@
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
- "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n <div class=\"govuk-width-container\">\n\n <div class=\"govuk-service-navigation__container\">\n \n\n \n <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" aria-controls=\"navigation\" hidden>\n Menu\n </button>\n\n <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n \n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n \nNavigation item 1\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/2\">\n \nNavigation item 2\n </a>\n </li>\n\n </ul>\n </nav>\n </div>\n\n </div>\n\n </div>"
+ "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n <div class=\"govuk-width-container\">\n\n <div class=\"govuk-service-navigation__container\">\n \n\n \n <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" data-aria-controls=\"navigation\" hidden>\n Menu\n </button>\n\n <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n \n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n \nNavigation item 1\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/2\">\n \nNavigation item 2\n </a>\n </li>\n\n </ul>\n </nav>\n </div>\n\n </div>\n\n </div>"
},
{
"name": "with navigation having only empty values",
@@ -628,7 +628,7 @@
"description": "The active item indicates that the user is within that section, but not on the exact page being linked. It looks the same as a current item, but marks this item as an ancestor to the one the user is viewing in ARIA (e.g. a parent section).",
"pageTemplateOptions": {},
"screenshot": false,
- "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n <div class=\"govuk-width-container\">\n\n <div class=\"govuk-service-navigation__container\">\n \n\n \n <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" aria-controls=\"navigation\" hidden>\n Menu\n </button>\n\n <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n \n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n \nNavigation item 1\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item govuk-service-navigation__item--active\">\n <a class=\"govuk-service-navigation__link\" href=\"#/2\" aria-current=\"true\">\n \n <strong class=\"govuk-service-navigation__active-fallback\">Navigation item 2</strong>\n\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/3\">\n \nNavigation item 3\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/4\">\n \nNavigation item 4\n </a>\n </li>\n\n </ul>\n </nav>\n </div>\n\n </div>\n\n </div>"
+ "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n <div class=\"govuk-width-container\">\n\n <div class=\"govuk-service-navigation__container\">\n \n\n \n <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" data-aria-controls=\"navigation\" hidden>\n Menu\n </button>\n\n <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n \n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n \nNavigation item 1\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item govuk-service-navigation__item--active\">\n <a class=\"govuk-service-navigation__link\" href=\"#/2\" aria-current=\"true\">\n \n <strong class=\"govuk-service-navigation__active-fallback\">Navigation item 2</strong>\n\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/3\">\n \nNavigation item 3\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/4\">\n \nNavigation item 4\n </a>\n </li>\n\n </ul>\n </nav>\n </div>\n\n </div>\n\n </div>"
},
{
"name": "with slotted content",
@@ -674,7 +674,7 @@
"htmlClasses": "govuk-template--rebranded"
},
"screenshot": true,
- "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n <div class=\"govuk-width-container\">\n\n <div class=\"govuk-service-navigation__container\">\n \n\n \n <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" aria-controls=\"navigation\" hidden>\n Menu\n </button>\n\n <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n \n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n \nNavigation item 1\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/2\">\n \nNavigation item 2\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/3\">\n \nNavigation item 3\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/4\">\n \nNavigation item 4\n </a>\n </li>\n\n </ul>\n </nav>\n </div>\n\n </div>\n\n </div>"
+ "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n <div class=\"govuk-width-container\">\n\n <div class=\"govuk-service-navigation__container\">\n \n\n \n <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" data-aria-controls=\"navigation\" hidden>\n Menu\n </button>\n\n <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n \n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n \nNavigation item 1\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/2\">\n \nNavigation item 2\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/3\">\n \nNavigation item 3\n </a>\n </li>\n\n \n <li class=\"govuk-service-navigation__item\">\n <a class=\"govuk-service-navigation__link\" href=\"#/4\">\n \nNavigation item 4\n </a>\n </li>\n\n </ul>\n </nav>\n </div>\n\n </div>\n\n </div>"
}
],
"previewLayout": "full-width"
diff --git a/packages/govuk-frontend/dist/govuk/components/service-navigation/service-navigation.bundle.js b/packages/govuk-frontend/dist/govuk/components/service-navigation/service-navigation.bundle.js
index 5a45af7d3..fce23d179 100644
--- a/packages/govuk-frontend/dist/govuk/components/service-navigation/service-navigation.bundle.js
+++ b/packages/govuk-frontend/dist/govuk/components/service-navigation/service-navigation.bundle.js
@@ -168,11 +168,11 @@
if (!$menuButton) {
return this;
}
- const menuId = $menuButton.getAttribute('aria-controls');
+ const menuId = $menuButton.getAttribute('data-aria-controls');
if (!menuId) {
throw new ElementError({
component: ServiceNavigation,
- identifier: 'Navigation button (`<button class="govuk-js-service-navigation-toggle">`) attribute (`aria-controls`)'
+ identifier: 'Navigation button (`<button class="govuk-js-service-navigation-toggle">`) attribute (`data-aria-controls`)'
});
}
const $menu = document.getElementById(menuId);
@@ -185,6 +185,7 @@
}
this.$menu = $menu;
this.$menuButton = $menuButton;
+ this.$menuButton.setAttribute('aria-controls', this.$menu.id);
this.setupResponsiveChecks();
this.$menuButton.addEventListener('click', () => this.handleMenuButtonClick());
}
@@ -210,9 +211,9 @@
}
if (this.mql.matches) {
this.$menu.removeAttribute('hidden');
- this.$menuButton.setAttribute('hidden', '');
+ setAttributes(this.$menuButton, attributesForHidingButton);
} else {
- this.$menuButton.removeAttribute('hidden');
+ removeAttributes(this.$menuButton, Object.keys(attributesForHidingButton));
this.$menuButton.setAttribute('aria-expanded', this.menuIsOpen.toString());
if (this.menuIsOpen) {
this.$menu.removeAttribute('hidden');
@@ -227,6 +228,35 @@
}
}
ServiceNavigation.moduleName = 'govuk-service-navigation';
+ const attributesForHidingButton = {
+ hidden: '',
+ disabled: '',
+ 'aria-hidden': 'true'
+ };
+
+ /**
+ * Sets a group of attributes on the given element
+ *
+ * @param {Element} $element - The element to set the attribute on
+ * @param {{[attributeName: string]: string}} attributes - The attributes to set
+ */
+ function setAttributes($element, attributes) {
+ for (const attributeName in attributes) {
+ $element.setAttribute(attributeName, attributes[attributeName]);
+ }
+ }
+
+ /**
+ * Removes a list of attributes from the given element
+ *
+ * @param {Element} $element - The element to remove the attributes from
+ * @param {string[]} attributeNames - The names of the attributes to remove
+ */
+ function removeAttributes($element, attributeNames) {
+ for (const attributeName of attributeNames) {
+ $element.removeAttribute(attributeName);
+ }
+ }
exports.ServiceNavigation = ServiceNavigation;
diff --git a/packages/govuk-frontend/dist/govuk/components/service-navigation/service-navigation.bundle.mjs b/packages/govuk-frontend/dist/govuk/components/service-navigation/service-navigation.bundle.mjs
index ae233524c..a893a13e6 100644
--- a/packages/govuk-frontend/dist/govuk/components/service-navigation/service-navigation.bundle.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/service-navigation/service-navigation.bundle.mjs
@@ -162,11 +162,11 @@ class ServiceNavigation extends Component {
if (!$menuButton) {
return this;
}
- const menuId = $menuButton.getAttribute('aria-controls');
+ const menuId = $menuButton.getAttribute('data-aria-controls');
if (!menuId) {
throw new ElementError({
component: ServiceNavigation,
- identifier: 'Navigation button (`<button class="govuk-js-service-navigation-toggle">`) attribute (`aria-controls`)'
+ identifier: 'Navigation button (`<button class="govuk-js-service-navigation-toggle">`) attribute (`data-aria-controls`)'
});
}
const $menu = document.getElementById(menuId);
@@ -179,6 +179,7 @@ class ServiceNavigation extends Component {
}
this.$menu = $menu;
this.$menuButton = $menuButton;
+ this.$menuButton.setAttribute('aria-controls', this.$menu.id);
this.setupResponsiveChecks();
this.$menuButton.addEventListener('click', () => this.handleMenuButtonClick());
}
@@ -204,9 +205,9 @@ class ServiceNavigation extends Component {
}
if (this.mql.matches) {
this.$menu.removeAttribute('hidden');
- this.$menuButton.setAttribute('hidden', '');
+ setAttributes(this.$menuButton, attributesForHidingButton);
} else {
- this.$menuButton.removeAttribute('hidden');
+ removeAttributes(this.$menuButton, Object.keys(attributesForHidingButton));
this.$menuButton.setAttribute('aria-expanded', this.menuIsOpen.toString());
if (this.menuIsOpen) {
this.$menu.removeAttribute('hidden');
@@ -221,6 +222,35 @@ class ServiceNavigation extends Component {
}
}
ServiceNavigation.moduleName = 'govuk-service-navigation';
+const attributesForHidingButton = {
+ hidden: '',
+ disabled: '',
+ 'aria-hidden': 'true'
+};
+
+/**
+ * Sets a group of attributes on the given element
+ *
+ * @param {Element} $element - The element to set the attribute on
+ * @param {{[attributeName: string]: string}} attributes - The attributes to set
+ */
+function setAttributes($element, attributes) {
+ for (const attributeName in attributes) {
+ $element.setAttribute(attributeName, attributes[attributeName]);
+ }
+}
+
+/**
+ * Removes a list of attributes from the given element
+ *
+ * @param {Element} $element - The element to remove the attributes from
+ * @param {string[]} attributeNames - The names of the attributes to remove
+ */
+function removeAttributes($element, attributeNames) {
+ for (const attributeName of attributeNames) {
+ $element.removeAttribute(attributeName);
+ }
+}
export { ServiceNavigation };
//# sourceMappingURL=service-navigation.bundle.mjs.map
diff --git a/packages/govuk-frontend/dist/govuk/components/service-navigation/service-navigation.mjs b/packages/govuk-frontend/dist/govuk/components/service-navigation/service-navigation.mjs
index 675e72b8d..13e8902f1 100644
--- a/packages/govuk-frontend/dist/govuk/components/service-navigation/service-navigation.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/service-navigation/service-navigation.mjs
@@ -21,11 +21,11 @@ class ServiceNavigation extends Component {
if (!$menuButton) {
return this;
}
- const menuId = $menuButton.getAttribute('aria-controls');
+ const menuId = $menuButton.getAttribute('data-aria-controls');
if (!menuId) {
throw new ElementError({
component: ServiceNavigation,
- identifier: 'Navigation button (`<button class="govuk-js-service-navigation-toggle">`) attribute (`aria-controls`)'
+ identifier: 'Navigation button (`<button class="govuk-js-service-navigation-toggle">`) attribute (`data-aria-controls`)'
});
}
const $menu = document.getElementById(menuId);
@@ -38,6 +38,7 @@ class ServiceNavigation extends Component {
}
this.$menu = $menu;
this.$menuButton = $menuButton;
+ this.$menuButton.setAttribute('aria-controls', this.$menu.id);
this.setupResponsiveChecks();
this.$menuButton.addEventListener('click', () => this.handleMenuButtonClick());
}
@@ -63,9 +64,9 @@ class ServiceNavigation extends Component {
}
if (this.mql.matches) {
this.$menu.removeAttribute('hidden');
- this.$menuButton.setAttribute('hidden', '');
+ setAttributes(this.$menuButton, attributesForHidingButton);
} else {
- this.$menuButton.removeAttribute('hidden');
+ removeAttributes(this.$menuButton, Object.keys(attributesForHidingButton));
this.$menuButton.setAttribute('aria-expanded', this.menuIsOpen.toString());
if (this.menuIsOpen) {
this.$menu.removeAttribute('hidden');
@@ -80,6 +81,35 @@ class ServiceNavigation extends Component {
}
}
ServiceNavigation.moduleName = 'govuk-service-navigation';
+const attributesForHidingButton = {
+ hidden: '',
+ disabled: '',
+ 'aria-hidden': 'true'
+};
+
+/**
+ * Sets a group of attributes on the given element
+ *
+ * @param {Element} $element - The element to set the attribute on
+ * @param {{[attributeName: string]: string}} attributes - The attributes to set
+ */
+function setAttributes($element, attributes) {
+ for (const attributeName in attributes) {
+ $element.setAttribute(attributeName, attributes[attributeName]);
+ }
+}
+
+/**
+ * Removes a list of attributes from the given element
+ *
+ * @param {Element} $element - The element to remove the attributes from
+ * @param {string[]} attributeNames - The names of the attributes to remove
+ */
+function removeAttributes($element, attributeNames) {
+ for (const attributeName of attributeNames) {
+ $element.removeAttribute(attributeName);
+ }
+}
export { ServiceNavigation };
//# sourceMappingURL=service-navigation.mjs.map
Action run for f2446a2 |
📋 StatsFile sizes
Modules
View stats and visualisations on the review app Action run for f2446a2 |
This avoids the button to be listed in VoiceOver's rotor if JavaScript doesn't run. https://bugs.webkit.org/show_bug.cgi?id=300899
In anticipation of testing the presence of `aria-hidden`
`aria-expanded` and `aria-controls` make VoiceOver keep the button visible in its rotor, so we add `aria-hidden` as a complement to `hidden`. This is prefered to manually adding and removing each of `aria-expanded` and `aria-controls` as we'd need to remember their value when resetting them. It also future proofs in case other `aria` attributes make VoiceOver keep the button in the rotor.
romaricpascal
force-pushed
the
service-navigation-menu-button-vo
branch
from
d8088e5 to
f2446a2
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-6342
romaricpascal
changed the title
aria-controls when Service Navivation menu is visiblehidden Service Navigation menu button
romaricpascal
commented
Oct 17, 2025
There was a problem hiding this comment.
@36degrees The issue also affects the button in the Header component. Given its navigation is deprecated, though, I'm not sure if we want to publish a fix for it there or not. Let me know and it should be fairly easy to port the code.
|
|
||
| // Wait that the page got updated after the resize, | ||
| // as sometimes the tests run too early | ||
| await page.waitForSelector(`${navigationSelector}[hidden]`) |
There was a problem hiding this comment.
note This effectively doubles up with the first test within the describe, but I couldn't find another selector to wait on to guarantee that the media query listener had ran.
| const attributesForHidingButton = { | ||
| hidden: '', | ||
| // Prevent activating the button with JavaScript APIs while hidden | ||
| disabled: '', |
There was a problem hiding this comment.
note Happy to drop this one if we feel it's over the top.
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-6342
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.
Because of the
aria-controlsandaria-expandedattributes on it, VoiceOver on wide enough screens:To work around this without having to manage each
aria-...attribute individually, this PR:aria-controlfrom being in the HTML before JavaScript kicks in, in case JavaScript fails to loadaria-hiddenin complement to thehiddenattribute to hide the button from VoiceOverWhile in the space of 'fully hidding the button', it also adds a
disabledattribute so the button cannot be clicked programmatically in JavaScript.Technical considerations
In order to maintain a single source of truth for the attributes being updated, the PR introduces introduces a little object with the attributes to set on the
<button>which is then used to set or unset attributes in bulk through two small helpers.The PR also adds an extra set of tests for the component around how it reacts to the screen being resized, as it is during the resizes that the menu button gets shown or hidden.
Fixes #6294