profile-pane 3.1.1-e2c26c29 → 3.1.2-04d19fbd

package/lib/CVPresenter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CVPresenter.d.ts","sourceRoot":"","sources":["../src/CVPresenter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAa,IAAI,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAA;AAG9E,MAAM,WAAW,IAAI;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AACD,MAAM,WAAW,cAAc;IAC7B,WAAW,EAAE,WAAW,CAAC;IACzB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,SAAS,EAAE,MAAM,EAAE,CAAC;CACrB;AAED,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,IAAI,EAAE,CAAC;IACjB,WAAW,EAAE,IAAI,EAAE,CAAC;IACpB,UAAU,EAAE,IAAI,EAAE,CAAC;CACpB;AAID,eAAO,MAAM,WAAW,UAA4C,CAAA;AAEpE,wBAAgB,WAAW,CAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,GAAE,MAAM,CAW1D;AAED,wBAAgB,cAAc,CAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,GAAE,MAAM,CAM9D;AAED,wBAAgB,WAAW,CAAE,SAAS,CAAC,EAAC,OAAO,EAAE,OAAO,CAAC,EAAC,OAAO,GAAE,MAAM,CAIxE;AAsED,wBAAgB,SAAS,CACvB,OAAO,EAAE,SAAS,EAClB,KAAK,EAAE,SAAS,GACf,cAAc,CAyBhB"}
+{"version":3,"file":"CVPresenter.d.ts","sourceRoot":"","sources":["../src/CVPresenter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAa,IAAI,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAA;AAG9E,MAAM,WAAW,IAAI;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AACD,MAAM,WAAW,cAAc;IAC7B,WAAW,EAAE,WAAW,CAAC;IACzB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,SAAS,EAAE,MAAM,EAAE,CAAC;CACrB;AAED,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,IAAI,EAAE,CAAC;IACjB,WAAW,EAAE,IAAI,EAAE,CAAC;IACpB,UAAU,EAAE,IAAI,EAAE,CAAC;CACpB;AAID,eAAO,MAAM,WAAW,UAA4C,CAAA;AAEpE,wBAAgB,WAAW,CAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,GAAE,MAAM,CAW1D;AAED,wBAAgB,cAAc,CAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,GAAE,MAAM,CAM9D;AAED,wBAAgB,WAAW,CAAE,SAAS,CAAC,EAAC,OAAO,EAAE,OAAO,CAAC,EAAC,OAAO,GAAE,MAAM,CAIxE;AAsED,wBAAgB,SAAS,CACvB,OAAO,EAAE,SAAS,EAClB,KAAK,EAAE,SAAS,GACf,cAAc,CA0BhB"}

package/lib/CVPresenter.js

@@ -108,10 +108,12 @@ function presentCV(subject, store) {
   }
   const skills = store.each(subject, _solidUi.ns.schema('skills')).map(sk => skillAsText(store, sk)).filter(skill => skill !== '');
   const languageNodes = store.each(subject, _solidUi.ns.schema('knowsLanguage'));
-  const languages = languageNodes.flatMap(node => expandRdfList(store, node)).map(lan => languageAsText(store, lan)).filter(language => language !== '');
+  const languages = languageNodes.flatMap(node => expandRdfList(store, node)).map(lan => languageAsText(store, lan));
+  // Deduplicate languages
+  const uniqueLanguages = Array.from(new Set(languages));
   return {
     rolesByType,
     skills,
-    languages
+    languages: uniqueLanguages
   };
 }

