@madgex/design-system 3.0.8 → 3.0.9

package/package.json

@@ -2,7 +2,7 @@
   "name": "@madgex/design-system",
   "author": "Madgex",
   "license": "UNLICENSED",
-  "version": "3.0.8",
+  "version": "3.0.9",
   "scripts": {
     "clean": "rimraf dist public tokens/build",
     "commit": "commit",

package/src/components/inputs/_form-elements.scss

@@ -23,7 +23,7 @@
 .mds-form-label__required {
   color: $mds-color-status-error-dark;
   top: 0;
-  width: $mds-font-size-base / 2;
+  width: math.div($mds-font-size-base, 2);
   margin-left: $mds-size-baseline;
 }
 .mds-form-label__tooltip {

package/src/components/inputs/combobox/README.md

@@ -2,7 +2,6 @@
 
 - `id`: the id of your combobox
 - `name`: the name of the input for form submission. Uses ID unless specified - _optional_
-- `resultMessage`: to be used as a prop for the Vue component below, will not be used if Javascript is not available
 - `labelText`: the text used in the label
 - `options`: a json object of key, value pairs e.g { 45: 'Orange' }. To be used when falling back to a native select if Javascript is not available
 - `value`: a default selected value for the input - _optional_
@@ -20,7 +19,6 @@
 - `comboboxid`: the id of your combobox. Populated automatically from Nunjucks parameters
 - `labeltext`: the text used in the label. Populated automatically from Nunjucks parameters
 - `placeholder`: the placeholder for your input. Populated automatically from Nunjucks parameters
-- `resultmessage`: the visually hidden message to inform screenreader users when the options in the listbox have changed. Can either be a string which will be prefixed with the number of options, or a function which takes the number of options as its parameter and which should return a string. Defaults to 'options available', populated automatically from Nunjucks parameters if passed in
 - `name`: the name of the input for form submission. Will only be populated automatically if fallbackTo is 'input'
 - `value`: a default value for the combobox input. Populated automatically from Nunjucks parameters
 - `options`: an array of options, which should be objects with a `label` and a `value`. The array should be provided externally by selecting the custom `<mds-combobox>` element and setting it as an attribute
@@ -33,3 +31,5 @@ The Vue component is a [WAI-ARIA 1.0 combobox](https://www.w3.org/TR/wai-aria-pr
 NB. The AJAX demo above currently only works in browsers, not <= IE11. Fetch will be polyfilled or replaced in due course.
 
 When Javascript is not available, either a native combobox or native input will be available as a fallback.
+
+aria-describedBy has been added to notify screen reader users how to interact with the autocomplete suggestions.

package/src/components/inputs/combobox/_template.njk

@@ -20,14 +20,6 @@
   {% set comboboxName = comboboxId %}
 {% endif %}
 
-{%- set placeholder %}
-{%- if params.placeholder -%}
-  {{ params.placeholder }}
-{%- else -%}
-    Please select
-  {%- endif -%}
-{% endset -%}
-
 {%- set labelId %}{{comboboxId}}-label{% endset -%}
 
 {%- if comboboxId -%}
@@ -60,8 +52,8 @@
       {% endif %}
     </div>
     {# Leave the custom element at the bottom so it has access to the above elements on render #}
-    <mds-combobox comboboxid="{{ comboboxId }}" placeholder="{{ placeholder }}" iconpath="{{ defaultIconPath }}" data-aria-invalid="{{ params.validationError }}"
-      {% if params.fallbackTo === 'input' %}name="{{ comboboxName }}"{% endif %} {% if params.resultMessage %}resultmessage="{{ params.resultMessage }}"{% endif %}
+    <mds-combobox comboboxid="{{ comboboxId }}" placeholder="{{ params.placeholder }}" iconpath="{{ defaultIconPath }}" data-aria-invalid="{{ params.validationError }}"
+      {% if params.fallbackTo === 'input' %}name="{{ comboboxName }}"{% endif %}
       {% if params.value %}value="{{ params.value }}"{% endif %}
       ></mds-combobox>
   </div>

package/src/components/inputs/combobox/combobox.config.js

@@ -22,12 +22,22 @@ module.exports = {
         variantTitle: 'AJAX autocomplete',
         name: 'keywords',
         id: 'keywords-lookup',
-        resultMessage: 'suggestions',
         labelText: 'Keywords:',
-        value: 'Initial value',
         placeholder: 'eg. Web developer',
         fallbackTo: 'input',
       },
     },
+    {
+      name: 'AJAX autocomplete prefilled',
+      context: {
+        variantTitle: 'AJAX autocomplete prefilled',
+        name: 'keywords',
+        id: 'keywords-lookup',
+        labelText: 'Keywords:',
+        placeholder: 'eg. Testimonials',
+        value: 'Initial Value',
+        fallbackTo: 'input',
+      },
+    },
   ],
 };

package/src/components/inputs/combobox/combobox.njk

@@ -6,7 +6,6 @@
     {{ MdsCombobox({
       id: id,
       name: name,
-      resultMessage: resultMessage,
       labelText: labelText,
       options: options,
       optional: optional,

package/src/components/inputs/combobox/vue-components/Combobox.vue

@@ -12,6 +12,7 @@
     <ComboboxInput
       @change="handleChange"
       @blur="onInputBlur"
+      @focus="handleFocus"
       :id="comboboxid"
       :name="name"
       :placeholder="placeholder"
@@ -19,6 +20,7 @@
       :aria-expanded="ariaExpanded"
       :activeDescendent="selectedOptionId"
       :ariaInvalid="ariaInvalid"
+      :aria-describedby="describedBy"
       v-model="inputValue"
     />
     <ListBox :id="listBoxId" :hidden="listBoxHidden" :isLoading="isLoading" :comboboxid="comboboxid">
@@ -34,7 +36,10 @@
         />
       </template>
     </ListBox>
-    <div aria-live="polite" role="status" class="mds-visually-hidden">{{ resultCount }}</div>
+    <div aria-live="polite" role="status" class="mds-visually-hidden">{{ resultCountMessage }}</div>
+    <span :id="describedBy" style="display: none">
+      When autocomplete results are available use up and down arrows to review and enter to select.
+    </span>
   </div>
 </template>
 
@@ -57,11 +62,7 @@ export default {
     },
     placeholder: {
       type: String,
-      default: 'Please combobox',
-    },
-    resultmessage: {
-      type: [String, Function],
-      default: 'options available',
+      default: '',
     },
     name: {
       type: [String, Boolean],
@@ -94,6 +95,9 @@ export default {
       selected: null,
       chosen: null,
       searchValue: this.$props.value,
+      resultCountMessage: null,
+      resultMessage: 'result available',
+      resultMessage_plural: 'results available',
     };
   },
   provide() {
@@ -107,6 +111,7 @@ export default {
         if (this.chosenOption) {
           return this.chosenOption.label;
         }
+
         return this.searchValue;
       },
       set(event) {
@@ -115,6 +120,9 @@ export default {
         this.searchValue = event.target ? event.target.value : '';
         this.handleChange();
         this.$emit('search', this.searchValue);
+        if (this.visibleOptions.length > 0) {
+          this.updateCount();
+        }
       },
     },
     selectedOption: {
@@ -139,6 +147,7 @@ export default {
       if (this.filterOptions) {
         return this.options.filter((opt) => opt.label.toLowerCase().includes(this.searchValue.toLowerCase()));
       }
+
       return this.options;
     },
     listBoxId() {
@@ -147,14 +156,19 @@ export default {
     optionId() {
       return `${this.comboboxid}-option`;
     },
+    describedBy() {
+      return `${this.comboboxid}-assistiveHint`;
+    },
     isLoading() {
       return this.options.length === 0 && this.expanded;
     },
     selectedOptionId() {
       const index = this.visibleOptions.indexOf(this.selectedOption);
+
       if (index > -1) {
         return `${this.optionId}-${index}`;
       }
+
       return false;
     },
     listBoxHidden() {
@@ -163,12 +177,6 @@ export default {
     lastOptionIndex() {
       return this.visibleOptions.length - 1;
     },
-    resultCount() {
-      if (typeof this.resultmessage === 'function') {
-        return this.resultmessage(this.visibleOptions.length);
-      }
-      return `${this.visibleOptions.length} ${this.resultmessage}`;
-    },
     ariaExpanded() {
       // These must be strings to apply as an aria attribute of the same name
       return this.expanded ? 'true' : 'false';
@@ -191,6 +199,12 @@ export default {
         this.makeInactive();
       }
     },
+    handleFocus() {
+      this.handleChange();
+      if (this.visibleOptions.length > 1) {
+        this.updateCount();
+      }
+    },
     clickOption(option = this.selectedOption) {
       this.chosenOption = option;
       this.makeInactive();
@@ -198,6 +212,7 @@ export default {
     chooseOption() {
       this.chosenOption = this.selectedOption;
       this.makeInactive();
+      this.clearCount();
     },
     hiddenGuard(fn) {
       if (this.listBoxHidden) return;
@@ -205,11 +220,13 @@ export default {
     },
     onInputBlur() {
       this.makeInactive();
+      this.clearCount();
     },
     onKeyDown() {
       if (this.selectedOption) {
         const currentIndex = this.visibleOptions.indexOf(this.selectedOption);
-        const nextIndex = currentIndex === this.lastOptionIndex ? 0 : currentIndex + 1;
+        const nextIndex = currentIndex === this.lastOptionIndex ? currentIndex : currentIndex + 1;
+
         this.selectedOption = this.visibleOptions[nextIndex];
       } else {
         [this.selectedOption] = this.visibleOptions;
@@ -218,7 +235,8 @@ export default {
     onKeyUp() {
       if (this.selectedOption) {
         const currentIndex = this.visibleOptions.indexOf(this.selectedOption);
-        const nextIndex = currentIndex === 0 ? this.lastOptionIndex : currentIndex - 1;
+        const nextIndex = currentIndex === 0 ? currentIndex : currentIndex - 1;
+
         this.selectedOption = this.visibleOptions[nextIndex];
       } else {
         this.selectedOption = this.visibleOptions[this.lastOptionIndex];
@@ -230,6 +248,16 @@ export default {
     onKeyEnd() {
       this.selectedOption = this.visibleOptions[this.lastOptionIndex];
     },
+    updateCount() {
+      setTimeout(() => {
+        const message = this.visibleOptions.length === 1 ? this.resultMessage_plural : this.resultMessage;
+
+        this.resultCountMessage = `${this.visibleOptions.length} ${message}`;
+      }, 1400);
+    },
+    clearCount() {
+      this.resultCountMessage = null;
+    },
   },
 };
 </script>

package/src/scss/core/_containers.scss

@@ -92,7 +92,7 @@ $mds-half-gutter-width: $mds-size-gutter-width * 0.5;
 // Calculate space left between the wrapper and the edge of the screen on each side
 // so we can stretch the sticky container to make it appear full screen
 // I added 0.01 to stretch the container slightly more to avoid a tiny gap between the edge of the screen and the container
-$space-between-wrapper-and-edge: (100% - $mds-size-wrapper-width) / 2 + 0.01;
+$space-between-wrapper-and-edge: math.div(100% - $mds-size-wrapper-width, 2) + 0.01;
 
 .mds-fixed-container--sticky {
   position: sticky;

package/src/scss/functions/_px2rem.scss

@@ -16,5 +16,5 @@
   } @else if unit($px) == rem {
     @return $px;
   }
-  @return ($px / $base-size) * 1rem;
+  @return math.div($px, $base-size) * 1rem;
 }

package/src/scss/import.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 @import 'vendor/normalize';
 @import 'resets/_index';
 @import 'functions/_index';

package/src/scss/vendor/_sass-mq.scss

@@ -94,7 +94,7 @@ $mq-media-type: all !default;
   } @else if unit($px) == em {
     @return $px;
   }
-  @return ($px / $base-font-size) * 1em;
+  @return math.div($px, $base-font-size) * 1em;
 }
 
 /// Get a breakpoint's width