@financial-times/n-myft-ui 28.3.2 → 28.3.3

package/components/save-for-later/save-for-later.html

@@ -20,7 +20,7 @@
 		{{#if isSaved}}
 			{{!-- The value of alternate label needs to be the opposite of label / the current saved state. This allows the client side JS to toggle the labels on state changes --}}
 			title="{{#if title}}{{title}} is{{/if}} Saved to myFT"
-			aria-label="{{#if title}}{{title}} is{{/if}} Saved to myFT"
+			aria-label="{{#if title}}{{title}} is{{/if}} Saved to myFT - Unsave"
 			data-alternate-label="{{#if title}}Save {{title}} to myFT for later{{else}}Save this article to myFT for later{{/if}}"
 			aria-pressed="true"
 		{{else}}

package/myft/ui/save-article-to-list-variant.js

@@ -116,7 +116,6 @@ export default async function openSaveArticleToListVariant (contentId, options =
 		const overlayContent = document.querySelector('.o-overlay__content');
 		removeDescription();
 		overlayContent.insertAdjacentElement('beforeend', formElement);
-		formElement.elements[0].focus();
 	}
 
 	createListOverlay.open();
@@ -168,7 +167,8 @@ function FormElement (createList, showPublicToggle, attachDescription, onListCre
 	<form class="myft-ui-create-list-variant-form">
 		<label class="myft-ui-create-list-variant-form-name o-forms-field">
 			<span class="o-forms-input o-forms-input--text">
-				<input class="myft-ui-create-list-variant-text" type="text" name="list-name" aria-label="List name">
+				<input class="myft-ui-create-list-variant-text" type="text" name="list-name">
+				List name
 			</span>
 		</label>
 
@@ -258,7 +258,7 @@ function ContentElement (hasDescription, onClick) {
 
 	const content = `
 		<div class="myft-ui-create-list-variant-footer">
-			<button class="myft-ui-create-list-variant-add myft-ui-create-list-variant-add-collapsed" data-trackable="add-to-new-list" text="add to new list">Add to a new list</button>
+			<button class="myft-ui-create-list-variant-add myft-ui-create-list-variant-add-collapsed" aria-expanded=false data-trackable="add-to-new-list" text="add to new list">Add to a new list</button>
 			${hasDescription ? `
 			${description}
 		` : ''}
@@ -284,11 +284,13 @@ function ContentElement (hasDescription, onClick) {
 
 	function restoreFormHandler () {
 		contentElement.querySelector('.myft-ui-create-list-variant-add').classList.add('myft-ui-create-list-variant-add-collapsed');
+		contentElement.querySelector('.myft-ui-create-list-variant-add').setAttribute('aria-expanded', false);
 		return contentElement.addEventListener('click', clickHandler, { once: true });
 	}
 
 	function clickHandler (event) {
 		contentElement.querySelector('.myft-ui-create-list-variant-add').classList.remove('myft-ui-create-list-variant-add-collapsed');
+		contentElement.querySelector('.myft-ui-create-list-variant-add').setAttribute('aria-expanded', true);
 		onClick(event);
 	}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/n-myft-ui",
-  "version": "28.3.2",
+  "version": "28.3.3",
   "description": "Client side component for interaction with myft",
   "main": "server.js",
   "scripts": {