Merge pull request #14374 from rajeshuchil/fix-qti-accessibility

fix(qti-viewer): accessibility and maxChoices fixes for choice and text-entry interactions

Author: rtibbles

kolibri/plugins/qti_viewer/frontend/components/QTIViewer.vue

@@ -27,6 +27,7 @@
     components: {
       AssessmentItem,
     },
+    inheritAttrs: false,
     setup(props, context) {
       const { defaultFile, reportLoadingError } = useContentViewer(props, context);
       const packageLoading = ref(true);

kolibri/plugins/qti_viewer/frontend/components/interactions/ChoiceInteraction.vue

@@ -3,13 +3,37 @@
   import get from 'lodash/get';
   import shuffled from 'kolibri-common/utils/shuffled';
   import { computed, h, inject, provide } from 'vue';
+  import { createTranslator } from 'kolibri/utils/i18n';
   import { BooleanProp, NonNegativeIntProp, QTIIdentifierProp } from '../../utils/props';
   import useTypedProps from '../../composables/useTypedProps';
 
+  const strings = createTranslator('ChoiceInteractionStrings', {
+    choiceListLabel: {
+      message: 'Answer choices',
+      context: 'Accessible label for the list of answer choices in an assessment question',
+    },
+  });
+
+  const { choiceListLabel$ } = strings;
+
   function getComponentTag(vnode) {
     return get(vnode, ['componentOptions', 'Ctor', 'extendOptions', 'tag']);
   }
 
+  /**
+   * Safely normalizes a response value to an array.
+   * Handles null, undefined, scalars, and arrays uniformly.
+   */
+  function getSelectionsArray(value) {
+    if (value === null || value === undefined) {
+      return [];
+    }
+    if (Array.isArray(value)) {
+      return value;
+    }
+    return [value];
+  }
+
   export default {
     name: 'QtiChoiceInteraction',
     tag: 'qti-choice-interaction',
@@ -29,13 +53,10 @@
 
       const isSelected = identifier => {
         const variable = responses[typedProps.responseIdentifier.value];
-        if (!variable.value) {
+        if (!variable) {
           return false;
         }
-        if (multiSelectable.value) {
-          return variable.value.includes(identifier);
-        }
-        return variable.value === identifier;
+        return getSelectionsArray(variable.value).includes(identifier);
       };
 
       const toggleSelection = identifier => {
@@ -44,15 +65,27 @@
         }
         const currentlySelected = isSelected(identifier);
         const variable = responses[typedProps.responseIdentifier.value];
+        if (!variable) {
+          return false;
+        }
 
         if (currentlySelected) {
-          variable.value = multiSelectable.value
-            ? variable.value.filter(v => v !== identifier)
-            : null;
+          if (multiSelectable.value) {
+            variable.value = getSelectionsArray(variable.value).filter(v => v !== identifier);
+          } else {
+            variable.value = null;
+          }
         } else {
-          variable.value = multiSelectable.value
-            ? [...(variable.value || []), identifier]
-            : identifier;
+          if (multiSelectable.value) {
+            const maxChoices = typedProps.maxChoices.value;
+            const currentSelections = getSelectionsArray(variable.value);
+            if (maxChoices > 0 && currentSelections.length >= maxChoices) {
+              return false;
+            }
+            variable.value = [...currentSelections, identifier];
+          } else {
+            variable.value = identifier;
+          }
         }
 
         return true;
@@ -63,7 +96,7 @@
       provide('toggleSelection', toggleSelection);
 
       const getShuffledOrder = choices => {
-        if (!typedProps.shuffle) {
+        if (!typedProps.shuffle.value) {
           return choices;
         }
 
@@ -113,9 +146,11 @@
           'ul',
           {
             attrs: {
+              role: 'listbox',
+              'aria-label': choiceListLabel$(),
               'aria-multiselectable': multiSelectable.value,
-              class: (attrs.class || '') + ' qti-choice-interaction',
             },
+            class: [attrs.class || '', 'qti-choice-interaction'],
           },
           orderedChoices.map(choice => choice.vnode),
         );

kolibri/plugins/qti_viewer/frontend/components/interactions/SimpleChoice.vue

@@ -3,15 +3,17 @@
   <li
     class="qti-simple-choice"
     role="option"
-    :class="
+    tabindex="0"
+    :class="[
       $computedClass({
         '::before': {
           border: `2px solid ${selected ? $themeTokens.textInverted : $themeTokens.annotation}`,
         },
-      })
-    "
+        ':focus': coreOutline,
+      }),
+    ]"
     :aria-selected="selected"
-    :style="extraStyles"
+    :style="[extraStyles]"
     @click="handleClick"
     @keydown.enter="handleClick"
     @keydown.space.prevent="handleClick"
@@ -25,10 +27,11 @@
 <script>
 
   import { computed, inject } from 'vue';
-  import { themeTokens } from 'kolibri-design-system/lib/styles/theme';
+  import { themeTokens, themeOutlineStyle } from 'kolibri-design-system/lib/styles/theme';
   import { BooleanProp, QTIIdentifierProp } from '../../utils/props';
 
   const $themeTokens = themeTokens();
+  const coreOutline = themeOutlineStyle();
 
   export default {
     name: 'SimpleChoice',
@@ -56,6 +59,8 @@
       });
 
       return {
+        $themeTokens,
+        coreOutline,
         selected,
         handleClick,
         extraStyles,

kolibri/plugins/qti_viewer/frontend/components/interactions/TextEntryInteraction.vue

@@ -3,17 +3,21 @@
   <input
     v-if="interactive"
     v-model="variable"
-    class="qti-text-entry-interaction"
+    v-bind="inputAttrs"
+    :class="['qti-text-entry-interaction', attrsClass, $computedClass({ ':focus': coreOutline })]"
+    :aria-label="textEntryLabel$()"
     :placeholder="placeholder"
     :style="{
       minWidth: `${Math.min(expectedLength ?? 20, 20)}ch`,
       maxWidth: '90%',
+      border: `1px solid ${$themeTokens.fineLine}`,
     }"
     :type="inputType"
