provide accessible description and title ("tooltip") to labels.

packages/ilios-common/addon-test-support/ilios-common/page-objects/components/dashboard/user-context-filter.js

@@ -1,4 +1,4 @@
-import { clickable, create, hasClass, property, text } from 'ember-cli-page-object';
+import { attribute, clickable, create, hasClass, property, text } from 'ember-cli-page-object';
 
 const definition = {
   scope: '[data-test-dashboard-user-context-filter]',
@@ -7,18 +7,24 @@ const definition = {
     label: text('[data-test-instructing-label]'),
     toggle: clickable('[data-test-instructing-label]'),
     isActive: hasClass('active', '[data-test-instructing-label]'),
+    ariaDescription: attribute('aria-description', '[data-test-instructing-label]'),
+    title: attribute('title', '[data-test-instructing-label]'),
   },
   learning: {
     isChecked: property('checked', '[data-test-learning-input]'),
     label: text('[data-test-learning-label]'),
     toggle: clickable('[data-test-learning-label]'),
     isActive: hasClass('active', '[data-test-learning-label]'),
+    ariaDescription: attribute('aria-description', '[data-test-learning-label]'),
+    title: attribute('title', '[data-test-learning-label]'),
   },
   admin: {
     isChecked: property('checked', '[data-test-admin-input]'),
     label: text('[data-test-admin-label]'),
     toggle: clickable('[data-test-admin-label]'),
     isActive: hasClass('active', '[data-test-admin-label]'),
+    ariaDescription: attribute('aria-description', '[data-test-admin-label]'),
+    title: attribute('title', '[data-test-admin-label]'),
   },
 };
 

packages/ilios-common/addon/components/dashboard/user-context-filter.hbs

@@ -8,8 +8,19 @@
   >
   <label
     for={{concat "instructing-toggle-" this.uniqueId}}
-    data-test-instructing-label
     class={{if (or (not @userContext) (eq @userContext "instructor")) "active"}}
+    title={{
+      if (eq @userContext "instructor")
+         (t "general.showAllMyActivities")
+         (t "general.showOnlyMyInstructingActivities")
+    }}
+    aria-description={{
+      if (eq @userContext "instructor")
+         (t "general.showAllMyActivities")
+         (t "general.showOnlyMyInstructingActivities")
+    }}
+    data-test-instructing-label
+
   >
     {{t "general.instructing"}}
   </label>
@@ -22,8 +33,18 @@
   >
   <label
     for={{concat "learning-toggle-" this.uniqueId}}
-    data-test-learning-label
     class={{if (or (not @userContext) (eq @userContext "learner")) "active"}}
+    title={{
+      if (eq @userContext "learner")
+         (t "general.showAllMyActivities")
+         (t "general.showOnlyMyLearningActivities")
+    }}
+    aria-description={{
+      if (eq @userContext "learner")
+         (t "general.showAllMyActivities")
+         (t "general.showOnlyMyLearningActivities")
+    }}
+    data-test-learning-label
   >
     {{t "general.learning"}}
   </label>
@@ -36,8 +57,18 @@
   >
   <label
     for={{concat "admin-toggle-" this.uniqueId}}
-    data-test-admin-label
     class={{if (or (not @userContext) (eq @userContext "administrator")) "active"}}
+    title={{
+      if (eq @userContext "administrator")
+         (t "general.showAllMyActivities")
+         (t "general.showOnlyMyAdminActivities")
+    }}
+    aria-description={{
+      if (eq @userContext "administrator")
+       (t "general.showAllMyActivities")
+       (t "general.showOnlyMyAdminActivities")
+    }}
+    data-test-admin-label
   >
     {{t "general.admin"}}
   </label>

packages/ilios-common/translations/en-us.yaml

@@ -313,6 +313,7 @@ general:
   sessionType: Session Type
   sessionTypes: Session Types
   sessionTypesFor: "Session Types for {subject}"
+  showAllMyActivities: Show all my activities
   showCalendar: Show Calendar
   showCourseMaterials: Show course materials
   showFilters: Show Filters
@@ -321,6 +322,9 @@ general:
   showMore: Show more
   showNotesToStudents: Show Notes to Students
   showObjectives: Show objectives
+  showOnlyMyAdminActivities: Show only my admin activities
+  showOnlyMyInstructingActivities: Show only my instructing activities
+  showOnlyMyLearningActivities: Show only my learning activities
   showSessionEvents: "Show all other '<em>'{sessionTitle}'</em>' events"
   showSessionMaterials: Show session materials
   smallGroupMessage: 'Please select at least one learner group to attach to your small group offering. If you wish to schedule this offering without groups, please select the "offering" button above.'

packages/ilios-common/translations/es.yaml

@@ -313,6 +313,7 @@ general:
   sessionType: Tipo de Sesión
   sessionTypes: Tipos de Sesiones
   sessionTypesFor: "Tipos de Sesiones para {subject}"
+  showAllMyActivities: Show all my activities
   showCalendar: Muestre Calendario
   showCourseMaterials: Mostrar materiales del curso
   showFilters: Enseñe Filtros
@@ -326,6 +327,9 @@ general:
   smallGroupMessage: 'Por favor seleccione al menos un grupo de alumnos para adjuntar a su ofrecimiento de grupos pequeños. Si usted desea programar este ofrecimiento sin grupos, favor de seleccionar el botón de "ofrecimiento" de arriba.'
   smallGroups: Grupos Pequeños
   sortMaterials: Clasificar los materiales
