profile-pane 3.1.1-0a928621 → 3.1.1-ade3f81e

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/lib/editProfilePane/EditCommunitiesCard.d.ts.map +1 -1
  2. package/lib/editProfilePane/EditCommunitiesCard.js +12 -3
  3. package/lib/editProfilePane/EditFriendsCard.d.ts.map +1 -1
  4. package/lib/editProfilePane/EditFriendsCard.js +12 -3
  5. package/lib/editProfilePane/EditProfileView.d.ts.map +1 -1
  6. package/lib/editProfilePane/EditProfileView.js +22 -5
  7. package/lib/profile-pane.js +52 -12
  8. package/lib/profile-pane.js.map +1 -1
  9. package/lib/profile-pane.min.js +3 -3
  10. package/lib/profile-pane.min.js.map +1 -1
  11. package/lib/rdfFormsHelper.d.ts +1 -1
  12. package/lib/rdfFormsHelper.js +1 -1
  13. package/lib/styles/utilities.css +5 -0
  14. package/package.json +2 -1
package/lib/editProfilePane/EditCommunitiesCard.d.ts.map CHANGED
@@ -1 +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"}
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,eA6C9I"}
package/lib/editProfilePane/EditCommunitiesCard.js CHANGED
@@ -19,20 +19,29 @@ function EditProfileCommunitiesSection(context, me, editableProfile, profile) {
19
19
  header.appendChild(heading);
20
20
  section.appendChild(header);
21
21
  const comment1 = context.dom.createElement('p');
22
+ comment1.id = 'edit-profile-communities-description';
22
23
  comment1.classList.add('p-md');
23
24
  comment1.textContent = 'These are organizations and projects whose stuff you share';
24
25
  section.appendChild(comment1);
26
+ let comment2 = null;
25
27
  if (editableProfile) {
26
- const comment2 = context.dom.createElement('p');
28
+ comment2 = context.dom.createElement('p');
29
+ comment2.id = 'edit-profile-communities-help';
27
30
  comment2.classList.add('p-md');
28
31
  comment2.textContent = 'Drag organizations onto the target below to add organizations.';
29
32
  section.appendChild(comment2);
30
33
  }
31
- section.appendChild(_solidUi.widgets.attachmentList(context.dom, me, section, {
34
+ const attachmentList = _solidUi.widgets.attachmentList(context.dom, me, section, {
32
35
  doc: profile,
33
36
  modify: !!editableProfile,
34
37
  predicate: _solidUi.ns.solid('community'),
35
38
  noun: 'community'
36
- }));
39
+ });
40
+ const descriptions = [comment1.id];
41
+ if (comment2?.id) {
42
+ descriptions.push(comment2.id);
43
+ }
44
+ attachmentList.setAttribute('aria-describedby', descriptions.join(' '));
45
+ section.appendChild(attachmentList);
37
46
  return section;
38
47
  }
package/lib/editProfilePane/EditFriendsCard.d.ts.map CHANGED
@@ -1 +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"}
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,eA8CnI"}
package/lib/editProfilePane/EditFriendsCard.js CHANGED
@@ -19,20 +19,29 @@ function EditFriendsSection(context, me, editableProfile, profile) {
19
19
  header.appendChild(heading);
20
20
  section.appendChild(header);
21
21
  const comment1 = context.dom.createElement('p');
22
+ comment1.id = 'edit-profile-friends-description';
22
23
  comment1.classList.add('p-md');
23
24
  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.)';
24
25
  section.appendChild(comment1);
26
+ let comment2 = null;
25
27
  if (editableProfile) {
26
- const comment2 = context.dom.createElement('p');
28
+ comment2 = context.dom.createElement('p');
29
+ comment2.id = 'edit-profile-friends-help';
27
30
  comment2.classList.add('p-md');
28
31
  comment2.textContent = 'Drag people onto the target below to add people.';
29
32
  section.appendChild(comment2);
30
33
  }
