Relationship editor required field style redux (#2830)

In https://community.metabrainz.org/t/help-test-the-relationship-editor-on-beta-musicbrainz-org/621824 the discussion about how required fields should be displayed seemed to settle around showing both a red highlight (already done) and an asterisk (implemented in this commit, for color blind users if nothing else).
metabrainz · Feb 16, 2023 · 7ed5451 · 7ed5451
1 parent 51b95ca
commit 7ed5451
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 2 deletions.
diff --git a/root/static/scripts/common/components/Autocomplete2.js b/root/static/scripts/common/components/Autocomplete2.js
@@ -753,13 +753,15 @@ const Autocomplete2 = (React.memo(<+T: EntityItemT>(
         aria-expanded={isOpen ? 'true' : 'false'}
         aria-haspopup="listbox"
         aria-owns={menuId}
+        className={state.required ? 'required' : undefined}
         role="combobox"
       >
         <input
           aria-activedescendant={activeDescendant}
           aria-autocomplete="list"
           aria-controls={menuId}
           aria-labelledby={labelId}
+          aria-required={state.required ? 'true' : 'false'}
           autoComplete="off"
           className={
             (

diff --git a/root/static/scripts/relationship-editor/components/DialogPreview.js b/root/static/scripts/relationship-editor/components/DialogPreview.js
@@ -219,7 +219,7 @@ const DialogPreview = (React.memo<PropsT>(({
       ) : newRelationship ? (
         relationshipPreview(newRelationship, 'add-relationship')
       ) : (
-        <p>
+        <p className="required-fields-note">
           {l('Please fill out all required fields.')}
         </p>
       )}

diff --git a/root/static/styles/forms.less b/root/static/styles/forms.less
@@ -217,6 +217,18 @@ div.required {
     font-weight: bold;
 }
 
+/* Used to indicate required fields. */
+.asterisk {
+    content: "*";
+    left: -0.75em;
+    top: -0.25em;
+}
+
+div.required::before {
+    position: absolute;
+    .asterisk();
+}
+
 textarea {
     font-family: sans-serif;
     font-size: @medium-text;

diff --git a/root/static/styles/relationship-editor.less b/root/static/styles/relationship-editor.less
@@ -65,7 +65,7 @@ div.relationship-dialog, div.work-dialog {
             vertical-align: top;
             text-align: right;
             width: 25%;
-            padding-right: 0.5em;
+            padding-right: 0.75em;
             &.required {font-weight: bold;}
         }
         td.fields {
@@ -128,6 +128,7 @@ div.relationship-dialog {
     input[type="checkbox"] {
         vertical-align: middle;
     }
+    p.required-fields-note::before { .asterisk(); }
     div.buttons {
         width: 100%;
     }