From e725704d512c175fb2633fac65c990ea82176ec0 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Wed, 4 Nov 2020 10:49:27 -0500
Subject: [PATCH] =?UTF-8?q?chore:=20=F0=9F=A4=96=20wrap=20grant=20scope=20?=
 =?UTF-8?q?in=20fieldset=20with=20legend?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/core/app/components/form/role/index.hbs | 60 +++++++++++-----------
 ui/core/app/styles/app.scss                |  8 +++
 2 files changed, 39 insertions(+), 29 deletions(-)

diff --git a/ui/core/app/components/form/role/index.hbs b/ui/core/app/components/form/role/index.hbs
index 2b94423a5..ac5d4af80 100644
--- a/ui/core/app/components/form/role/index.hbs
+++ b/ui/core/app/components/form/role/index.hbs
@@ -44,43 +44,45 @@
     {{/if}}
   </form.textarea>
 
-  <form.radioGroup @name="grant_scope_id" @selectedValue={{@model.grant_scope_id}} as |radioGroup|>
-    <Rose::Dropdown
-      @text={{concat (t "form.grant_scope.label") ": " this.selectedGrantScope.displayName}}
-      aria-describedby="helper-text-grant-scope"
-    as |dropdown|>
-      {{#each @grantScopes as |grantScope|}}
-        <dropdown.item>
-          <radioGroup.radio
-            @label={{grantScope.model.displayName}}
-            @value={{grantScope.model.id}}
-          />
-        </dropdown.item>
-        {{#each grantScope.subScopes as |subScope|}}
-          <dropdown.item class="indent-1">
+  <fieldset
+    aria-labelledby="legend-text-grant-scope"
+    aria-describedby="helper-text-grant-scope"
+  >
+    <legend id="legend-text-grant-scope">{{t "form.grant_scope.label"}}</legend>
+    <Rose::Form::HelperText @id="helper-text-grant-scope" @error={{@model.errors.grant_scope_id}}>
+      {{t "form.grant_scope.help"}}
+    </Rose::Form::HelperText>
+    <form.radioGroup @name="grant_scope_id" @selectedValue={{@model.grant_scope_id}} as |radioGroup|>
+      <Rose::Dropdown
+        @text={{concat (t "form.grant_scope.label") ": " this.selectedGrantScope.displayName}}
+      as |dropdown|>
+        {{#each @grantScopes as |grantScope|}}
+          <dropdown.item>
             <radioGroup.radio
-              @label={{subScope.model.displayName}}
-              @value={{subScope.model.id}}
+              @label={{grantScope.model.displayName}}
+              @value={{grantScope.model.id}}
             />
           </dropdown.item>
-          {{#each subScope.subScopes as |subSubScope|}}
-            <dropdown.item class="indent-2">
+          {{#each grantScope.subScopes as |subScope|}}
+            <dropdown.item class="indent-1">
               <radioGroup.radio
-                @label={{subSubScope.displayName}}
-                @value={{subSubScope.id}}
+                @label={{subScope.model.displayName}}
+                @value={{subScope.model.id}}
               />
             </dropdown.item>
+            {{#each subScope.subScopes as |subSubScope|}}
+              <dropdown.item class="indent-2">
+                <radioGroup.radio
+                  @label={{subSubScope.displayName}}
+                  @value={{subSubScope.id}}
+                />
+              </dropdown.item>
+            {{/each}}
           {{/each}}
         {{/each}}
-      {{/each}}
-    </Rose::Dropdown>
-    <Rose::Form::HelperText @id="helper-text-grant-scope" @error={{@model.errors.grant_scope_id}}>
-      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {{t "form.grant_scope.help"}}
-    </Rose::Form::HelperText>
-  </form.radioGroup>
-
-  <br>
-  <br>
+      </Rose::Dropdown>
+    </form.radioGroup>
+  </fieldset>
 
   <form.actions
     @disabled={{if @model.cannotSave @model.cannotSave}}
diff --git a/ui/core/app/styles/app.scss b/ui/core/app/styles/app.scss
index 5de632e91..ec5800859 100644
--- a/ui/core/app/styles/app.scss
+++ b/ui/core/app/styles/app.scss
@@ -54,6 +54,14 @@
       }
     }
   }
+
+  fieldset {
+    margin-bottom: sizing.rems(m);
+
+    legend {
+      @extend .rose-form-label;
+    }
+  }
 }
 
 .rose-table {