Uses legend element instead of div

springernature · Feb 16, 2022 · 00bcca7 · 00bcca7
1 parent 9a802f3
commit 00bcca7
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git a/toolkits/nature/packages/nature-sort-by/demo/dist/index.html b/toolkits/nature/packages/nature-sort-by/demo/dist/index.html
@@ -1293,6 +1293,7 @@
   }
 
   .c-sort-by__heading {
+    float: left;
     margin-bottom: 0;
   }
 
@@ -1899,7 +1900,7 @@
 	<body style="padding:2%">
 		<form action="/" method="post">
 	<fieldset class="c-sort-by" data-sort-by="">
-		<div class="c-sort-by__heading">Sort by:</div>
+		<legend class="c-sort-by__heading">Sort by:</legend>
 		<div class="c-sort-by__input-container">
 			<input class="c-sort-by__input" data-sort-by-input="" name="order" value="relevance" id="sort-by-relevance" type="radio">
 			<label class="c-sort-by__label" for="sort-by-relevance">Relevance</label>
@@ -1957,7 +1958,7 @@
 
 	function addInputListeners(inputs, submitButton) {
 	  inputs.forEach(function (input) {
-	    input.addEventListener('change', function (event) {
+	    input.addEventListener('change', function () {
 	      submitButton.click();
 	    });
 	  });

diff --git a/toolkits/nature/packages/nature-sort-by/scss/50-components/sort-by.scss b/toolkits/nature/packages/nature-sort-by/scss/50-components/sort-by.scss
@@ -36,6 +36,7 @@
 	}
 
 	.c-sort-by__heading {
+		float: left; // needed because browsers have special rendering rules for legend elements: https://stackoverflow.com/questions/5818960/why-wont-my-legend-element-display-inline
 		margin-bottom: 0;
 	}
 

diff --git a/toolkits/nature/packages/nature-sort-by/view/sort-by.hbs b/toolkits/nature/packages/nature-sort-by/view/sort-by.hbs
@@ -1,5 +1,5 @@
 <fieldset class="c-sort-by" data-sort-by>
-	<div class="c-sort-by__heading">Sort by:</div>
+	<legend class="c-sort-by__heading">Sort by:</legend>
 	{{#each sortOrderFilter as |listElement|}}
 	<div class="c-sort-by__input-container">
 		<input class="c-sort-by__input" data-sort-by-input name="{{listElement.name}}" value="{{listElement.value}}" id="sort-by-{{listElement.value}}" type="radio" {{#if listElement.checked}}checked{{/if}}>
-Original file line number
+Diff line change
@@ Expand Up / @@ -36,6 +36,7 @@ @@
     	}
     	.c-sort-by__heading {
+    		float: left; // needed because browsers have special rendering rules for legend elements: https://stackoverflow.com/questions/5818960/why-wont-my-legend-element-display-inline
     		margin-bottom: 0;
     	}
@@ Expand Down @@