Merge pull request #38 from swup/feat/announce-method

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## [4.4.2] - 2023-10-26
+
+- Add new method `swup.announce` for programmatically announcing something
+
 ## [4.4.1] - 2023-09-25
 
 - Use `@swup/cli` for bundling
@@ -42,8 +46,7 @@
 
 - Initial release
 
-[Unreleased]: https://github.com/swup/a11y-plugin/compare/4.4.1...HEAD
-
+[4.4.2]: https://github.com/swup/a11y-plugin/releases/tag/4.4.2
 [4.4.1]: https://github.com/swup/a11y-plugin/releases/tag/4.4.1
 [4.4.0]: https://github.com/swup/a11y-plugin/releases/tag/4.4.0
 [4.3.0]: https://github.com/swup/a11y-plugin/releases/tag/4.3.0

README.md

@@ -235,3 +235,15 @@ Executes the focussing of the new main content container.
 ```js
 swup.hooks.on('content:focus', () => console.log('New content received focus'));
 ```
+
+## Methods on the swup instance
+
+The plugin adds the following method to the swup instance:
+
+### announce
+
+Announce something programmatically. Use this if you are making use of [`options.resolveUrl`](https://swup.js.org/options/#resolve-url) and still want state changes to be announced.
+
+```js
+swup.announce?.(`Filtered by ${myFilterString}`);
+```

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@swup/a11y-plugin",
   "amdName": "SwupA11yPlugin",
-  "version": "4.4.1",
+  "version": "4.4.2",
   "description": "A swup plugin for enhanced accessibility",
   "type": "module",
   "source": "src/index.ts",

src/index.ts

@@ -20,6 +20,12 @@ declare module 'swup' {
 		'content:announce': undefined;
 		'content:focus': undefined;
 	}
+	export interface Swup {
+		/**
+		 * Announce something programmatically
+		 */
+		announce?: SwupA11yPlugin['announce'];
+	}
 }
 
 /** Templates for announcements of the new page content. */
@@ -115,6 +121,12 @@ export default class SwupA11yPlugin extends Plugin {
 			this.before('link:self', this.disableScrollAnimations);
 			this.before('link:anchor', this.disableScrollAnimations);
 		}
+		// Announce something programmatically
+		this.swup.announce = this.announce;
+	}
+
+	unmount() {
+		this.swup.announce = undefined;
 	}
 
 	markAsBusy() {
@@ -181,6 +193,10 @@ export default class SwupA11yPlugin extends Plugin {
 		}
 	}
 
+	announce = (message: string): void => {
+		this.liveRegion.say(message);
+	}
+
 	async focusPageContent(visit: Visit) {
 		if (!visit.a11y.focus) return;