Add field description for comma-separated fields (#66)

bact · web-flow · commit d9338418a867 · 2025-10-05T06:30:50.000+02:00
- Add field description for 4 more fields: keywords, programmingLanguage, runtimePlatform, and operatingSystem, based on separator value at `splittedCodemetaFields`: https://github.com/codemeta/codemeta-generator/blob/41ef64885a97cdccd15de3261483e640c897317c/js/codemeta_generation.js#L101-L107 - Add missing aria-describedby attribute for relatedLink and softwareRequirements labels - Minor casing fix: - Make casing of labels consistent - using "Title case" (uppercase at first letter of first word only), like the majority of the labels. - "SPDX licence list" -> "SPDX License List": from its webpage, looks like a proper noun (from its Caps Spelling in every instances)
diff --git a/index.html b/index.html
@@ -50,38 +50,37 @@ <h1>CodeMeta generator v3.0</h1>
                 <span class="field-description" id="name_descr">the software title</span>
             </p>
 
-            <p title="a brief description of the software">
+            <p title="A brief description of the software">
                 <label for="description">Description</label>
                 <textarea rows="4" cols="50"
                     name="description" id="description"
                     placeholder="My Software computes ephemerides and orbit propagation. It has been developed from early ´80." ></textarea>
             </p>
 
 
-            <p title="The date on which the software was created.">
+            <p title="The date on which the software was created">
                 <label for="dateCreated">Creation date</label>
                 <input type="text" name="dateCreated" id="dateCreated"
                     placeholder="YYYY-MM-DD" pattern="\d{4}-\d{2}-\d{2}" />
             </p>
 
-            <p title="Date of first publication.">
+            <p title="Date of first publication">
                 <label for="datePublished">First release date</label>
                 <input type="text" name="datePublished" id="datePublished"
                     placeholder="YYYY-MM-DD" pattern="\d{4}-\d{2}-\d{2}" />
             </p>
 
-            <p>
+            <p title="License(s) under which the software is published">
                 <label for="license">License(s)</label>
                 <input list="licenses" name="license" id="license"
                     aria-describedby="licenses_descr"> <!-- TODO: insert placeholder -->
 
                 <datalist id="licenses">
                 </datalist>
-                <!-- This datalist is be filled automatically -->
+                <!-- This datalist is to be filled automatically -->
 
                 <br />
-                <span class="field-description" id="licenses_descr">from <a href="https://spdx.org/licenses/">SPDX licence list</a></span>
-
+                <span class="field-description" id="licenses_descr">from <a href="https://spdx.org/licenses/">SPDX License List</a>; select from the list, one by one</span>
                 <div id="selected-licenses">
                     <!-- This div is to be filled as the user selects licenses -->
                 </div>
@@ -98,7 +97,7 @@ <h1>CodeMeta generator v3.0</h1>
 
                 <br />
                 <span class="field-description" id="identifier_descr">
-                    such as ISBNs, GTIN codes, UUIDs etc..  <a href="http://schema.org/identifier">http://schema.org/identifier</a>
+                    such as ISBNs, GTIN codes, UUIDs, etc. see <a href="http://schema.org/identifier">http://schema.org/identifier</a>
                 </span>
             </p>
             <!-- TODO:define better
@@ -125,7 +124,9 @@ <h1>CodeMeta generator v3.0</h1>
             <p title="Comma-separated list of keywords">
                 <label for="keywords">Keywords</label>
                 <input type="text" name="keywords" id="keywords"
-                    placeholder="ephemerides, orbit, astronomy"  />
+                    placeholder="ephemerides, orbit, astronomy"
+                    aria-describedby="keywords_descr" />
+                <span class="field-description" id="keywords_descr">separated by commas (<code>,</code>)</span>
             </p>
 
             <p title="Funding / grant">
@@ -152,19 +153,19 @@ <h1>CodeMeta generator v3.0</h1>
         <fieldset id="fieldsetDevelopmentCommunity" class="leafFieldset">
             <legend>Development community / tools</legend>
 
-            <p title="Link to the repository where the un-compiled, human readable code and related code is located (SVN, Git, GitHub, CodePlex, institutional GitLab instance, etc.).">
+            <p title="Link to the repository where the un-compiled, human readable code and related code is located (SVN, Git, GitHub, CodePlex, institutional GitLab instance, etc.)">
                 <label for="codeRepository">Code repository</label>
                 <input type="URL" name="codeRepository" id="codeRepository"
                     placeholder="git+https://github.com/You/RepoName.git" />
             </p>
 
-            <p title="Link to continuous integration service (Travis-CI, Gitlab CI, etc.).">
+            <p title="Link to continuous integration service (Travis-CI, Gitlab CI, etc.)">
                 <label for="contIntegration">Continuous integration</label>
                 <input type="URL" name="contIntegration" id="contIntegration"
                     placeholder="https://travis-ci.org/You/RepoName" />
             </p>
 
-            <p title="Link to a place for users/developpers to report and manage bugs (JIRA, GitHub issues, etc.).">
+            <p title="Link to a place for users/developpers to report and manage bugs (JIRA, GitHub issues, etc.)">
                 <label for="issueTracker">Issue tracker</label>
                 <input type="URL" name="issueTracker" id="issueTracker"
                     placeholder="https://github.com/You/RepoName/issues" />
@@ -175,40 +176,50 @@ <h1>CodeMeta generator v3.0</h1>
                 <br />
                 <textarea rows="4" cols="50"
                     name="relatedLink" id="relatedLink"
-                    placeholder="https://www.example.com"></textarea>
+                    placeholder=
+"https://www.example.com
+https://www.example.org"
+                    aria-describedby="relatedLink_descr"></textarea>
                 <span class="field-description" id="relatedLink_descr">URL(s), one URL per line</span>
             </p>
         </fieldset>
 
         <fieldset id="fieldsetRuntime" class="leafFieldset">
             <legend>Run-time environment</legend>
 
-            <p title="Programming Languages, separated by commas">
-                <label for="programmingLanguage">Programming Language</label>
+            <p title="Programming languages, separated by commas">
+                <label for="programmingLanguage">Programming language</label>
                 <input type="text" name="programmingLanguage" id="programmingLanguage"
-                    placeholder="C#, Java, Python 3"  />
+                    placeholder="C#, Java, Python 3"
+                    aria-describedby="programmingLanguage_descr" />
+                <span class="field-description" id="programmingLanguage_descr">separated by commas (<code>,</code>)</span>
             </p>
 
-            <p title="Runtime Platforms, separated by commas">
-                <label for="runtimePlatform">Runtime Platform</label>
+            <p title="Runtime platforms, separated by commas">
+                <label for="runtimePlatform">Runtime platform</label>
                 <input type="text" name="runtimePlatform" id="runtimePlatform"
-                    placeholder=".NET, JVM" />
+                    placeholder=".NET, JVM"
+                    aria-describedby="runtimePlatform_descr" />
+                <span class="field-description" id="runtimePlatform_descr">separated by commas (<code>,</code>)</span>
             </p>
 
-            <p title="Operating Systems, separated by commas">
-                <label for="operatingSystem">Operating System</label>
+            <p title="Operating systems, separated by commas">
+                <label for="operatingSystem">Operating system</label>
                 <input type="text" name="operatingSystem" id="operatingSystem"
-                    placeholder="Android 1.6, Linux, Windows, macOS" />
+                    placeholder="Android 1.6, Linux, Windows, macOS"
+                    aria-describedby="operatingSystem_descr" />
+                <span class="field-description" id="operatingSystem_descr">separated by commas (<code>,</code>)</span>
             </p>
 
-            <p title="Required software to run/use this one.">
+            <p title="Required software to run/use this one">
                 <label for="softwareRequirements">Other software requirements</label>
                 <br />
                 <textarea rows="4" cols="50"
                     name="softwareRequirements" id="softwareRequirements"
                     placeholder=
 "https://www.python.org/downloads/release/python-3130/
-https://github.com/psf/requests"></textarea>
+https://github.com/psf/requests"
+                    aria-describedby="softwareRequirements_descr"></textarea>
                 <span class="field-description" id="softwareRequirements_descr">URL(s), one URL per line</span>
             </p>
         </fieldset>
@@ -222,7 +233,7 @@ <h1>CodeMeta generator v3.0</h1>
                     placeholder="1.0.0" />
             </p>
 
-            <p title="The date on which the software was most recently modified.">
+            <p title="The date on which the software was most recently modified">
                 <label for="dateModified">Release date</label>
                 <input type="text" name="dateModified" id="dateModified"
                     placeholder="YYYY-MM-DD" pattern="\d{4}-\d{2}-\d{2}" />
@@ -252,7 +263,7 @@ <h1>CodeMeta generator v3.0</h1>
             <legend>Editorial review</legend>
 
             <p title="Scholarly article describing this software">
-                <label for="referencePublication">Reference Publication</label>
+                <label for="referencePublication">Reference publication</label>
                 <input type="URL" name="referencePublication" id="referencePublication"
                     placeholder="https://doi.org/10.1000/xyz123" />
             </p>
@@ -272,10 +283,10 @@ <h1>CodeMeta generator v3.0</h1>
         </fieldset>
 
         <fieldset id="fieldsetAdditionalInfo" class="leafFieldset">
-            <legend>Additional Info</legend>
+            <legend>Additional information</legend>
 
-            <p title="Development Status">
-            <label for="developmentStatus">Development Status</label>
+            <p title="Development status">
+            <label for="developmentStatus">Development status</label>
                 <datalist id="developmentStatuses">
                         <option value="concept">
                         <option value="wip">
@@ -295,16 +306,16 @@ <h1>CodeMeta generator v3.0</h1>
                 </span>
             </p>
 
-            <p title="Source Code of">
-                <label for="isSourceCodeOf">Is Source Code of</label>
+            <p title="Source code of">
+                <label for="isSourceCodeOf">Is source code of</label>
                 <input type="text" name="isSourceCodeOf" id="isSourceCodeOf"
                     placeholder="Bigger Application" />
             </p>
 
             <p title="Part of">
                 <label for="isPartOf">Is part of</label>
                 <input type="URL" name="isPartOf" id="isPartOf"
-                    placeholder="http://The.Bigger.Framework.org"  />
+                    placeholder="http://The.Bigger.Framework.org" />
             </p>
         </fieldset>
 
@@ -339,17 +350,17 @@ <h1>CodeMeta generator v3.0</h1>
     </form>
     <form>
         <input type="button" id="generateCodemetaV3" value="Generate codemeta.json v3.0" disabled
-            title="Creates a codemeta.json v3.0 file below, from the information provided above." />
+            title="Creates a codemeta.json v3.0 file below, from the information provided above" />
         <input type="button" id="generateCodemetaV2" value="Generate codemeta.json v2.0" disabled
-            title="Creates a codemeta.json v2.0 file below, from the information provided above." />
+            title="Creates a codemeta.json v2.0 file below, from the information provided above" />
         <input type="button" id="resetForm" value="Reset form"
-            title="Erases all fields." />
+            title="Erases all fields above" />
         <input type="button" id="validateCodemeta" value="Validate codemeta.json" disabled
-            title="Checks the codemeta.json file below is valid, and displays errors." />
+            title="Checks the codemeta.json file below is valid, and displays errors" />
         <input type="button" id="importCodemeta" value="Import codemeta.json" disabled
-            title="Fills the fields above based on the codemeta.json file below." />
+            title="Fills the fields above based on the codemeta.json file below" />
         <a id="downloadCodemeta"><input type="button" value="Download codemeta.json" disabled
-                  title="Download the codemeta.json file as displayed below." /></a>
+            title="Download the codemeta.json file as displayed below" /></a>
     </form>
 
     <p id="errorMessage">