31
- section.appendChild(_solidUi.widgets.attachmentList(context.dom, me, section, {
34
+ const attachmentList = _solidUi.widgets.attachmentList(context.dom, me, section, {
32
35
  doc: profile,
33
36
  modify: !!editableProfile,
34
37
  predicate: _solidUi.ns.foaf('knows'),
35
38
  noun: 'friend'
36
- }));
39
+ });
40
+ const descriptions = [comment1.id];
41
+ if (comment2?.id) {
42
+ descriptions.push(comment2.id);
43
+ }
44
+ attachmentList.setAttribute('aria-describedby', descriptions.join(' '));
45
+ section.appendChild(attachmentList);
37
46
  return section;
38
47
  }
package/lib/editProfilePane/EditProfileView.d.ts.map CHANGED
@@ -1 +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"}
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,cAoGtB,CAAA;AAED,eAAe,eAAe,CAAA"}
package/lib/editProfilePane/EditProfileView.js CHANGED
@@ -45,14 +45,26 @@ const editProfileView = {
45
45
  // Use <main> for the main content area, styled as a grid like ProfileView
46
46
  const main = dom.createElement('main');
47
47
  main.setAttribute('id', 'profile-edit-main-content');
48
- main.classList.add('profile-grid');
48
+ main.setAttribute('aria-busy', 'true');
49
+ main.setAttribute('tabindex', '-1');
50
+ main.classList.add('profile-grid', 'no-focus-ring');
51
+ const mainHeading = dom.createElement('h1');
52
+ mainHeading.classList.add('visually-hidden');
53
+ mainHeading.textContent = 'Edit Profile';
54
+ main.appendChild(mainHeading);
49
55
  div.appendChild(main);
50
56
 
51
57
  // Use <aside> for the status area
52
58
  const statusArea = dom.createElement('aside');
53
59
  statusArea.classList.add('p-sm');
60
+ statusArea.setAttribute('role', 'status');
54
61
  statusArea.setAttribute('aria-live', 'polite');
55
- div.appendChild(statusArea);
62
+ statusArea.setAttribute('aria-atomic', 'true');
63
+ const ensureStatusArea = () => {
64
+ if (!statusArea.isConnected) {
65
+ div.appendChild(statusArea);
66
+ }
67
+ };
56
68
  const profileContext = {
57
69
  dom: dom,
58
70
  div: main,
@@ -70,6 +82,7 @@ const editProfileView = {
70
82
  } else if (store.updater.editable(profile.uri, store)) {
71
83
  editableProfile = profile;
72
84
  } else {
85
+ ensureStatusArea();
73
86
  statusArea.appendChild(_solidUi.widgets.errorMessageBlock(dom, `⚠️ Your profile ${profile} is not editable, so we cannot do much here.`, 'straw'));
74
87
  return;
75
88
  }
@@ -78,12 +91,12 @@ const editProfileView = {
78
91
  // Your contact information Section
79
92
  main.appendChild((0, _EditContactsCard.EditContactsSection)(context, me));
80
93
 
81
- // Social Accounts Section
82
- main.appendChild((0, _EditSocialCard.EditSocialSection)(context, me, editableProfile, store));
83
-
84
94
  // Resume Section
85
95
  main.appendChild((0, _EditCVCard.EditCVSection)(context, me, editableProfile, store));
86
96
 
97
+ // Social Accounts Section
98
+ main.appendChild((0, _EditSocialCard.EditSocialSection)(context, me, editableProfile, store));
99
+
87
100
  // Other preferences Section
88
101
  main.appendChild((0, _EditOtherPreferences.EditOtherPreferencesSection)(context, me, editableProfile, store));
89
102
 
@@ -92,8 +105,12 @@ const editProfileView = {
92
105
 
93
106
  // Communities you participate in Section
94
107
  main.appendChild((0, _EditCommunitiesCard.EditProfileCommunitiesSection)(context, me, editableProfile, profile));
108
+ main.setAttribute('aria-busy', 'false');
109
+ main.focus();
95
110
  }).catch(error => {
111
+ ensureStatusArea();
96
112
  statusArea.appendChild(_solidUi.widgets.errorMessageBlock(dom, error, '#fee'));
113
+ main.setAttribute('aria-busy', 'false');
97
114
  });
98
115
  return div;
99
116
  }
package/lib/profile-pane.js CHANGED
@@ -836,6 +836,11 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Utility-first CSS classes for layou
836
836
  outline: none;
837
837
  }
