profile-pane 3.1.1-0a928621 → 3.1.1-86f82dc8

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

package/lib/profile-pane.js

@@ -550,6 +550,8 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Solid-UI form sizing fixes scoped t
   max-width: 100%;
   min-width: 0;
   box-sizing: border-box ;
+  background-color: #eef !important;
+  border: .05em solid #88c
 }
 
 .profile-form input[type="url"] {
@@ -658,7 +660,20 @@ section[aria-labelledby="edit-profile-contact-heading"] .profile-form > div:firs
   margin-right: 0 !important;
 }
 
-`, "",{"version":3,"sources":["webpack://./src/styles/rdfFormsEnforced.css"],"names":[],"mappings":"AAAA,yDAAyD;AACzD;EACE,iDAAiD;AACnD;;AAEA;EACE,wCAAwC;EACxC,uBAAuB;EACvB,oBAAoB;EACpB,2BAA2B;EAC3B,yBAAyB;EACzB,eAAe;EACf,oBAAoB;EACpB,mBAAmB;EACnB,uBAAuB;AACzB;;AAEA;EACE,uBAAuB;EACvB,wBAAwB;EACxB,cAAc;EACd,wBAAwB;EACxB,yBAAyB;EACzB,0BAA0B;EAC1B,+BAA+B;AACjC;;AAEA;EACE,oBAAoB;EACpB,mBAAmB;EACnB,kBAAkB;AACpB;;AAEA;EACE,oBAAoB;EACpB,mBAAmB;AACrB;;AAEA;EACE,kBAAkB;AACpB;;AAEA;EACE,wCAAwC;AAC1C;;AAEA;EACE,wCAAwC;EACxC,uBAAuB;EACvB,oBAAoB;EACpB,2BAA2B;AAC7B;;AAEA;;AAEA;;AAEA;;;EAGE,eAAe;EACf,YAAY;EACZ,uBAAuB;AACzB;;AAEA;EACE,WAAW;AACb;;AAEA;EACE,YAAY;EACZ,gCAAgC;AAClC;;AAEA;EACE,oBAAoB;EACpB,qBAAqB;AACvB;;AAEA;EACE,qBAAqB;AACvB;;AAEA;;;EAGE,WAAW;EACX,eAAe;AACjB;;AAEA;EACE,WAAW;EACX,cAAc;EACd,sBAAsB;EACtB,yBAAyB;EACzB,0BAA0B;AAC5B;;AAEA;EACE,yBAAyB;EACzB,sBAAsB;AACxB;;AAEA,oFAAoF;AACpF;;EAEE,uBAAuB;EACvB,qBAAqB;AACvB;;AAEA,0FAA0F;AAC1F;EACE,uBAAuB;EACvB,qBAAqB;AACvB;;AAEA,sEAAsE;AACtE;EACE,uBAAuB;EACvB,qBAAqB;AACvB;;AAEA,8FAA8F;AAC9F;;;;;EAKE,oBAAoB;EACpB,mBAAmB;EACnB,sBAAsB;AACxB;;AAEA;;;;;EAKE,oBAAoB;EACpB,mBAAmB;EACnB,sBAAsB;AACxB;;AAEA;EACE,WAAW;EACX,sBAAsB;EACtB,6BAA6B;EAC7B,yBAAyB;EACzB,0BAA0B;AAC5B;;AAEA,gFAAgF;AAChF;EACE,8BAA8B;AAChC;;AAEA,mDAAmD;AACnD;EACE,uBAAuB;AACzB;;AAEA;EACE,8BAA8B;AAChC;;AAEA;EACE,WAAW;EACX,yBAAyB;EACzB,0BAA0B;AAC5B","sourcesContent":["/* Solid-UI form sizing fixes scoped to Edit CV section */\n.profile-form .hoverControl:not(:has(> img:first-child)) {\n  border: 0.1em solid rgb(136, 136, 136) !important;\n}\n\n.profile-form .hoverControl:has(> img:first-child) {\n  background-color: transparent !important;\n  border: none !important;\n  margin: 0 !important;\n  border-radius: 0 !important;\n  padding: 0.7em !important;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.profile-form .hoverControlHide {\n  width: 1.5em !important;\n  height: 1.5em !important;\n  display: block;\n  margin-top: 0 !important;\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n  margin-bottom: 0.3em !important;\n}\n\n.profile-form .hoverControl:has(> img:first-child) > span {\n  display: inline-flex;\n  align-items: center;\n  margin-left: 0.3em;\n}\n\n.profile-form div[style*=\"padding: 0.5em\"]:has(> img) {\n  display: inline-flex;\n  align-items: center;\n}\n\n.profile-form div[style*=\"padding: 0.5em\"]:has(> img) > span {\n  margin-left: 0.3em;\n}\n\n.profile-form .hoverControl:has(> img:first-child):hover {\n  background-color: transparent !important;\n}\n\n.profile-form button:has(> img[src$=\".svg\"]) {\n  background-color: transparent !important;\n  border: none !important;\n  margin: 0 !important;\n  border-radius: 0 !important;\n}\n\n.profile-form button {\n\n}\n\n.profile-form input:not([type=\"color\"]),\n.profile-form textarea,\n.profile-form select {\n  max-width: 100%;\n  min-width: 0;\n  box-sizing: border-box ;\n}\n\n.profile-form input[type=\"url\"] {\n  width: 100%;\n}\n\n.profile-form .formFieldValue {\n  min-width: 0;\n  margin-bottom: var(--spacing-sm);\n}\n\n.profile-form .formFieldValue table {\n  margin: 0 !important;\n  padding: 0 !important;\n}\n\n.profile-form .formFieldValue td {\n  padding: 0 !important;\n}\n\n.profile-form .formFieldValue input:not([type=\"color\"]),\n.profile-form .formFieldValue textarea,\n.profile-form .formFieldValue select {\n  width: 100%;\n  max-width: 100%;\n}\n\n.profile-form select#formSelect {\n  width: 100%;\n  max-width: 97%;\n  box-sizing: border-box;\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n}\n\n.profile-form span select {\n  max-width: 96% !important;\n  box-sizing: border-box;\n}\n\n/* Remove border/padding from the first wrapper div (and its first child wrapper). */\n.profile-form > div:first-of-type,\n.profile-form > div:first-of-type > div:first-of-type {\n  border: none !important;\n  padding: 0 !important;\n}\n\n/* Remove border/padding from the inner div of the first wrapper in the contact section. */\nsection[aria-labelledby=\"edit-profile-contact-heading\"] .profile-form > div:first-of-type > div:first-of-type {\n  border: none !important;\n  padding: 0 !important;\n}\n\n/* In contactPane, remove border/padding from all direct child divs. */\n.contactPane > div {\n  border: none !important;\n  padding: 0 !important;\n}\n\n/* Align schema.org, solid terms, FOAF, vCard, and org field labels with their input values. */\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://schema.org/\"]),\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/solid/terms#\"]),\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://xmlns.com/foaf/0.1/\"]),\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/2006/vcard/ns\"]),\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/org#\"]) {\n  display: inline-flex;\n  align-items: center;\n  vertical-align: middle;\n}\n\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://schema.org/\"]) + .formFieldValue,\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/solid/terms#\"]) + .formFieldValue,\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://xmlns.com/foaf/0.1/\"]) + .formFieldValue,\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/2006/vcard/ns\"]) + .formFieldValue,\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/org#\"]) + .formFieldValue {\n  display: inline-flex;\n  align-items: center;\n  vertical-align: middle;\n}\n\n.profile-form textarea {\n  width: 100%;\n  box-sizing: border-box;\n  margin-top: var(--spacing-xs);\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n}\n\n/* Add horizontal gap between label and textarea for all label+textarea pairs. */\n.profile-form div:has(> a) + div:has(textarea) {\n  margin-left: var(--spacing-sm);\n}\n\n/* Center textarea label vertically in flex rows. */\n.profile-form div[style*=\"display: flex\"][style*=\"flex-direction: row\"]:has(textarea) {\n  align-items: flex-start;\n}\n\n.profile-form div[style*=\"display: flex\"][style*=\"flex-direction: row\"]:has(textarea) > div:has(> a) {\n  padding-top: var(--spacing-xs);\n}\n\n.profile-form input:not([type=\"color\"]) {\n  width: 100%;\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n}\n\n"],"sourceRoot":""}]);
+/* Remove padding from table cells within webidControl */
+.webidControl table td {
+  padding: 0 !important;
+}
+
+/* Remove padding from contactPane divs inside webidControl table cells */
+.webidControl table td div.contactPane.namedPane.fullWidth.individualPane {
+  padding: 0 !important;
+}
+
+.webidControl table td div.contactPane.namedPane {
+  border: none !important;
+}
+`, "",{"version":3,"sources":["webpack://./src/styles/rdfFormsEnforced.css"],"names":[],"mappings":"AAAA,yDAAyD;AACzD;EACE,iDAAiD;AACnD;;AAEA;EACE,wCAAwC;EACxC,uBAAuB;EACvB,oBAAoB;EACpB,2BAA2B;EAC3B,yBAAyB;EACzB,eAAe;EACf,oBAAoB;EACpB,mBAAmB;EACnB,uBAAuB;AACzB;;AAEA;EACE,uBAAuB;EACvB,wBAAwB;EACxB,cAAc;EACd,wBAAwB;EACxB,yBAAyB;EACzB,0BAA0B;EAC1B,+BAA+B;AACjC;;AAEA;EACE,oBAAoB;EACpB,mBAAmB;EACnB,kBAAkB;AACpB;;AAEA;EACE,oBAAoB;EACpB,mBAAmB;AACrB;;AAEA;EACE,kBAAkB;AACpB;;AAEA;EACE,wCAAwC;AAC1C;;AAEA;EACE,wCAAwC;EACxC,uBAAuB;EACvB,oBAAoB;EACpB,2BAA2B;AAC7B;;AAEA;;AAEA;;AAEA;;;EAGE,eAAe;EACf,YAAY;EACZ,uBAAuB;EACvB,iCAAiC;EACjC;AACF;;AAEA;EACE,WAAW;AACb;;AAEA;EACE,YAAY;EACZ,gCAAgC;AAClC;;AAEA;EACE,oBAAoB;EACpB,qBAAqB;AACvB;;AAEA;EACE,qBAAqB;AACvB;;AAEA;;;EAGE,WAAW;EACX,eAAe;AACjB;;AAEA;EACE,WAAW;EACX,cAAc;EACd,sBAAsB;EACtB,yBAAyB;EACzB,0BAA0B;AAC5B;;AAEA;EACE,yBAAyB;EACzB,sBAAsB;AACxB;;AAEA,oFAAoF;AACpF;;EAEE,uBAAuB;EACvB,qBAAqB;AACvB;;AAEA,0FAA0F;AAC1F;EACE,uBAAuB;EACvB,qBAAqB;AACvB;;AAEA,sEAAsE;AACtE;EACE,uBAAuB;EACvB,qBAAqB;AACvB;;AAEA,8FAA8F;AAC9F;;;;;EAKE,oBAAoB;EACpB,mBAAmB;EACnB,sBAAsB;AACxB;;AAEA;;;;;EAKE,oBAAoB;EACpB,mBAAmB;EACnB,sBAAsB;AACxB;;AAEA;EACE,WAAW;EACX,sBAAsB;EACtB,6BAA6B;EAC7B,yBAAyB;EACzB,0BAA0B;AAC5B;;AAEA,gFAAgF;AAChF;EACE,8BAA8B;AAChC;;AAEA,mDAAmD;AACnD;EACE,uBAAuB;AACzB;;AAEA;EACE,8BAA8B;AAChC;;AAEA;EACE,WAAW;EACX,yBAAyB;EACzB,0BAA0B;AAC5B;;AAEA,wDAAwD;AACxD;EACE,qBAAqB;AACvB;;AAEA,yEAAyE;AACzE;EACE,qBAAqB;AACvB;;AAEA;EACE,uBAAuB;AACzB","sourcesContent":["/* Solid-UI form sizing fixes scoped to Edit CV section */\n.profile-form .hoverControl:not(:has(> img:first-child)) {\n  border: 0.1em solid rgb(136, 136, 136) !important;\n}\n\n.profile-form .hoverControl:has(> img:first-child) {\n  background-color: transparent !important;\n  border: none !important;\n  margin: 0 !important;\n  border-radius: 0 !important;\n  padding: 0.7em !important;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.profile-form .hoverControlHide {\n  width: 1.5em !important;\n  height: 1.5em !important;\n  display: block;\n  margin-top: 0 !important;\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n  margin-bottom: 0.3em !important;\n}\n\n.profile-form .hoverControl:has(> img:first-child) > span {\n  display: inline-flex;\n  align-items: center;\n  margin-left: 0.3em;\n}\n\n.profile-form div[style*=\"padding: 0.5em\"]:has(> img) {\n  display: inline-flex;\n  align-items: center;\n}\n\n.profile-form div[style*=\"padding: 0.5em\"]:has(> img) > span {\n  margin-left: 0.3em;\n}\n\n.profile-form .hoverControl:has(> img:first-child):hover {\n  background-color: transparent !important;\n}\n\n.profile-form button:has(> img[src$=\".svg\"]) {\n  background-color: transparent !important;\n  border: none !important;\n  margin: 0 !important;\n  border-radius: 0 !important;\n}\n\n.profile-form button {\n\n}\n\n.profile-form input:not([type=\"color\"]),\n.profile-form textarea,\n.profile-form select {\n  max-width: 100%;\n  min-width: 0;\n  box-sizing: border-box ;\n  background-color: #eef !important;\n  border: .05em solid #88c\n}\n\n.profile-form input[type=\"url\"] {\n  width: 100%;\n}\n\n.profile-form .formFieldValue {\n  min-width: 0;\n  margin-bottom: var(--spacing-sm);\n}\n\n.profile-form .formFieldValue table {\n  margin: 0 !important;\n  padding: 0 !important;\n}\n\n.profile-form .formFieldValue td {\n  padding: 0 !important;\n}\n\n.profile-form .formFieldValue input:not([type=\"color\"]),\n.profile-form .formFieldValue textarea,\n.profile-form .formFieldValue select {\n  width: 100%;\n  max-width: 100%;\n}\n\n.profile-form select#formSelect {\n  width: 100%;\n  max-width: 97%;\n  box-sizing: border-box;\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n}\n\n.profile-form span select {\n  max-width: 96% !important;\n  box-sizing: border-box;\n}\n\n/* Remove border/padding from the first wrapper div (and its first child wrapper). */\n.profile-form > div:first-of-type,\n.profile-form > div:first-of-type > div:first-of-type {\n  border: none !important;\n  padding: 0 !important;\n}\n\n/* Remove border/padding from the inner div of the first wrapper in the contact section. */\nsection[aria-labelledby=\"edit-profile-contact-heading\"] .profile-form > div:first-of-type > div:first-of-type {\n  border: none !important;\n  padding: 0 !important;\n}\n\n/* In contactPane, remove border/padding from all direct child divs. */\n.contactPane > div {\n  border: none !important;\n  padding: 0 !important;\n}\n\n/* Align schema.org, solid terms, FOAF, vCard, and org field labels with their input values. */\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://schema.org/\"]),\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/solid/terms#\"]),\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://xmlns.com/foaf/0.1/\"]),\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/2006/vcard/ns\"]),\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/org#\"]) {\n  display: inline-flex;\n  align-items: center;\n  vertical-align: middle;\n}\n\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://schema.org/\"]) + .formFieldValue,\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/solid/terms#\"]) + .formFieldValue,\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://xmlns.com/foaf/0.1/\"]) + .formFieldValue,\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/2006/vcard/ns\"]) + .formFieldValue,\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/org#\"]) + .formFieldValue {\n  display: inline-flex;\n  align-items: center;\n  vertical-align: middle;\n}\n\n.profile-form textarea {\n  width: 100%;\n  box-sizing: border-box;\n  margin-top: var(--spacing-xs);\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n}\n\n/* Add horizontal gap between label and textarea for all label+textarea pairs. */\n.profile-form div:has(> a) + div:has(textarea) {\n  margin-left: var(--spacing-sm);\n}\n\n/* Center textarea label vertically in flex rows. */\n.profile-form div[style*=\"display: flex\"][style*=\"flex-direction: row\"]:has(textarea) {\n  align-items: flex-start;\n}\n\n.profile-form div[style*=\"display: flex\"][style*=\"flex-direction: row\"]:has(textarea) > div:has(> a) {\n  padding-top: var(--spacing-xs);\n}\n\n.profile-form input:not([type=\"color\"]) {\n  width: 100%;\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n}\n\n/* Remove padding from table cells within webidControl */\n.webidControl table td {\n  padding: 0 !important;\n}\n\n/* Remove padding from contactPane divs inside webidControl table cells */\n.webidControl table td div.contactPane.namedPane.fullWidth.individualPane {\n  padding: 0 !important;\n}\n\n.webidControl table td div.contactPane.namedPane {\n  border: none !important;\n}\n"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -836,6 +851,11 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Utility-first CSS classes for layou
   outline: none;
 }
 
+.no-focus-ring:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+
 /* ARIA live regions */
 .live-region {
   position: absolute;
@@ -1005,7 +1025,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Utility-first CSS classes for layou
 .btn-transparent:hover {
   background-color: transparent;
 }
-`, "",{"version":3,"sources":["webpack://./src/styles/utilities.css"],"names":[],"mappings":"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","sourcesContent":["/* Utility-first CSS classes for layout, spacing, and responsiveness */\n\n.actionButton {\n  width: 100%;\n  min-width: 180px;\n  max-width: 320px;\n  box-sizing: border-box;\n  display: inline-block;\n}\n\n/* ===========================================\n   PROFILE GRID LAYOUT\n   =========================================== */\n\n.profile-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(30em, 1fr));\n  gap: var(--spacing-lg);\n  background: var(--color-background);\n}\n\n.profile-header,\n.profile-footer {\n  grid-column: 1 / -1;\n}\n\n.center {\n  justify-content: center;\n  align-items: center;\n}\n\n.flex {\n  display: flex;\n}\n.grid {\n  display: grid;\n}\n\n/* Spacing utilities using CSS variables */\n.gap-xs { gap: var(--spacing-xs); }\n.gap-sm { gap: var(--spacing-sm); }\n.gap-md { gap: var(--spacing-md); }\n.gap-lg { gap: var(--spacing-lg); }\n.gap-xl { gap: var(--spacing-xl); }\n\n.mt-xs { margin-top: var(--spacing-xs); }\n.mt-sm { margin-top: var(--spacing-sm); }\n.mt-md { margin-top: var(--spacing-md); }\n.mt-lg { margin-top: var(--spacing-lg); }\n\n.mb-xs { margin-bottom: var(--spacing-xs); }\n.mb-sm { margin-bottom: var(--spacing-sm); }\n.mb-md { margin-bottom: var(--spacing-md); }\n.mb-lg { margin-bottom: var(--spacing-lg); }\n\n.p-xs { padding: var(--spacing-xs); }\n.p-sm { padding: var(--spacing-sm); }\n.p-md { padding: var(--spacing-md); }\n.p-lg { padding: var(--spacing-lg); }\n\n.rounded { border-radius: var(--border-radius-full); }\n.rounded-sm { border-radius: var(--border-radius-base); }\n\n.shadow { box-shadow: var(--box-shadow); }\n.shadow-sm { box-shadow: var(--box-shadow-sm); }\n\n.bg-primary {\n  background: var(--color-primary);\n  color: #fff;\n}\n.bg-card {\n  background: var(--color-card-bg);\n}\n\n/* Accessibility utilities */\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n.min-touch-target {\n  min-height: var(--min-touch-target);\n  min-width: var(--min-touch-target);\n}\n\n/* Enhanced accessibility utilities */\n.visually-hidden {\n  position: absolute !important;\n  width: 1px !important;\n  height: 1px !important;\n  padding: 0 !important;\n  margin: -1px !important;\n  overflow: hidden !important;\n  clip: rect(0, 0, 0, 0) !important;\n  white-space: nowrap !important;\n  border: 0 !important;\n}\n\n.visually-hidden.focusable:focus,\n.visually-hidden.focusable:active {\n  position: static !important;\n  width: auto !important;\n  height: auto !important;\n  padding: inherit !important;\n  margin: inherit !important;\n  overflow: visible !important;\n  clip: auto !important;\n  white-space: inherit !important;\n}\n\n/* Skip links utility */\n.skip-links {\n  position: absolute;\n  top: -100px;\n  left: 0;\n  z-index: 1000;\n}\n\n.skip-links a {\n  position: absolute;\n  left: 6px;\n  top: 6px;\n  padding: var(--spacing-sm);\n  background: var(--color-primary);\n  color: white;\n  text-decoration: none;\n  border-radius: var(--border-radius-base);\n}\n\n.skip-links a:focus {\n  top: 6px;\n}\n\n.reduced-motion {\n  animation: none !important;\n  transition: none !important;\n}\n\n/* Focus management */\n.focus-ring {\n  outline: 2px solid var(--color-primary);\n  outline-offset: 2px;\n}\n\n.no-focus-ring {\n  outline: none;\n}\n\n/* ARIA live regions */\n.live-region {\n  position: absolute;\n  left: -10000px;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n}\n\n/* Note: Use aria-live=\"polite\" or aria-live=\"assertive\" HTML attributes with .live-region */\n\n/* Text scaling utilities */\n.text-scale-friendly {\n  line-height: 1.5;\n  max-width: 70ch; /* Optimal reading length */\n}\n\n/* Text accessibility utilities */\n.text-readable {\n  line-height: var(--line-height-base);\n  max-width: 65ch;\n}\n\n.text-lg {\n  font-size: var(--font-size-lg);\n  line-height: var(--line-height-base);\n}\n\n.text-small {\n  font-size: max(var(--font-size-sm), var(--min-font-size));\n  line-height: var(--min-line-height);\n}\n\n.text-contrast-high {\n  color: var(--color-text);\n  font-weight: 600;\n}\n\n:focus-visible {\n  outline: var(--focus-ring-width) solid var(--color-primary);\n  outline-offset: 2px;\n  box-shadow: 0 0 0 1px var(--color-background);\n}\n\n:focus:not(:focus-visible) {\n  outline: none;\n  box-shadow: none;\n}\n\n/* Better focus for text elements */\n.focusable-text:focus {\n  background-color: rgba(124, 77, 255, 0.1);\n  outline: 2px solid var(--color-primary);\n  outline-offset: 2px;\n  border-radius: 2px;\n}\n\n/* High contrast text */\n.high-contrast {\n  color: var(--color-text);\n  background: var(--color-background);\n  border: 1px solid var(--color-border-pale);\n}\n\n/* ===========================================\n   CONSOLIDATED COMPONENT PATTERNS\n   =========================================== */\n\n/* Primary Button - used by ChatWithMe, ProfileCard */\n.btn-primary {\n  min-height: var(--min-touch-target);\n  padding: var(--spacing-sm) var(--spacing-md);\n  border: 1px solid var(--color-primary);\n  border-radius: var(--border-radius-base);\n  background: var(--color-primary);\n  color: white;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all var(--animation-duration) ease;\n}\n\n.btn-primary:hover {\n  background: color-mix(in srgb, var(--color-primary) 90%, black);\n  box-shadow: 0 2px 4px rgba(124, 77, 255, 0.2);\n}\n\n.btn-primary:active {\n  box-shadow: 0 1px 2px rgba(124, 77, 255, 0.2);\n}\n\n.btn-primary:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n  transform: none;\n}\n\n/* Action Button Focus - used by ChatWithMe, ProfileCard */\n.action-button-focus:focus,\n.action-button-focus:focus-visible {\n  outline: 3px solid var(--color-primary) !important;\n  outline-offset: 2px !important;\n  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 5px rgba(124, 77, 255, 0.25) !important;\n  z-index: 1;\n}\n\n/* List Reset - used by FriendList, SocialCard, nav */\n.list-reset {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n\n/* Zebra Striping - used by FriendList, StuffCard tables */\n.zebra-stripe tr:nth-child(even),\n.zebra-stripe > *:nth-child(even) {\n  background-color: rgba(0, 0, 0, 0.02);\n}\n\n/* Section Title - primary colored heading */\n.section-title {\n  font-size: 1.25em;\n  font-weight: 600;\n  color: var(--color-primary);\n  margin: 0;\n}\n\n/* Text Overflow - used by ProfileCard, SocialCard */\n.text-truncate {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n\n.text-wrap-anywhere {\n  overflow-wrap: anywhere;\n  word-break: break-word;\n}\n\n/* Loading Text - primary colored centered loading indicator */\n.loading-text {\n  color: var(--color-primary);\n  text-align: center;\n  margin: var(--spacing-md) 0;\n}\n\n/* Centered Section - flex column with center alignment */\n.section-centered {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n/* Card Section Background */\n.section-bg {\n  background: var(--color-section-bg);\n  border-radius: var(--border-radius-full);\n  box-shadow: var(--box-shadow);\n  padding: var(--spacing-md);\n}\n\n\n/* Transparent button override (for solid-ui integration) */\n.btn-transparent {\n  background-color: transparent;\n}\n\n.btn-transparent:hover {\n  background-color: transparent;\n}\n"],"sourceRoot":""}]);
+`, "",{"version":3,"sources":["webpack://./src/styles/utilities.css"],"names":[],"mappings":"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","sourcesContent":["/* Utility-first CSS classes for layout, spacing, and responsiveness */\n\n.actionButton {\n  width: 100%;\n  min-width: 180px;\n  max-width: 320px;\n  box-sizing: border-box;\n  display: inline-block;\n}\n\n/* ===========================================\n   PROFILE GRID LAYOUT\n   =========================================== */\n\n.profile-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(30em, 1fr));\n  gap: var(--spacing-lg);\n  background: var(--color-background);\n}\n\n.profile-header,\n.profile-footer {\n  grid-column: 1 / -1;\n}\n\n.center {\n  justify-content: center;\n  align-items: center;\n}\n\n.flex {\n  display: flex;\n}\n.grid {\n  display: grid;\n}\n\n/* Spacing utilities using CSS variables */\n.gap-xs { gap: var(--spacing-xs); }\n.gap-sm { gap: var(--spacing-sm); }\n.gap-md { gap: var(--spacing-md); }\n.gap-lg { gap: var(--spacing-lg); }\n.gap-xl { gap: var(--spacing-xl); }\n\n.mt-xs { margin-top: var(--spacing-xs); }\n.mt-sm { margin-top: var(--spacing-sm); }\n.mt-md { margin-top: var(--spacing-md); }\n.mt-lg { margin-top: var(--spacing-lg); }\n\n.mb-xs { margin-bottom: var(--spacing-xs); }\n.mb-sm { margin-bottom: var(--spacing-sm); }\n.mb-md { margin-bottom: var(--spacing-md); }\n.mb-lg { margin-bottom: var(--spacing-lg); }\n\n.p-xs { padding: var(--spacing-xs); }\n.p-sm { padding: var(--spacing-sm); }\n.p-md { padding: var(--spacing-md); }\n.p-lg { padding: var(--spacing-lg); }\n\n.rounded { border-radius: var(--border-radius-full); }\n.rounded-sm { border-radius: var(--border-radius-base); }\n\n.shadow { box-shadow: var(--box-shadow); }\n.shadow-sm { box-shadow: var(--box-shadow-sm); }\n\n.bg-primary {\n  background: var(--color-primary);\n  color: #fff;\n}\n.bg-card {\n  background: var(--color-card-bg);\n}\n\n/* Accessibility utilities */\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n.min-touch-target {\n  min-height: var(--min-touch-target);\n  min-width: var(--min-touch-target);\n}\n\n/* Enhanced accessibility utilities */\n.visually-hidden {\n  position: absolute !important;\n  width: 1px !important;\n  height: 1px !important;\n  padding: 0 !important;\n  margin: -1px !important;\n  overflow: hidden !important;\n  clip: rect(0, 0, 0, 0) !important;\n  white-space: nowrap !important;\n  border: 0 !important;\n}\n\n.visually-hidden.focusable:focus,\n.visually-hidden.focusable:active {\n  position: static !important;\n  width: auto !important;\n  height: auto !important;\n  padding: inherit !important;\n  margin: inherit !important;\n  overflow: visible !important;\n  clip: auto !important;\n  white-space: inherit !important;\n}\n\n/* Skip links utility */\n.skip-links {\n  position: absolute;\n  top: -100px;\n  left: 0;\n  z-index: 1000;\n}\n\n.skip-links a {\n  position: absolute;\n  left: 6px;\n  top: 6px;\n  padding: var(--spacing-sm);\n  background: var(--color-primary);\n  color: white;\n  text-decoration: none;\n  border-radius: var(--border-radius-base);\n}\n\n.skip-links a:focus {\n  top: 6px;\n}\n\n.reduced-motion {\n  animation: none !important;\n  transition: none !important;\n}\n\n/* Focus management */\n.focus-ring {\n  outline: 2px solid var(--color-primary);\n  outline-offset: 2px;\n}\n\n.no-focus-ring {\n  outline: none;\n}\n\n.no-focus-ring:focus-visible {\n  outline: none;\n  box-shadow: none;\n}\n\n/* ARIA live regions */\n.live-region {\n  position: absolute;\n  left: -10000px;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n}\n\n/* Note: Use aria-live=\"polite\" or aria-live=\"assertive\" HTML attributes with .live-region */\n\n/* Text scaling utilities */\n.text-scale-friendly {\n  line-height: 1.5;\n  max-width: 70ch; /* Optimal reading length */\n}\n\n/* Text accessibility utilities */\n.text-readable {\n  line-height: var(--line-height-base);\n  max-width: 65ch;\n}\n\n.text-lg {\n  font-size: var(--font-size-lg);\n  line-height: var(--line-height-base);\n}\n\n.text-small {\n  font-size: max(var(--font-size-sm), var(--min-font-size));\n  line-height: var(--min-line-height);\n}\n\n.text-contrast-high {\n  color: var(--color-text);\n  font-weight: 600;\n}\n\n:focus-visible {\n  outline: var(--focus-ring-width) solid var(--color-primary);\n  outline-offset: 2px;\n  box-shadow: 0 0 0 1px var(--color-background);\n}\n\n:focus:not(:focus-visible) {\n  outline: none;\n  box-shadow: none;\n}\n\n/* Better focus for text elements */\n.focusable-text:focus {\n  background-color: rgba(124, 77, 255, 0.1);\n  outline: 2px solid var(--color-primary);\n  outline-offset: 2px;\n  border-radius: 2px;\n}\n\n/* High contrast text */\n.high-contrast {\n  color: var(--color-text);\n  background: var(--color-background);\n  border: 1px solid var(--color-border-pale);\n}\n\n/* ===========================================\n   CONSOLIDATED COMPONENT PATTERNS\n   =========================================== */\n\n/* Primary Button - used by ChatWithMe, ProfileCard */\n.btn-primary {\n  min-height: var(--min-touch-target);\n  padding: var(--spacing-sm) var(--spacing-md);\n  border: 1px solid var(--color-primary);\n  border-radius: var(--border-radius-base);\n  background: var(--color-primary);\n  color: white;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all var(--animation-duration) ease;\n}\n\n.btn-primary:hover {\n  background: color-mix(in srgb, var(--color-primary) 90%, black);\n  box-shadow: 0 2px 4px rgba(124, 77, 255, 0.2);\n}\n\n.btn-primary:active {\n  box-shadow: 0 1px 2px rgba(124, 77, 255, 0.2);\n}\n\n.btn-primary:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n  transform: none;\n}\n\n/* Action Button Focus - used by ChatWithMe, ProfileCard */\n.action-button-focus:focus,\n.action-button-focus:focus-visible {\n  outline: 3px solid var(--color-primary) !important;\n  outline-offset: 2px !important;\n  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 5px rgba(124, 77, 255, 0.25) !important;\n  z-index: 1;\n}\n\n/* List Reset - used by FriendList, SocialCard, nav */\n.list-reset {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n\n/* Zebra Striping - used by FriendList, StuffCard tables */\n.zebra-stripe tr:nth-child(even),\n.zebra-stripe > *:nth-child(even) {\n  background-color: rgba(0, 0, 0, 0.02);\n}\n\n/* Section Title - primary colored heading */\n.section-title {\n  font-size: 1.25em;\n  font-weight: 600;\n  color: var(--color-primary);\n  margin: 0;\n}\n\n/* Text Overflow - used by ProfileCard, SocialCard */\n.text-truncate {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n\n.text-wrap-anywhere {\n  overflow-wrap: anywhere;\n  word-break: break-word;\n}\n\n/* Loading Text - primary colored centered loading indicator */\n.loading-text {\n  color: var(--color-primary);\n  text-align: center;\n  margin: var(--spacing-md) 0;\n}\n\n/* Centered Section - flex column with center alignment */\n.section-centered {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n/* Card Section Background */\n.section-bg {\n  background: var(--color-section-bg);\n  border-radius: var(--border-radius-full);\n  box-shadow: var(--box-shadow);\n  padding: var(--spacing-md);\n}\n\n\n/* Transparent button override (for solid-ui integration) */\n.btn-transparent {\n  background-color: transparent;\n}\n\n.btn-transparent:hover {\n  background-color: transparent;\n}\n"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -5190,27 +5210,26 @@ const socialMedia_namespaceObject = "@prefix rdf: <http://www.w3.org/1999/02/22-
 const baseUri = 'https://solidos.github.io/profile-pane/src/ontology/';
 function renderForm(div, subject, // Represents the RDF that fills the form
 formSource, // The imported form Turtle source
-formName, // The name of the form file (e.g., 'profileForm.ttl')
-store, dom, editableProfile) {
+formName, // The name of the form file (e.g., 'socialMedia.ttl')
+store, dom, editableProfile, whichForm) {
     // --- Form resource setup ---
     const formUri = baseUri + formName; // Full URI to the form file
-    const formThis = (0,external_rdflib_.Namespace)(formUri + '#')('this'); // NamedNode for #this in the form
-    loadDocument(formName, formSource, store);
-    div.setAttribute('data-testid', 'profile-editor');
-    div.classList.add('profile-form');
+    const exactForm = whichForm || 'this'; // If there are more 'a ui:Form' elements in a form file
+    const formThis = (0,external_rdflib_.Namespace)(formUri + '#')(exactForm); // NamedNode for #this in the form
+    loadDocument(store, formSource, formName, formUri);
     external_UI_.widgets.appendForm(dom, div, {}, subject, formThis, editableProfile, (ok, mes) => {
         if (!ok)
             external_UI_.widgets.errorMessageBlock(dom, mes);
     });
 } // renderForm
 // we need to load into the store some additional information about Social Media accounts
-function loadDocument(documentName, documentSource, store) {
-    const documentUri = baseUri + documentName; // Full URI to the file
-    const document = (0,external_rdflib_.sym)(documentUri); // rdflib NamedNode for the document    
+function loadDocument(store, documentSource, documentName, documentURI) {
+    const finalDocumentUri = documentURI || baseUri + documentName; // Full URI to the file
+    const document = (0,external_rdflib_.sym)(finalDocumentUri); // rdflib NamedNode for the document    
     if (!store.holds(undefined, undefined, undefined, document)) {
         // we are using the social media form because it contains the information we need
         // the form can be used for both use cases: create UI  for edit and render UI for display
-        (0,external_rdflib_.parse)(documentSource, store, documentUri, 'text/turtle', () => null); // Load doc directly
+        (0,external_rdflib_.parse)(documentSource, store, finalDocumentUri, 'text/turtle', () => null); // Load doc directly
     }
 }
 
@@ -5291,7 +5310,7 @@ function presentSocial(subject, store) {
         };
     }
     // we need to load the social media accounts ontology to be able to query all data needed
-    loadDocument(socialMediaFormName, socialMedia_namespaceObject, store);
+    loadDocument(store, socialMedia_namespaceObject, socialMediaFormName);
     const accountNodes = store.each(subject, external_UI_.ns.foaf('account'));
     const accountThings = accountNodes.flatMap(node => SocialPresenter_expandRdfList(store, node));
     if (!accountThings.length)
@@ -6007,21 +6026,30 @@ 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(external_UI_.widgets.attachmentList(context.dom, me, section, {
+    const attachmentList = external_UI_.widgets.attachmentList(context.dom, me, section, {
         doc: profile,
         modify: !!editableProfile,
         predicate: external_UI_.ns.foaf('knows'),
         noun: 'friend'
-    }));
+    });
+    const descriptions = [comment1.id];
+    if (comment2 === null || comment2 === void 0 ? void 0 : comment2.id) {
+        descriptions.push(comment2.id);
+    }
+    attachmentList.setAttribute('aria-describedby', descriptions.join(' '));
+    section.appendChild(attachmentList);
     return section;
 }
 
@@ -6032,8 +6060,9 @@ function EditFriendsSection(context, me, editableProfile, profile) {
 const EditSocialCard_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');
@@ -6074,21 +6103,30 @@ 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(external_UI_.widgets.attachmentList(context.dom, me, section, {
+    const attachmentList = external_UI_.widgets.attachmentList(context.dom, me, section, {
         doc: profile,
         modify: !!editableProfile,
         predicate: external_UI_.ns.solid('community'),
         noun: 'community'
-    }));
+    });
+    const descriptions = [comment1.id];
+    if (comment2 === null || comment2 === void 0 ? void 0 : comment2.id) {
+        descriptions.push(comment2.id);
+    }
+    attachmentList.setAttribute('aria-describedby', descriptions.join(' '));
+    section.appendChild(attachmentList);
     return section;
 }
 
@@ -6130,8 +6168,9 @@ const resumeForm_namespaceObject = "@prefix os: <http://www.w3.org/2000/10/swap/
 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');
@@ -6165,8 +6204,9 @@ const otherPreferencesForm_namespaceObject = "@prefix os: <http://www.w3.org/200
 const otherPreferencesFormName = 'otherPreferencesForm.ttl'; // The name of the form file
 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');
@@ -6216,13 +6256,25 @@ 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,
@@ -6243,24 +6295,29 @@ const editProfileView = {
                 editableProfile = profile;
             }
             else {
+                ensureStatusArea();
                 statusArea.appendChild(external_UI_.widgets.errorMessageBlock(dom, `⚠️ Your profile ${profile} is not editable, so we cannot do much here.`, 'straw'));
                 return;
             }
             // Render each section as a card with consistent classes
             // Your contact information Section
             main.appendChild(EditContactsSection(context, me));
-            // Social Accounts Section
-            main.appendChild(EditSocialSection(context, me, editableProfile, store));
             // Resume Section
             main.appendChild(EditCVSection(context, me, editableProfile, store));
+            // Social Accounts Section
+            main.appendChild(EditSocialSection(context, me, editableProfile, store));
             // Other preferences Section
             main.appendChild(EditOtherPreferencesSection(context, me, editableProfile, store));
             // People you know Section
             main.appendChild(EditFriendsSection(context, me, editableProfile, profile));
             // Communities you participate in Section
             main.appendChild(EditProfileCommunitiesSection(context, me, editableProfile, profile));
+            main.setAttribute('aria-busy', 'false');
+            main.focus();
         }).catch(error => {
+            ensureStatusArea();
             statusArea.appendChild(external_UI_.widgets.errorMessageBlock(dom, error, '#fee'));
+            main.setAttribute('aria-busy', 'false');
         });
         return div;
     }