Lmendoza/9306 notification email frequency account settings v2

src/app/account-settings/components/settings-defaults-email-frequency/settings-defaults-email-frequency.component.html

@@ -11,13 +11,22 @@
       occasionally send you emails with service messages relating to your ORCID
       account. As the information in these emails may affect your privacy
       settings and the functioning of your ORCID account, you cannot opt-out of
-      these service messages per our Privacy Policy
+      these service messages per our
     </i>
+    <a
+      class="underline black-url underline"
+      i18n="@@account.privacypolicy"
+      href="/privacy-policy"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      Privacy Policy
+    </a>
   </p>
 
-  <h3 class="orc-font-body" i18n="@@account.notificationEmailAddress">
+  <h4 class="orc-font-body" i18n="@@account.notificationEmailAddress">
     Notification email address
-  </h3>
+  </h4>
   <p class="margin-bottom-16" i18n="@@account.yourOrcidNotification">
     Your ORCID notification emails will be sent to:
   </p>
@@ -29,6 +38,7 @@ <h3 class="orc-font-body" i18n="@@account.notificationEmailAddress">
         cdkDragHandle
         src="./assets/vectors/email-verified-icon.svg"
         aria-labelledby="email-verified-address"
+        height="32"
       />
       <img
         *ngIf="!primaryEmailVerified"
@@ -56,7 +66,7 @@ <h3 class="orc-font-body" i18n="@@account.notificationEmailAddress">
         </caption>
       </div>
     </div>
-    <div>
+    <div class="email-manage-emails-link">
       <button
         mat-icon-button
         (click)="openEmailModal()"
@@ -76,20 +86,30 @@ <h3 class="orc-font-body" i18n="@@account.notificationEmailAddress">
   </div>
 
   <div class="row">
-    <label class="row">
-      <strong i18n="@@account.emailFrequency">Email frequency</strong>
-    </label>
-    <p class="margin-bottom-16 row" i18n="@@account.howOftenShouldWeSend">
+    <h4 class="orc-font-body" i18n="@@account.emailFrequency">
+      Email frequency
+    </h4>
+    <p
+      class="margin-bottom-16 row margin-top-0"
+      i18n="@@account.howOftenShouldWeSend"
+      id="email-frequency"
+    >
       How often should we send you ORCID notification emails about:
     </p>
-    <p class="margin-bottom-16 row" i18n="@@account.itemsAddedOrEdited">
+    <p
+      class="margin-bottom-8 row margin-top-0"
+      i18n="@@account.itemsAddedOrEdited"
+    >
       Items added or edited in your record by a trusted party
     </p>
     <mat-form-field
       appearance="outline"
       class="mat-form-field-min input-container"
     >
-      <mat-select formControlName="sendChangeNotifications">
+      <mat-select
+        formControlName="sendChangeNotifications"
+        [aria-label]="arialabelSetTheFrequency"
+      >
         <mat-option
           *ngFor="let frequency of frequencyOption"
           [value]="emailFrequenciesValues[frequency]"
@@ -101,17 +121,20 @@ <h3 class="orc-font-body" i18n="@@account.notificationEmailAddress">
   </div>
 
   <div class="row">
-    <p
-      class="margin-bottom-16 row"
+    <label
+      class="margin-bottom-8 row"
       i18n="@@account.administrativeChangesSuchAs"
     >
       Adminstrative changes, such as being made a trusted individual
-    </p>
+    </label>
     <mat-form-field
       appearance="outline"
       class="mat-form-field-min input-container"
     >
-      <mat-select formControlName="sendAdministrativeChangeNotifications">
+      <mat-select
+        formControlName="sendAdministrativeChangeNotifications"
+        [aria-label]="ariaLabelSetTheFrequencyAdministrative"
+      >
         <mat-option
           *ngFor="let frequency of frequencyOption"
           [value]="emailFrequenciesValues[frequency]"
@@ -123,17 +146,17 @@ <h3 class="orc-font-body" i18n="@@account.notificationEmailAddress">
   </div>
 
   <div class="row">
-    <label class="row">
-      <strong i18n="@@account.orcidMembers"
-        >ORCID members wanting your permission to automatically update your
-        record</strong
-      >
+    <label class="row" i18n="@@account.orcidMembers">
+      ORCID members wanting your permission to automatically update your record
     </label>
     <mat-form-field
       appearance="outline"
       class="mat-form-field-min input-container"
     >
-      <mat-select formControlName="sendMemberUpdateRequests">
+      <mat-select
+        formControlName="sendMemberUpdateRequests"
+        [aria-label]="ariaLabelSetTheFrequencyPermission"
+      >
         <mat-option
           *ngFor="let frequency of frequencyOption"
           [value]="emailFrequenciesValues[frequency]"
