Improve UI components with tooltips, accessibility fixes, and reusable locale/theme selectors (#790)

### Summary & Motivation

Add tooltip support to all form field components to provide better user
guidance. Form fields like account name, region, and title now have
contextual tooltips explaining their purpose.

- Add MultiSelect component for multiple selection dropdowns.
- Extract LocaleSwitcher and ThemeModeSelector into reusable components.
- Add fixed dialog width utilities (w-dialog-md, w-dialog-lg) using
@Utility directive to prevent layout inconsistencies across languages.
- Add button variant to Link component for consistent styling.
- Fix Modal component to pass props only to ModalOverlay, preventing
prop spreading issues.
- Lock verification code input after pasting to prevent extra
characters.
- Remove incorrect aria-hidden attributes from Table wrapper divs.
- Add aria-label to newsletter email input for accessibility.
- Remove Dutch (nl-NL) language support from the application.

 ### Downstream projects

1. Remove Dutch language translations by deleting
`application/your-self-contained-system/WebApp/shared/translations/locale/nl-NL.po`.

2. Update all Dialog components to use the new standard width utilities
instead of max-w classes. Replace `sm:max-w-lg` with `sm:w-dialog-md`
and similar patterns with `sm:w-dialog-lg` for larger dialogs.

 ```diff
 - <Dialog className="sm:max-w-lg">
 + <Dialog className="sm:w-dialog-md">
```
### Checklist

- [x] I have added tests, or done manual regression tests
- [x] I have updated the documentation, if necessary

Author: tjementum

application/account-management/WebApp/federated-modules/common/AcceptInvitationDialog.tsx

@@ -54,7 +54,7 @@ export function AcceptInvitationDialog({
 
   return (
     <Modal isOpen={isOpen} onOpenChange={onOpenChange} isDismissable={true}>
-      <Dialog className="sm:max-w-lg">
+      <Dialog className="sm:w-dialog-md">
         <XIcon
           onClick={() => onOpenChange(false)}
           className="absolute top-2 right-2 h-10 w-10 cursor-pointer p-2 hover:bg-muted"

application/account-management/WebApp/federated-modules/common/SupportDialog.tsx

@@ -16,7 +16,7 @@ export function SupportDialog({ children }: Readonly<SupportDialogProps>) {
     <DialogTrigger>
       {children}
       <Modal isDismissable={true} zIndex="high">
-        <Dialog className="sm:max-w-lg">
+        <Dialog className="sm:w-dialog-md">
           {({ close }) => (
             <>
               <XIcon onClick={close} className="absolute top-2 right-2 h-10 w-10 cursor-pointer p-2 hover:bg-muted" />

application/account-management/WebApp/federated-modules/common/UserProfileModal.tsx

@@ -135,7 +135,10 @@ export default function UserProfileModal({ isOpen, onOpenChange }: Readonly<Prof
           </Heading>
         </Dialog>
       ) : (
-        <Dialog aria-label={t`User profile`} className="max-sm:flex max-sm:flex-col max-sm:overflow-hidden">
+        <Dialog
+          aria-label={t`User profile`}
+          className="max-sm:flex max-sm:flex-col max-sm:overflow-hidden sm:w-dialog-lg"
+        >
           <XIcon onClick={closeDialog} className="absolute top-2 right-2 h-10 w-10 cursor-pointer p-2 hover:bg-muted" />
           <DialogHeader description={<Trans>Update your profile picture and personal details here.</Trans>}>
             <Heading slot="title" className="text-2xl">
@@ -237,6 +240,7 @@ export default function UserProfileModal({ isOpen, onOpenChange }: Readonly<Prof
               <TextField
                 name="title"
                 label={t`Title`}
+                tooltip={t`Your professional title or role`}
                 defaultValue={user?.title}
                 placeholder={t`E.g. Software engineer`}
               />

application/account-management/WebApp/routes/(index)/-components/FooterSection.tsx

@@ -12,7 +12,7 @@ export function FooterSection() {
           <div className="font-normal text-base text-muted-foreground">Technology that has your back.</div>
         </div>
         <div className="right flex flex-col items-center gap-4 md:flex-row">
-          <TextField type="email" placeholder="Enter your email" />
+          <TextField type="email" placeholder="Enter your email" aria-label="Email address" />
           {/* Button component is used to display a call to action */}
           <Button variant="primary">Subscribe</Button>
         </div>

application/account-management/WebApp/routes/admin/account/index.tsx

@@ -335,6 +335,7 @@ export function AccountSettings() {
             isDisabled={updateCurrentTenantMutation.isPending}
             isReadOnly={!isOwner}
             label={t`Account name`}
+            tooltip={isOwner ? t`The name of your account, shown to users and in email notifications` : undefined}
             description={!isOwner ? t`Only account owners can modify the account name` : undefined}
             validationBehavior="aria"
           />

application/account-management/WebApp/routes/admin/users/-components/InviteUserDialog.tsx

@@ -34,7 +34,7 @@ export default function InviteUserDialog({ isOpen, onOpenChange }: Readonly<Invi
 
   return (
     <Modal isOpen={isOpen} onOpenChange={onOpenChange} isDismissable={true}>
-      <Dialog>
+      <Dialog className="sm:w-dialog-md">
         <XIcon
           onClick={() => onOpenChange(false)}
           className="absolute top-2 right-2 h-10 w-10 cursor-pointer p-2 hover:bg-muted"

application/account-management/WebApp/routes/admin/users/-components/TenantNameRequiredDialog.tsx

@@ -16,7 +16,7 @@ interface TenantNameRequiredDialogProps {
 export function TenantNameRequiredDialog({ isOpen, onOpenChange }: Readonly<TenantNameRequiredDialogProps>) {
   return (
     <Modal isOpen={isOpen} onOpenChange={onOpenChange} isDismissable={true}>
-      <Dialog className="sm:max-w-lg">
+      <Dialog className="sm:w-dialog-md">
         {({ close }) => (
           <>
             <XIcon onClick={close} className="absolute top-2 right-2 h-10 w-10 cursor-pointer p-2 hover:bg-muted" />

application/account-management/WebApp/routes/signup/index.tsx

@@ -93,6 +93,7 @@ export function StartSignupForm() {
         name="region"
         selectedKey="europe"
         label={t`Region`}
+        tooltip={t`Data storage location for privacy and compliance. This cannot be changed later.`}
         description={t`This is the region where your data is stored`}
         isRequired={true}
         className="flex w-full flex-col"

application/account-management/WebApp/rsbuild.config.ts

@@ -36,8 +36,7 @@ export default defineConfig({
         "./FederatedTopMenu": "./federated-modules/topMenu/FederatedTopMenu.tsx",
         "./AuthSyncModal": "./federated-modules/common/AuthSyncModal.tsx",
         "./translations/en-US": "./shared/translations/locale/en-US.ts",
-        "./translations/da-DK": "./shared/translations/locale/da-DK.ts",
-        "./translations/nl-NL": "./shared/translations/locale/nl-NL.ts"
+        "./translations/da-DK": "./shared/translations/locale/da-DK.ts"
       }
     })
   ]

application/account-management/WebApp/shared/translations/locale/da-DK.po

@@ -176,6 +176,9 @@ msgstr "Mørk"
 msgid "Dashboard"
 msgstr "Dashboard"
 
+msgid "Data storage location for privacy and compliance. This cannot be changed later."
+msgstr "Datalagringsplacering for privatliv og compliance. Dette kan ikke ændres senere."
+
 msgid "Decline"
 msgstr "Afslå"
 
@@ -457,6 +460,9 @@ msgstr "System"
 msgid "Terms of use"
 msgstr "Brugsvilkår"
 
+msgid "The name of your account, shown to users and in email notifications"
+msgstr "Navnet på din konto, vist til brugere og i e-mail-notifikationer"
+
 msgid "Theme"
 msgstr "Tema"
 
@@ -579,6 +585,9 @@ msgstr "Din konto blev skiftet i en anden browsertab."
 msgid "Your account was switched to <0>{newTenantName}</0> in another browser tab."
 msgstr "Din konto blev skiftet til <0>{newTenantName}</0> i en anden browsertab."
 
+msgid "Your professional title or role"
+msgstr "Din professionelle titel eller rolle"
+
 msgid "Your team needs to know who's inviting them. Add an account name to get started."
 msgstr "Dit team skal vide, hvem der inviterer dem. Tilføj et kontonavn for at komme i gang."