package/lib/SocialPresenter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SocialPresenter.d.ts","sourceRoot":"","sources":["../src/SocialPresenter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAQ,MAAM,QAAQ,CAAA;AAQnD,MAAM,WAAW,OAAO;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;CAClB;AACD,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,OAAO,EAAE,CAAC;CACrB;AAuBD,wBAAgB,aAAa,CAC3B,OAAO,EAAE,SAAS,EAClB,KAAK,EAAE,SAAS,GACf,kBAAkB,CAiEpB"}
+{"version":3,"file":"SocialPresenter.d.ts","sourceRoot":"","sources":["../src/SocialPresenter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAQ,MAAM,QAAQ,CAAA;AAQnD,MAAM,WAAW,OAAO;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;CAClB;AACD,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,OAAO,EAAE,CAAC;CACrB;AAiCD,wBAAgB,aAAa,CAC3B,OAAO,EAAE,SAAS,EAClB,KAAK,EAAE,SAAS,GACf,kBAAkB,CA+EpB"}

package/lib/SocialPresenter.js

@@ -13,22 +13,31 @@ const socialMediaFormName = 'socialMedia.ttl'; // The name of the file to upload
 const DEFAULT_ICON_URI = _solidUi.icons.iconBase + 'noun_10636_grey.svg'; // grey disc
 
 function expandRdfList(store, node) {
-  const collectionElements = node.elements;
-  if (Array.isArray(collectionElements)) {
-    return collectionElements.flatMap(element => expandRdfList(store, element));
-  }
-  const first = store.any(node, _solidUi.ns.rdf('first'));
-  if (!first) return [node];
-  const items = [];
-  let current = node;
-  while (current) {
-    const value = store.any(current, _solidUi.ns.rdf('first'));
-    if (value) items.push(...expandRdfList(store, value));
-    const rest = store.any(current, _solidUi.ns.rdf('rest'));
-    if (!rest || rest.termType === 'NamedNode' && rest.value === _solidUi.ns.rdf('nil').value) break;
-    current = rest;
+  const visited = new Set();
+  function inner(node) {
+    const termType = node.termType || typeof node;
+    const value = node.value || String(node);
+    const key = `${termType}:${value}`;
+    if (visited.has(key)) return [];
+    visited.add(key);
+    const collectionElements = node.elements;
+    if (Array.isArray(collectionElements)) {
+      return collectionElements.flatMap(element => inner(element));
+    }
+    const first = store.any(node, _solidUi.ns.rdf('first'));
+    if (!first) return [node];
+    const items = [];
+    let current = node;
+    while (current) {
+      const value = store.any(current, _solidUi.ns.rdf('first'));
+      if (value) items.push(...inner(value));
+      const rest = store.any(current, _solidUi.ns.rdf('rest'));
+      if (!rest || rest.termType === 'NamedNode' && rest.value === _solidUi.ns.rdf('nil').value) break;
+      current = rest;
+    }
+    return items;
   }
-  return items;
+  return inner(node);
 }
 function presentSocial(subject, store) {
   function nameForAccount(subject) {
@@ -59,12 +68,17 @@ function presentSocial(subject, store) {
     return DEFAULT_ICON_URI;
   }
   function homepageForAccount(subject) {
-    const id = store.anyJS(subject, _solidUi.ns.foaf('accountName'), null, subject.doc()) || '';
+    const acHomepage = store.any(subject, _solidUi.ns.foaf('homepage')); // on the account itself?
+    if (acHomepage) return acHomepage.value;
+    const id = store.anyJS(subject, _solidUi.ns.foaf('accountName'), null, subject.doc()) || 'No_account_Name';
     const classes = store.each(subject, _solidUi.ns.rdf('type'));
     for (const k of classes) {
-      const userProfilePrefix = store.any(k, _solidUi.ns.foaf('userProfilePrefix'));
-      if (userProfilePrefix) {
-        return userProfilePrefix.value + id.trim();
+      // Fix: ensure k is a NamedNode for store.any
+      if (k.termType === 'NamedNode') {
+        const userProfilePrefix = store.any(k, _solidUi.ns.foaf('userProfilePrefix'));
+        if (userProfilePrefix) {
+          return userProfilePrefix.value + id.trim();
+        }
       }
     }
     return store.anyJS(subject, _solidUi.ns.foaf('homepage'), null, subject.doc()) || '';
@@ -78,16 +92,25 @@ function presentSocial(subject, store) {
   }
 
   // we need to load the social media accounts ontology to be able to query all data needed
-  (0, _rdfFormsHelper.loadDocument)(socialMediaFormName, socialMediaForm, store);
+  (0, _rdfFormsHelper.loadDocument)(store, socialMediaForm, socialMediaFormName);
   const accountNodes = store.each(subject, _solidUi.ns.foaf('account'));
-  const accountThings = accountNodes.flatMap(node => expandRdfList(store, node));
-  if (!accountThings.length) return {
+  let accountThings = accountNodes.flatMap(node => expandRdfList(store, node));
+  // Deduplicate by foaf:accountName value
+  const accountNameSet = new Set();
+  const accounts = [];
+  for (const ac of accountThings) {
+    if (ac.termType === 'NamedNode') {
+      const accountNameNode = store.any(ac, _solidUi.ns.foaf('accountName'));
+      const accountName = accountNameNode ? accountNameNode.value : '';
+      if (!accountNameSet.has(accountName)) {
+        accountNameSet.add(accountName);
+        accounts.push(accountAsObject(ac));
+      }
+    }
+  }
+  if (!accounts.length) return {
     accounts: []
   };
-  //console.log('Social: accountThings', accountThings)
-  const accounts = accountThings.map(ac => accountAsObject(ac));
-  //console.log('Social: account objects', accounts)
-
   return {
     accounts
   };

package/lib/editProfilePane/EditCVCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditCVCard.d.ts","sourceRoot":"","sources":["../../src/editProfilePane/EditCVCard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,KAAK,EAAC,MAAM,QAAQ,CAAA;AAOxC,wBAAgB,aAAa,CAAC,OAAO,EAAE,kBAAkB,EAAE,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE,SAAS,GAAG,IAAI,EAAE,KAAK,EAAE,KAAK,eA+BxH"}
+{"version":3,"file":"EditCVCard.d.ts","sourceRoot":"","sources":["../../src/editProfilePane/EditCVCard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,KAAK,EAAC,MAAM,QAAQ,CAAA;AAOxC,wBAAgB,aAAa,CAAC,OAAO,EAAE,kBAAkB,EAAE,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE,SAAS,GAAG,IAAI,EAAE,KAAK,EAAE,KAAK,eAgCxH"}

package/lib/editProfilePane/EditCVCard.js

@@ -13,8 +13,9 @@ const resumeFormName = 'resumeForm.ttl'; // The name of the form file
 
 function EditCVSection(context, me, editableProfile, store) {
   const section = context.dom.createElement('section');
+  section.setAttribute('data-testid', 'edit-cv-section');
   section.setAttribute('aria-labelledby', 'edit-profile-cv-heading');
-  section.classList.add('profileSection', 'section-bg');
+  section.classList.add('profileSection', 'section-bg', 'profile-form');
   const header = context.dom.createElement('header');
   header.classList.add('text-center', 'mb-md');
   const heading = context.dom.createElement('h2');

package/lib/editProfilePane/EditCommunitiesCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditCommunitiesCard.d.ts","sourceRoot":"","sources":["../../src/editProfilePane/EditCommunitiesCard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAIlC,wBAAgB,6BAA6B,CAAC,OAAO,EAAE,kBAAkB,EAAE,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE,SAAS,GAAG,IAAI,EAAE,OAAO,EAAE,SAAS,eAqC9I"}
+{"version":3,"file":"EditCommunitiesCard.d.ts","sourceRoot":"","sources":["../../src/editProfilePane/EditCommunitiesCard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAIlC,wBAAgB,6BAA6B,CAAC,OAAO,EAAE,kBAAkB,EAAE,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE,SAAS,GAAG,IAAI,EAAE,OAAO,EAAE,SAAS,eA6C9I"}

package/lib/editProfilePane/EditCommunitiesCard.js

@@ -19,20 +19,29 @@ function EditProfileCommunitiesSection(context, me, editableProfile, profile) {
   header.appendChild(heading);
   section.appendChild(header);
   const comment1 = context.dom.createElement('p');
+  comment1.id = 'edit-profile-communities-description';
   comment1.classList.add('p-md');
   comment1.textContent = 'These are organizations and projects whose stuff you share';
   section.appendChild(comment1);
+  let comment2 = null;
   if (editableProfile) {
-    const comment2 = context.dom.createElement('p');
+    comment2 = context.dom.createElement('p');
+    comment2.id = 'edit-profile-communities-help';
     comment2.classList.add('p-md');
     comment2.textContent = 'Drag organizations onto the target below to add organizations.';
     section.appendChild(comment2);
   }
-  section.appendChild(_solidUi.widgets.attachmentList(context.dom, me, section, {
+  const attachmentList = _solidUi.widgets.attachmentList(context.dom, me, section, {
     doc: profile,
     modify: !!editableProfile,
     predicate: _solidUi.ns.solid('community'),
     noun: 'community'
-  }));
+  });
+  const descriptions = [comment1.id];
+  if (comment2?.id) {
+    descriptions.push(comment2.id);
+  }
+  attachmentList.setAttribute('aria-describedby', descriptions.join(' '));
+  section.appendChild(attachmentList);
   return section;
 }

package/lib/editProfilePane/EditFriendsCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditFriendsCard.d.ts","sourceRoot":"","sources":["../../src/editProfilePane/EditFriendsCard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAIlC,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,kBAAkB,EAAE,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE,SAAS,GAAG,IAAI,EAAE,OAAO,EAAE,SAAS,eAsCnI"}
+{"version":3,"file":"EditFriendsCard.d.ts","sourceRoot":"","sources":["../../src/editProfilePane/EditFriendsCard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAIlC,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,kBAAkB,EAAE,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE,SAAS,GAAG,IAAI,EAAE,OAAO,EAAE,SAAS,eA8CnI"}

package/lib/editProfilePane/EditFriendsCard.js

@@ -19,20 +19,29 @@ function EditFriendsSection(context, me, editableProfile, profile) {
   header.appendChild(heading);
   section.appendChild(header);
   const comment1 = context.dom.createElement('p');
+  comment1.id = 'edit-profile-friends-description';
   comment1.classList.add('p-md');
   comment1.textContent = 'This is your public social network. Only put people here to whom you are happy to be publicly connected. (You can always keep private track of friends and family in your contacts.)';
   section.appendChild(comment1);
+  let comment2 = null;
   if (editableProfile) {
-    const comment2 = context.dom.createElement('p');
+    comment2 = context.dom.createElement('p');
+    comment2.id = 'edit-profile-friends-help';
     comment2.classList.add('p-md');
     comment2.textContent = 'Drag people onto the target below to add people.';
     section.appendChild(comment2);
   }
-  section.appendChild(_solidUi.widgets.attachmentList(context.dom, me, section, {
+  const attachmentList = _solidUi.widgets.attachmentList(context.dom, me, section, {
     doc: profile,
     modify: !!editableProfile,
     predicate: _solidUi.ns.foaf('knows'),
     noun: 'friend'
-  }));
+  });
+  const descriptions = [comment1.id];
+  if (comment2?.id) {
+    descriptions.push(comment2.id);
+  }
+  attachmentList.setAttribute('aria-describedby', descriptions.join(' '));
+  section.appendChild(attachmentList);
   return section;
 }

package/lib/editProfilePane/EditOtherPreferences.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditOtherPreferences.d.ts","sourceRoot":"","sources":["../../src/editProfilePane/EditOtherPreferences.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,KAAK,EAAC,MAAM,QAAQ,CAAA;AAOxC,wBAAgB,2BAA2B,CAAC,OAAO,EAAE,kBAAkB,EAAE,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE,SAAS,GAAG,IAAI,EAAE,KAAK,EAAE,KAAK,eAmBtI"}
+{"version":3,"file":"EditOtherPreferences.d.ts","sourceRoot":"","sources":["../../src/editProfilePane/EditOtherPreferences.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,KAAK,EAAC,MAAM,QAAQ,CAAA;AAOxC,wBAAgB,2BAA2B,CAAC,OAAO,EAAE,kBAAkB,EAAE,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE,SAAS,GAAG,IAAI,EAAE,KAAK,EAAE,KAAK,eAoBtI"}

package/lib/editProfilePane/EditOtherPreferences.js

@@ -13,8 +13,9 @@ const otherPreferencesFormName = 'otherPreferencesForm.ttl'; // The name of the
 
 function EditOtherPreferencesSection(context, me, editableProfile, store) {
   const section = context.dom.createElement('section');
+  section.setAttribute('data-testid', 'edit-other-preferences-section');
   section.setAttribute('aria-labelledby', 'edit-profile-other-preferences-heading');
-  section.classList.add('profileSection', 'section-bg');
+  section.classList.add('profileSection', 'section-bg', 'profile-form');
   const header = context.dom.createElement('header');
   header.classList.add('text-center', 'mb-md');
   const heading = context.dom.createElement('h2');

package/lib/editProfilePane/EditProfileView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditProfileView.d.ts","sourceRoot":"","sources":["../../src/editProfilePane/EditProfileView.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAO9C,OAAO,yBAAyB,CAAA;AAChC,OAAO,gCAAgC,CAAA;AAIvC,QAAA,MAAM,eAAe,EAAE,cAiFtB,CAAA;AAED,eAAe,eAAe,CAAA"}
+{"version":3,"file":"EditProfileView.d.ts","sourceRoot":"","sources":["../../src/editProfilePane/EditProfileView.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAO9C,OAAO,yBAAyB,CAAA;AAChC,OAAO,gCAAgC,CAAA;AAIvC,QAAA,MAAM,eAAe,EAAE,cAoGtB,CAAA;AAED,eAAe,eAAe,CAAA"}

package/lib/editProfilePane/EditProfileView.js

@@ -45,14 +45,26 @@ const editProfileView = {
     // Use <main> for the main content area, styled as a grid like ProfileView
     const main = dom.createElement('main');
     main.setAttribute('id', 'profile-edit-main-content');
-    main.classList.add('profile-grid');
+    main.setAttribute('aria-busy', 'true');
+    main.setAttribute('tabindex', '-1');
+    main.classList.add('profile-grid', 'no-focus-ring');
+    const mainHeading = dom.createElement('h1');
+    mainHeading.classList.add('visually-hidden');
+    mainHeading.textContent = 'Edit Profile';
+    main.appendChild(mainHeading);
     div.appendChild(main);
 
     // Use <aside> for the status area
     const statusArea = dom.createElement('aside');
     statusArea.classList.add('p-sm');
+    statusArea.setAttribute('role', 'status');
     statusArea.setAttribute('aria-live', 'polite');
-    div.appendChild(statusArea);
+    statusArea.setAttribute('aria-atomic', 'true');
+    const ensureStatusArea = () => {
+      if (!statusArea.isConnected) {
+        div.appendChild(statusArea);
+      }
+    };
     const profileContext = {
       dom: dom,
       div: main,
@@ -70,6 +82,7 @@ const editProfileView = {
       } else if (store.updater.editable(profile.uri, store)) {
         editableProfile = profile;
       } else {
+        ensureStatusArea();
         statusArea.appendChild(_solidUi.widgets.errorMessageBlock(dom, `⚠️ Your profile ${profile} is not editable, so we cannot do much here.`, 'straw'));
         return;
       }
@@ -78,12 +91,12 @@ const editProfileView = {
       // Your contact information Section
       main.appendChild((0, _EditContactsCard.EditContactsSection)(context, me));
 
-      // Social Accounts Section
-      main.appendChild((0, _EditSocialCard.EditSocialSection)(context, me, editableProfile, store));
-
       // Resume Section
       main.appendChild((0, _EditCVCard.EditCVSection)(context, me, editableProfile, store));
 
+      // Social Accounts Section
+      main.appendChild((0, _EditSocialCard.EditSocialSection)(context, me, editableProfile, store));
+
       // Other preferences Section
       main.appendChild((0, _EditOtherPreferences.EditOtherPreferencesSection)(context, me, editableProfile, store));
 
@@ -92,8 +105,12 @@ const editProfileView = {
 
       // Communities you participate in Section
       main.appendChild((0, _EditCommunitiesCard.EditProfileCommunitiesSection)(context, me, editableProfile, profile));
+      main.setAttribute('aria-busy', 'false');
+      main.focus();
     }).catch(error => {
+      ensureStatusArea();
       statusArea.appendChild(_solidUi.widgets.errorMessageBlock(dom, error, '#fee'));
+      main.setAttribute('aria-busy', 'false');
     });
     return div;
   }

package/lib/editProfilePane/EditSocialCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditSocialCard.d.ts","sourceRoot":"","sources":["../../src/editProfilePane/EditSocialCard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,KAAK,EAAC,MAAM,QAAQ,CAAA;AAOxC,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,kBAAkB,EAAE,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE,SAAS,GAAG,IAAI,EAAE,KAAK,EAAE,KAAK,eA+B5H"}
+{"version":3,"file":"EditSocialCard.d.ts","sourceRoot":"","sources":["../../src/editProfilePane/EditSocialCard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,KAAK,EAAC,MAAM,QAAQ,CAAA;AAOxC,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,kBAAkB,EAAE,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE,SAAS,GAAG,IAAI,EAAE,KAAK,EAAE,KAAK,eAgC5H"}

package/lib/editProfilePane/EditSocialCard.js

@@ -13,8 +13,9 @@ const socialMediaFormName = 'socialMedia.ttl'; // The name of the form file
 
 function EditSocialSection(context, me, editableProfile, store) {
   const section = context.dom.createElement('section');
+  section.setAttribute('data-testid', 'edit-social-section');
   section.setAttribute('aria-labelledby', 'edit-profile-social-heading');
-  section.classList.add('profileSection', 'section-bg');
+  section.classList.add('profileSection', 'section-bg', 'profile-form');
   const header = context.dom.createElement('header');
   header.classList.add('text-center', 'mb-md');
   const heading = context.dom.createElement('h2');