profile-pane 3.1.1-0a928621 → 3.1.1-3ff4c1ff

package/lib/SocialPresenter.js

@@ -78,7 +78,7 @@ 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 {

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');