+    autocomplete="off"
   >
   <div
     v-else
-    class="qti-text-entry-interaction qti-text-entry-interaction-report"
+    :class="['qti-text-entry-interaction', 'qti-text-entry-interaction-report', attrsClass]"
   >
     {{ variable || placeholder }}
   </div>
@@ -24,6 +28,8 @@
 <script>
 
   import { computed, inject } from 'vue';
+  import { themeTokens, themeOutlineStyle } from 'kolibri-design-system/lib/styles/theme';
+  import { createTranslator } from 'kolibri/utils/i18n';
   import useTypedProps from '../../composables/useTypedProps';
   import {
     NumberProp,
@@ -34,14 +40,93 @@
   } from '../../utils/props';
   import { BASE_TYPE } from '../../constants';
 
+  const $themeTokens = themeTokens();
+
+  const strings = createTranslator('TextEntryInteractionStrings', {
+    textEntryLabel: {
+      message: 'Your answer',
+      context: 'Accessible label for a text input field in an assessment question',
+    },
+  });
+
+  const { textEntryLabel$ } = strings;
+
   export default {
     name: 'TextEntryInteraction',
     tag: 'qti-text-entry-interaction',
+    inheritAttrs: false,
 
-    setup(props) {
-      const responses = inject('responses');
+    setup(props, context) {
+      const responses = inject('responses', {});
       const typedProps = useTypedProps(props);
-      const interactive = inject('interactive');
+      const interactive = inject('interactive', true);
+
+      const getContextAttrs = () => {
+        if (!context || !context.attrs) {
+          return {};
+        }
+        return context.attrs;
+      };
+
+      const ALLOWED_INPUT_ATTRS = new Set([
+        'id',
+        'name',
+        'value',
+        'disabled',
+        'readonly',
+        'required',
+        'min',
+        'max',
+        'step',
+        'minlength',
+        'maxlength',
+        'inputmode',
+        'spellcheck',
+        'autocapitalize',
+        'autocorrect',
+        'enterkeyhint',
+        'tabindex',
+        'title',
+        'lang',
+        'dir',
+        'autofocus',
+        'list',
+      ]);
+
+      const isPrimitiveAttrValue = value => {
+        return typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean';
+      };
+
+      const isAriaOrDataAttr = name => {
+        return name.startsWith('aria-') || name.startsWith('data-');
+      };
+
+      const inputAttrs = computed(() => {
+        return Object.entries(getContextAttrs()).reduce((forwardedAttrs, [name, value]) => {
+          if (name === 'class') {
+            return forwardedAttrs;
+          }
+          if (name === 'style') {
+            forwardedAttrs[name] = value;
+            return forwardedAttrs;
+          }
+          if (name === 'placeholder-text') {
+            return forwardedAttrs;
+          }
+          if (name === 'placeholder' || name === 'type' || name === 'aria-label') {
+            return forwardedAttrs;
+          }
+          if (!isPrimitiveAttrValue(value)) {
+            return forwardedAttrs;
+          }
+          if (ALLOWED_INPUT_ATTRS.has(name) || isAriaOrDataAttr(name)) {
+            forwardedAttrs[name] = value;
+          }
+          return forwardedAttrs;
+        }, {});
+      });
+
+      const attrsClass = computed(() => getContextAttrs().class);
 
       const inputDeclaration = computed(() => {
         return responses[typedProps.responseIdentifier.value];
@@ -65,10 +150,15 @@
       });
 
       return {
+        $themeTokens,
+        textEntryLabel$,
         variable,
         placeholder: typedProps.placeholderText,
         interactive,
         inputType,
+        coreOutline: themeOutlineStyle(),
+        inputAttrs,
+        attrsClass,
       };
     },
     props: {
@@ -89,6 +179,11 @@
 
 <style scoped>
 
+  .qti-text-entry-interaction {
+    padding: 4px 8px;
+    border-radius: 4px;
+  }
+
   .qti-text-entry-interaction-report {
     box-sizing: border-box;
     width: 100%;

packages/kolibri/components/internal/ContentViewer/index.js

@@ -47,10 +47,18 @@ export default {
         );
       }
 
+      const safeAttrs = {};
+      for (const [key, value] of Object.entries(context.data.attrs || {})) {
+        if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
+          safeAttrs[key] = value;
+        }
+      }
+
       return createElement(
         defaultItemPreset + VIEWER_SUFFIX,
         {
           ...context.data,
+          attrs: safeAttrs,
           props: context.props,
           on: combinedListeners,
         },