@@ -144,10 +167,13 @@ <h3 class="orc-font-body" i18n="@@account.notificationEmailAddress">
     </mat-form-field>
   </div>
 
-  <h3 class="orc-font-body" i18n="@@account.tipsAndFeatures">
+  <h4
+    class="orc-font-body margin-top-0 margin-bottom-16"
+    i18n="@@account.tipsAndFeatures"
+  >
     Tips & features email
-  </h3>
-  <p i18n="@@account.weOccasionallySend">
+  </h4>
+  <p i18n="@@account.weOccasionallySend" class="margin-bottom-32">
     We occasionally send out an email with information on new features and tips
     for getting the best out of your ORCID record.
   </p>

src/app/account-settings/components/settings-defaults-email-frequency/settings-defaults-email-frequency.component.scss

@@ -53,6 +53,7 @@ mat-checkbox {
   .email-container {
     display: flex;
     gap: 16px;
+    align-items: center;
     label {
       font-weight: bold;
     }
@@ -62,4 +63,32 @@ mat-checkbox {
       display: flex;
     }
   }
+  .email-manage-emails-link {
+    padding-right: 16px;
+  }
 }
+
+h4 {
+  margin-top: 32px;
+  margin-bottom: 8px;
+}
+
+#email-verified-address {
+  margin-top: 2px;
+}
+
+.margin-top-0 {
+  margin-top: 0;
+}
+
+.margin-bottom-16 {
+  margin-bottom: 16px;
+}
+
+.margin-bottom-8 {
+  margin-bottom: 8px;
+}
+
+.margin-bottom-32 {
+  margin-bottom: 32px;
+}

src/app/account-settings/components/settings-defaults-email-frequency/settings-defaults-email-frequency.component.ts

@@ -42,6 +42,10 @@ export class SettingsDefaultsEmailFrequencyComponent
   form: UntypedFormGroup
   primaryEmail: string
   primaryEmailVerified: string
+
+  arialabelSetTheFrequency = $localize`:@@account.setTheFrequency:Set the frequency for update notifications`
+  ariaLabelSetTheFrequencyAdministrative = $localize`:@@account.setTheFrequencyAdministrative:Set the frequency for administrative change notifications`
+  ariaLabelSetTheFrequencyPermission = $localize`:@@account.setTheFrequencyMember:Set the frequency for permission request notifications`
   @Output() loading = new EventEmitter<boolean>()
 
   constructor(

src/app/account-settings/components/settings-defaults/settings-defaults.component.ts

@@ -13,7 +13,7 @@ export class SettingsDefaultsComponent implements OnInit {
   visibilityFrequencyLoading = false
   visibilityExpanded = false
   languageExpanded = false
-  titleEmailFrequency = $localize`:@@account.emailFrequency:Email frequency`
+  titleEmailFrequency = $localize`:@@account.emailFrequency:Notification email frequency`
   titleLanguage = $localize`:@@account.language:Language`
   titleVisibility = $localize`:@@account.visibility:Visibility`
 

src/locale/properties/account/account.en.properties

@@ -199,7 +199,7 @@ account.scopePathType.readLimited=Read your information with visibility set to T
 account.scopePathType.readPublic=Read public info only
 account.scopePathType.webhook=Notifies Application if there are changes to your record
 account.notifications=Notifications keep you up-to-date with activity in your ORCID record. Updates are automatically sent to your ORCID inbox but you can also have them sent to you by email. You can choose the kind of notifications you wish to receive by email and how often you want to receive them
-account.inAdditionToTheOptional=In addition to the optional account and record notifications, we may occasionally send you emails with service messages relating to your ORCID account. As the information in these emails may affect your privacy settings and the functioning of your ORCID account, you cannot opt-out of these service messages per our Privacy Policy
+account.inAdditionToTheOptional=In addition to the optional account and record notifications, we may occasionally send you emails with service messages relating to your ORCID account. As the information in these emails may affect your privacy settings and the functioning of your ORCID account, you cannot opt-out of these service messages per our
 account.notificationEmailAddress=Notification email address
 account.yourOrcidNotification=Your ORCID notification emails will be sent to:
 account.unverifiedEmailAddress=Unverified email address
@@ -209,3 +209,8 @@ account.howOftenShouldWeSend=How often should we send you ORCID notification ema
 account.administrativeChangesSuchAs=Adminstrative changes, such as being made a trusted individual
 account.tipsAndFeatures=Tips & features email
 account.idLikeToReceiveTheOrcidTips=I’d like to receive the ORCID tips & features email
+account.privacypolicy=Privacy Policy
+account.setTheFrequency=Set the frequency for update notifications
+account.setTheFrequencyAdministrative=Set the frequency for administrative change notifications
+account.setTheFrequencyMember=Set the frequency for permission request notifications
+