838
838
 
839
+ .no-focus-ring:focus-visible {
840
+ outline: none;
841
+ box-shadow: none;
842
+ }
843
+
839
844
  /* ARIA live regions */
840
845
  .live-region {
841
846
  position: absolute;
@@ -1005,7 +1010,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Utility-first CSS classes for layou
1005
1010
  .btn-transparent:hover {
1006
1011
  background-color: transparent;
1007
1012
  }
1008
- `, "",{"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":""}]);
1013
+ `, "",{"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":""}]);
1009
1014
  // Exports
1010
1015
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
1011
1016
 
@@ -5190,7 +5195,7 @@ const socialMedia_namespaceObject = "@prefix rdf: <http://www.w3.org/1999/02/22-
5190
5195
  const baseUri = 'https://solidos.github.io/profile-pane/src/ontology/';
5191
5196
  function renderForm(div, subject, // Represents the RDF that fills the form
5192
5197
  formSource, // The imported form Turtle source
5193
- formName, // The name of the form file (e.g., 'profileForm.ttl')
5198
+ formName, // The name of the form file (e.g., 'socialMedia.ttl')
5194
5199
  store, dom, editableProfile) {
5195
5200
  // --- Form resource setup ---
5196
5201
  const formUri = baseUri + formName; // Full URI to the form file
@@ -6007,21 +6012,30 @@ function EditFriendsSection(context, me, editableProfile, profile) {
6007
6012
  header.appendChild(heading);
6008
6013
  section.appendChild(header);
6009
6014
  const comment1 = context.dom.createElement('p');
6015
+ comment1.id = 'edit-profile-friends-description';
6010
6016
  comment1.classList.add('p-md');
6011
6017
  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.)';
6012
6018
  section.appendChild(comment1);
6019
+ let comment2 = null;
6013
6020
  if (editableProfile) {
6014
- const comment2 = context.dom.createElement('p');
6021
+ comment2 = context.dom.createElement('p');
6022
+ comment2.id = 'edit-profile-friends-help';
6015
6023
  comment2.classList.add('p-md');
6016
6024
  comment2.textContent = 'Drag people onto the target below to add people.';
6017
6025
  section.appendChild(comment2);
6018
6026
  }
6019
- section.appendChild(external_UI_.widgets.attachmentList(context.dom, me, section, {
6027
+ const attachmentList = external_UI_.widgets.attachmentList(context.dom, me, section, {
6020
6028
  doc: profile,
6021
6029
  modify: !!editableProfile,
6022
6030
  predicate: external_UI_.ns.foaf('knows'),
6023
6031
  noun: 'friend'
6024
- }));
6032
+ });
6033
+ const descriptions = [comment1.id];
6034
+ if (comment2 === null || comment2 === void 0 ? void 0 : comment2.id) {
6035
+ descriptions.push(comment2.id);
6036
+ }
6037
+ attachmentList.setAttribute('aria-describedby', descriptions.join(' '));
6038
+ section.appendChild(attachmentList);
6025
6039
  return section;
6026
6040
  }
6027
6041
 
@@ -6074,21 +6088,30 @@ function EditProfileCommunitiesSection(context, me, editableProfile, profile) {
6074
6088
  header.appendChild(heading);
6075
6089
  section.appendChild(header);
6076
6090
  const comment1 = context.dom.createElement('p');
6091
+ comment1.id = 'edit-profile-communities-description';
6077
6092
  comment1.classList.add('p-md');
6078
6093
  comment1.textContent = 'These are organizations and projects whose stuff you share';
6079
6094
  section.appendChild(comment1);
6095
+ let comment2 = null;
6080
6096
  if (editableProfile) {
6081
- const comment2 = context.dom.createElement('p');
6097
+ comment2 = context.dom.createElement('p');
6098
+ comment2.id = 'edit-profile-communities-help';
6082
6099
  comment2.classList.add('p-md');
6083
6100
  comment2.textContent = 'Drag organizations onto the target below to add organizations.';
6084
6101
  section.appendChild(comment2);
6085
6102
  }
6086
- section.appendChild(external_UI_.widgets.attachmentList(context.dom, me, section, {
6103
+ const attachmentList = external_UI_.widgets.attachmentList(context.dom, me, section, {
6087
6104
  doc: profile,
6088
6105
  modify: !!editableProfile,
6089
6106
  predicate: external_UI_.ns.solid('community'),
6090
6107
  noun: 'community'
6091
- }));
6108
+ });
6109
+ const descriptions = [comment1.id];
6110
+ if (comment2 === null || comment2 === void 0 ? void 0 : comment2.id) {
6111
+ descriptions.push(comment2.id);
6112
+ }
6113
+ attachmentList.setAttribute('aria-describedby', descriptions.join(' '));
6114
+ section.appendChild(attachmentList);
6092
6115
  return section;
6093
6116
  }
