Merge pull request #3100 from nextcloud/fix/ncmultiselect-accessibility

Improve multiselect
nextcloud-libraries · Aug 30, 2022 · 4c2ecc5 · 4c2ecc5
2 parents 1bea9af + ed81162
commit 4c2ecc5
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 24 deletions.
diff --git a/src/components/NcMultiselect/NcMultiselect.vue b/src/components/NcMultiselect/NcMultiselect.vue
@@ -41,6 +41,14 @@ export default {
  }
 }
 </script>
+
+<style>
+.wrapper {
+ display: flex;
+ gap: 8px;
+ align-items: start;
+}
+</style>
 ```
 
 ### Simple example with objects

diff --git a/src/components/NcMultiselect/index.scss b/src/components/NcMultiselect/index.scss
@@ -16,24 +16,6 @@
  z-index: 2 !important;
  }
 
- // active state, force the input to be shown, we don't want
- // the placeholder or the currently selected options
- &.multiselect--active {
- /* Opened: force display the input */
- input.multiselect__input {
- opacity: $opacity_full !important;
- cursor: text !important;
- // remove border radius on bottom opening
- border-radius: var(--border-radius) var(--border-radius) 0 0;
- display: block !important;
- }
-
- /* multiselect__limit hidden if active */
- .multiselect__limit {
- display: none;
- }
- }
-
  // Remove radius on top opening
  &.multiselect--active.multiselect--above {
  input.multiselect__input {
@@ -65,13 +47,17 @@
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
- border: 1px solid var(--color-border-dark);
+ border: 2px solid var(--color-border-dark);
  cursor: pointer;
  position: relative;
- border-radius: 3px;
- min-height: 34px;
+ border-radius: var(--border-radius-large);
+ min-height: 44px;
  height: 100%;
 
+ &:focus, &:hover {
+ border-color: var(--color-primary);
+ }
+
  /* tag wrapper */
  .multiselect__tags-wrap {
  align-items: center;
@@ -141,6 +127,7 @@
  // Align content and make the flow smoother
  display: flex;
  align-items: center;
+ font-size: var(--default-font-size);
 
  // Anything inside will trigger the select opening
  &, * {
@@ -165,14 +152,33 @@
  position: relative !important;
  margin: 0;
  opacity: 0;
- /* let's leave it on top of tags but hide it */
- height: 100% !important;
  border: none;
  /* override hide to force show the placeholder */
  /* only when not active */
  cursor: pointer;
  /* override inline styling of the lib */
- padding: 7px 6px !important;
+ padding: 7px 4px !important;
+ display: none;
+ font-size: var(--default-font-size);
+ }
+ }
+
+ // active state, force the input to be shown, we don't want
+ // the placeholder or the currently selected options
+ &.multiselect--active {
+ /* Opened: force display the input */
+ input.multiselect__input {
+ opacity: $opacity_full !important;
+ cursor: text !important;
+ // remove border radius on bottom opening
+ border-radius: var(--border-radius) var(--border-radius) 0 0;
+ display: block !important;
+ padding: 12px 15px !important;
+ height: 40px !important;
+ }
+
+ /* multiselect__limit hidden if active */
+ .multiselect__limit {
  display: none;
  }
  }