docs(modal): updated usage, usability and accessibility

Author: petrinetang

portal/collections/_components/modal.html

@@ -513,14 +513,22 @@ <h2 class="title fw-bold" id="usage-guidelines">Usage guidelines</h2>
     <h2 class="title fw-bold" id="usability-guidelines">
       Usability guidelines
     </h2>
-    <p class="fw-bold mb-0">User triggered</p>
+    <p>
+      <b>User triggered</b><br>
       Modals should always appear as a result of a action that a user has taken like when submitting a application. Modals should not be automatically displayed to the user. Some exceptions to the rule would be if you need to inform users that their session is about to time out or if they have to accept cookies before proceeding.
-      <p class="fw-bold mb-0">Clear heading labels and CTAs</p>
+      </p>
+      <p>
+        <b>Clear heading labels and CTAs</b><br>
       Ensure that the heading and CTAs are clear to the user. This avoids confusion and indicates what action needs to be taken.
-      <p class="fw-bold mb-0">Try to avoid long content with scrolling</p>
+      </p>
+      <p>
+        <b>Try to avoid long content with scrolling</b><br>
       Long content with scrolling limits a user's ability to view the entire message due to the limited space.
-      <p class="fw-bold mb-0">Behaviour</p>
+      </p>
+      <p>
+        <b>Behaviour</b><br>
       Allow users to close the modal by clicking the backdrop (the area outside the modal) and by pressing the Esc key.
+      </p>
   </section>
 
    <!-- Accessibility guidelines Section -->