feat #113 (quantity selector): refactoring

Orange-OpenSource · Nov 29, 2021 · 65510a5 · 65510a5
1 parent 6873248
commit 65510a5
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 32 deletions.
diff --git a/scss/forms/_quantity-selector.scss b/scss/forms/_quantity-selector.scss
@@ -5,23 +5,34 @@
   &.quantity-selector-small .input-group {
     width: 5.625em;
   }
-  input {
-    padding: 0;
-    text-align: center;
 
-    &:read-only {
-      background-color: #fff;
-      appearance: textfield;
-    }
+  .input-group {
 
-    &::-webkit-inner-spin-button,
-    &::-webkit-outer-spin-button {
+    & > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
       margin: 0;
-      -webkit-appearance: none;
     }
+
+    input {
+      padding: 0;
+      text-align: center;
+      appearance: textfield;
+
+      &:not(:focus) {
+        border-right: none;
+        border-left: none;
+      }
+
+      &::-webkit-inner-spin-button,
+      &::-webkit-outer-spin-button {
+        margin: 0;
+        appearance: none;
+      }
+    }
+
   }
+
   button {
-    border: .125rem solid #ccc;
+    border: .125rem solid $gray-500;
     &:first-of-type {
       order: -1;
       border-right: none;
@@ -30,9 +41,4 @@
       border-left: none;
     }
   }
-  .form-control {
-    &:not(:focus, :invalid) {
-      border-left: none;
-    }
-  }
 }
diff --git a/site/content/docs/5.1/forms/quantity-selector.md b/site/content/docs/5.1/forms/quantity-selector.md
@@ -19,38 +19,38 @@ The custom `data-bs-round` attribute will help you to define the number of digit
 <div class="quantity-selector quantity-selector-large">
     <label class="input-group-text" for="inputQuantitySelector1">Quantity selector large: </label>
     <div class="input-group">
-        <input type="number" id="inputQuantitySelector1" class="form-control"
-            data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector" readonly>
-        <button type="button" class="btn btn-icon btn-secondary" data-bs-step="down">
-            <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1">
+        <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite"
+            data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">
+        <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">
+            <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false">
                 <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#remove" />
             </svg>
-            <span class="visually-hidden">Step up</span>
+            <span class="visually-hidden">Step down</span>
         </button>
-        <button type="button" class="btn btn-icon btn-secondary" data-bs-step="up">
-            <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1">
+        <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">
+            <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false">
                 <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#add" />
             </svg>
-            <span class="visually-hidden">Step down</span>
+            <span class="visually-hidden">Step up</span>
         </button>
     </div>
 </div>
 <div class="quantity-selector quantity-selector-small">
     <label class="input-group-text" for="inputQuantitySelector2">Quantity selector small: </label>
     <div class="input-group">
-        <input type="number" id="inputQuantitySelector2" class="form-control"
-            data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector" readonly>
-        <button type="button" class="btn btn-icon btn-secondary btn-sm" data-bs-step="down">
-            <svg width="1rem" height="1rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1">
+        <input type="number" id="inputQuantitySelector2" class="form-control" aria-live="polite"
+            data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">
+        <button type="button" class="btn btn-icon btn-secondary btn-sm"  aria-describedby="inputQuantitySelector2" data-bs-step="down">
+            <svg width="1rem" height="1rem" fill="currentColor" aria-hidden="true" focusable="false">
                 <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#remove" />
             </svg>
-            <span class="visually-hidden">Step up</span>
+            <span class="visually-hidden">Step down</span>
         </button>
-        <button type="button" class="btn btn-icon btn-secondary btn-sm" data-bs-step="up">
-            <svg width="1rem" height="1rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1">
+        <button type="button" class="btn btn-icon btn-secondary btn-sm"  aria-describedby="inputQuantitySelector2" data-bs-step="up">
+            <svg width="1rem" height="1rem" fill="currentColor" aria-hidden="true" focusable="false">
                 <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#add" />
             </svg>
-            <span class="visually-hidden">Step down</span>
+            <span class="visually-hidden">Step up</span>
         </button>
     </div>
 </div>