6094
6117
 
@@ -6216,13 +6239,25 @@ const editProfileView = {
6216
6239
  // Use <main> for the main content area, styled as a grid like ProfileView
6217
6240
  const main = dom.createElement('main');
6218
6241
  main.setAttribute('id', 'profile-edit-main-content');
6219
- main.classList.add('profile-grid');
6242
+ main.setAttribute('aria-busy', 'true');
6243
+ main.setAttribute('tabindex', '-1');
6244
+ main.classList.add('profile-grid', 'no-focus-ring');
6245
+ const mainHeading = dom.createElement('h1');
6246
+ mainHeading.classList.add('visually-hidden');
6247
+ mainHeading.textContent = 'Edit Profile';
6248
+ main.appendChild(mainHeading);
6220
6249
  div.appendChild(main);
6221
6250
  // Use <aside> for the status area
6222
6251
  const statusArea = dom.createElement('aside');
6223
6252
  statusArea.classList.add('p-sm');
6253
+ statusArea.setAttribute('role', 'status');
6224
6254
  statusArea.setAttribute('aria-live', 'polite');
6225
- div.appendChild(statusArea);
6255
+ statusArea.setAttribute('aria-atomic', 'true');
6256
+ const ensureStatusArea = () => {
6257
+ if (!statusArea.isConnected) {
6258
+ div.appendChild(statusArea);
6259
+ }
6260
+ };
6226
6261
  const profileContext = {
6227
6262
  dom: dom,
6228
6263
  div: main,
@@ -6243,24 +6278,29 @@ const editProfileView = {
6243
6278
  editableProfile = profile;
6244
6279
  }
6245
6280
  else {
6281
+ ensureStatusArea();
6246
6282
  statusArea.appendChild(external_UI_.widgets.errorMessageBlock(dom, `⚠️ Your profile ${profile} is not editable, so we cannot do much here.`, 'straw'));
6247
6283
  return;
6248
6284
  }
6249
6285
  // Render each section as a card with consistent classes
6250
6286
  // Your contact information Section
6251
6287
  main.appendChild(EditContactsSection(context, me));
6252
- // Social Accounts Section
6253
- main.appendChild(EditSocialSection(context, me, editableProfile, store));
6254
6288
  // Resume Section
6255
6289
  main.appendChild(EditCVSection(context, me, editableProfile, store));
6290
+ // Social Accounts Section
6291
+ main.appendChild(EditSocialSection(context, me, editableProfile, store));
6256
6292
  // Other preferences Section
6257
6293
  main.appendChild(EditOtherPreferencesSection(context, me, editableProfile, store));
6258
6294
  // People you know Section
6259
6295
  main.appendChild(EditFriendsSection(context, me, editableProfile, profile));
6260
6296
  // Communities you participate in Section
6261
6297
  main.appendChild(EditProfileCommunitiesSection(context, me, editableProfile, profile));
6298
+ main.setAttribute('aria-busy', 'false');
6299
+ main.focus();
6262
6300
  }).catch(error => {
6301
+ ensureStatusArea();
6263
6302
  statusArea.appendChild(external_UI_.widgets.errorMessageBlock(dom, error, '#fee'));
6303
+ main.setAttribute('aria-busy', 'false');
6264
6304
  });
6265
6305
  return div;
6266
6306
  }