Merge branch 'main' of github.com:w3c/wai-wcag-em-report-tool into main

w3c · Jul 1, 2021 · 1ab52d8 · 1ab52d8
2 parents 1cd891d + 09031e2
commit 1ab52d8
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 10 deletions.
diff --git a/src/components/form/EarlResult.svelte b/src/components/form/EarlResult.svelte
@@ -34,8 +34,9 @@
       label="{$translate('PAGES.AUDIT.ASSERTION_RESULT_DESCRIPTION_LABEL')}"
       bind:value="{_assertion.result.description}"
       on:change="{handleResultChange}"
+      className="Criterion__Observation"
     >
-      <span slot="before-textarea" class="view-in-report">
+      <span slot="after-textarea" class="view-in-report">
       <Link to={`/evaluation/view-report#criterion-${_assertion.test.num.replaceAll('.', '')}`}>{TRANSLATED.VIEW_IN_REPORT}</Link>
       </span>
     </Textarea>
@@ -56,15 +57,22 @@
   .Criterion__Fields {
     display: flex;
     gap: 2rem;
+    align-items: flex-start;
   }
+  .view-in-report {
+    order: -1;
+    text-align: right;
+  }
+  /* the following selectors are overly specific for cascading reasons */
   :global(.Criterion__Fields :last-child) {
     flex: 2;
   }
-  :global(.Criterion__Fields :last-child label) {
-    float: left;
+  :global(div.Criterion__Fields .Field:last-child label) {
+    order: -2;
   }
-  .view-in-report {
-    float: right;
+  :global(div.Criterion__Fields div.Field.Criterion__Observation) {
+    flex-direction: row;
+    flex-wrap: wrap;
   }
 </style>
 

diff --git a/src/components/form/Field.svelte b/src/components/form/Field.svelte
@@ -1,4 +1,5 @@
-<div class="Field">
+<div class={`${className} Field`}>
+  <slot />
   {#if helptext}
     <HelpText
       labelHTML="{label && `<label for="${id}">${label}</label>`}"
@@ -7,18 +8,23 @@
       {@html helptext}
     </HelpText>
   {:else if label}<label for="{id}">{label}:</label>{/if}
-
-  <slot />
 </div>
 
 <style>
   .Field {
     padding: 0;
     margin-bottom: 2rem;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
   }
   .Field label {
     display: block;
   }
+  .Field label,
+  :global(.Field .HelpText) {
+    order: -1;
+  }
   :global(.Field input) {
     width: 100%;
   }
@@ -33,4 +39,5 @@
   export let id;
   export let label;
   export let helptext = "";
+  export let className = "";
 </script>
diff --git a/src/components/form/Textarea.svelte b/src/components/form/Textarea.svelte
@@ -1,6 +1,6 @@
-<Field {id} {label} {helptext}>
-  <slot name="before-textarea"></slot>
+<Field {id} {label} {helptext} {className}>
   <textarea id="{id}" rows="5" bind:value on:change></textarea>
+  <slot name="after-textarea"></slot>
 </Field>
 
 <style>
@@ -17,4 +17,5 @@
   export let label;
   export let helptext = "";
   export let value = "";
+  export let className = "";
 </script>