+  showOnlyMyAdminActivities: Show only my admin activities
+  showOnlyMyInstructingActivities: Show only my instructing activities
+  showOnlyMyLearningActivities: Show only my learning activities
   sortObjectives: Clasificar los objetivos
   specialAttireIs_Required_: "Se '<strong><em>'require'</em></strong>' vestimenta especial"
   specialAttireRequired: Vestimenta Especial Requerido

packages/ilios-common/translations/fr.yaml

@@ -313,6 +313,7 @@ general:
   sessionType: Type de Séance
   sessionTypes: Types de Séance
   sessionTypesFor: "Types de Séance par {subject}"
+  showAllMyActivities: Show all my activities
   showCalendar: Afficher Calendrier
   showCourseMaterials: Afficher les supports de cours
   showFilters: Montrez les Filtres
@@ -321,6 +322,9 @@ general:
   showMore: Afficher plus
   showNotesToStudents: Afficher notes aux étudiantes
   showObjectives: Afficher les objectifs
+  showOnlyMyAdminActivities: Show only my admin activities
+  showOnlyMyInstructingActivities: Show only my instructing activities
+  showOnlyMyLearningActivities: Show only my learning activities
   showSessionEvents: "Montrez tous les autres '<em>'{sessionTitle}'</em>' événements"
   showSessionMaterials: Afficher les supports de session
   smallGroupMessage: 'S''il vous plaît choisir au moins un groupe d''apprenants à joindre à votre offrande de "small groups". Si vous souhaitez programmer cette offrande sans groupes, s''il vous plaît choisir le bouton "offre" au-dessus.'

packages/test-app/tests/integration/components/dashboard/user-context-filter-test.js

@@ -12,12 +12,21 @@ module('Integration | Component | dashboard/user-context-filter', function (hook
   test('it renders', async function (assert) {
     await render(hbs`<Dashboard::UserContextFilter />`);
     assert.strictEqual(component.instructing.label, 'Instructing');
+    assert.strictEqual(
+      component.instructing.ariaDescription,
+      'Show only my instructing activities',
+    );
+    assert.strictEqual(component.instructing.title, 'Show only my instructing activities');
     assert.notOk(component.instructing.isChecked);
     assert.ok(component.instructing.isActive);
     assert.strictEqual(component.learning.label, 'Learning');
+    assert.strictEqual(component.learning.ariaDescription, 'Show only my learning activities');
+    assert.strictEqual(component.learning.title, 'Show only my learning activities');
     assert.notOk(component.learning.isChecked);
     assert.ok(component.learning.isActive);
     assert.strictEqual(component.admin.label, 'Admin');
+    assert.strictEqual(component.admin.ariaDescription, 'Show only my admin activities');
+    assert.strictEqual(component.admin.title, 'Show only my admin activities');
     assert.notOk(component.admin.isChecked);
     assert.ok(component.admin.isActive);
   });
@@ -33,14 +42,16 @@ module('Integration | Component | dashboard/user-context-filter', function (hook
   });
 
   test('de-selecting learning filter', async function (assert) {
-    assert.expect(5);
+    assert.expect(7);
     this.set('userContext', 'learner');
     this.set('setUserContext', (context) => {
       assert.strictEqual(context, null);
     });
     await render(
       hbs`<Dashboard::UserContextFilter @setUserContext={{this.setUserContext}} @userContext={{this.userContext}}/>`,
     );
+    assert.strictEqual(component.learning.ariaDescription, 'Show all my activities');
+    assert.strictEqual(component.learning.title, 'Show all my activities');
     assert.ok(component.learning.isChecked);
     assert.notOk(component.instructing.isActive);
     assert.ok(component.learning.isActive);
@@ -59,14 +70,16 @@ module('Integration | Component | dashboard/user-context-filter', function (hook
   });
 
   test('de-selecting instructing filter', async function (assert) {
-    assert.expect(5);
+    assert.expect(7);
     this.set('userContext', 'instructor');
     this.set('setUserContext', (context) => {
       assert.strictEqual(context, null);
     });
     await render(
       hbs`<Dashboard::UserContextFilter @setUserContext={{this.setUserContext}} @userContext={{this.userContext}}/>`,
     );
+    assert.strictEqual(component.instructing.ariaDescription, 'Show all my activities');
+    assert.strictEqual(component.instructing.title, 'Show all my activities');
     assert.ok(component.instructing.isChecked);
     assert.ok(component.instructing.isActive);
     assert.notOk(component.learning.isActive);
@@ -85,14 +98,16 @@ module('Integration | Component | dashboard/user-context-filter', function (hook
   });
 
   test('de-selecting admin filter', async function (assert) {
-    assert.expect(5);
+    assert.expect(7);
     this.set('userContext', 'administrator');
     this.set('setUserContext', (context) => {
       assert.strictEqual(context, null);
     });
     await render(
       hbs`<Dashboard::UserContextFilter @setUserContext={{this.setUserContext}} @userContext={{this.userContext}}/>`,
     );
+    assert.strictEqual(component.admin.ariaDescription, 'Show all my activities');
+    assert.strictEqual(component.admin.title, 'Show all my activities');
     assert.ok(component.admin.isChecked);
     assert.notOk(component.instructing.isActive);
     assert.notOk(component.learning.isActive);