Skip to content

Commit c0fd8a5

Browse files
committed
adds aria-labels that handle duplicate session titles in the same course.
1 parent b39d63b commit c0fd8a5

File tree

5 files changed

+192
-96
lines changed

5 files changed

+192
-96
lines changed

packages/ilios-common/addon-test-support/ilios-common/page-objects/components/sessions-grid-row.js

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
1-
import { clickable, create, isVisible, notHasClass, isPresent, text } from 'ember-cli-page-object';
1+
import {
2+
attribute,
3+
clickable,
4+
create,
5+
isVisible,
6+
notHasClass,
7+
isPresent,
8+
text,
9+
} from 'ember-cli-page-object';
210

311
const definition = {
412
scope: '[data-test-sessions-grid-row]',
@@ -9,6 +17,7 @@ const definition = {
917
canExpand: notHasClass('disabled', '[data-test-expand-collapse-control] [data-test-expand]'),
1018
expandTitle: text('[data-test-expand-collapse-control] title'),
1119
title: text('span', { at: 1 }),
20+
titleAriaLabel: attribute('aria-label', 'span:nth-of-type(2) a'),
1221
visit: clickable('span:nth-of-type(2) a'),
1322
type: text('span', { at: 2 }),
1423
groupCount: text('span', { at: 3 }),

packages/ilios-common/addon/components/sessions-grid-row.gjs

Lines changed: 51 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,9 @@ export default class SessionsGridRowComponent extends Component {
2020

2121
@cached
2222
get canDeleteData() {
23-
return new TrackedAsyncData(this.permissionChecker.canDeleteSession(this.args.session));
23+
return new TrackedAsyncData(
24+
this.permissionChecker.canDeleteSession(this.args.sessionProxy.session),
25+
);
2426
}
2527

2628
get canDelete() {
@@ -29,7 +31,9 @@ export default class SessionsGridRowComponent extends Component {
2931

3032
@cached
3133
get canUpdateData() {
32-
return new TrackedAsyncData(this.permissionChecker.canUpdateSession(this.args.session));
34+
return new TrackedAsyncData(
35+
this.permissionChecker.canUpdateSession(this.args.sessionProxy.session),
36+
);
3337
}
3438

3539
get canUpdate() {
@@ -38,87 +42,102 @@ export default class SessionsGridRowComponent extends Component {
3842
<template>
3943
<div class="sessions-grid-row" data-test-sessions-grid-row>
4044
<span class="expand-collapse-control" data-test-expand-collapse-control>
41-
{{#if (includes @session.id @expandedSessionIds)}}
45+
{{#if (includes @sessionProxy.session.id @expandedSessionIds)}}
4246
<button
4347
class="link-button"
4448
type="button"
4549
aria-label={{t "general.expand"}}
4650
data-test-collapse
47-
{{on "click" (fn @closeSession @session)}}
51+
{{on "click" (fn @closeSession @sessionProxy.session)}}
4852
>
4953
<FaIcon @icon="caret-down" />
5054
</button>
5155
{{else}}
5256
<button
53-
class="link-button {{if (eq @session.offeringCount 0) 'disabled'}}"
54-
disabled={{if (eq @session.offeringCount 0) "disabled"}}
57+
class="link-button {{if (eq @sessionProxy.session.offeringCount 0) 'disabled'}}"
58+
disabled={{if (eq @sessionProxy.session.offeringCount 0) "disabled"}}
5559
type="button"
5660
aria-label={{t "general.close"}}
5761
data-test-expand
58-
{{on "click" (fn @expandSession @session)}}
62+
{{on "click" (fn @expandSession @sessionProxy.session)}}
5963
>
6064
<FaIcon
6165
@icon="caret-right"
62-
@title={{if (eq @session.offeringCount 0) (t "general.noOfferings")}}
66+
@title={{if (eq @sessionProxy.session.offeringCount 0) (t "general.noOfferings")}}
6367
/>
6468
</button>
6569
{{/if}}
6670
</span>
6771
<span class="session-grid-title">
68-
<LinkTo @route="session" @models={{array @session.course @session}}>
69-
{{truncate @session.title 100 true}}
72+
<LinkTo
73+
@route="session"
74+
@models={{array @sessionProxy.session.course @sessionProxy.session}}
75+
aria-label={{@sessionProxy.ariaLabel}}
76+
>
77+
{{truncate @sessionProxy.session.title 100 true}}
7078
</LinkTo>
7179
</span>
7280
<span class="session-grid-type">
73-
{{@session.sessionType.title}}
81+
{{@sessionProxy.session.sessionType.title}}
7482
</span>
7583
<span class="session-grid-groups">
76-
{{@session.learnerGroupCount}}
84+
{{@sessionProxy.session.learnerGroupCount}}
7785
</span>
7886
<span class="session-grid-objectives">
79-
{{@session.objectiveCount}}
87+
{{@sessionProxy.session.objectiveCount}}
8088
</span>
8189
<span class="session-grid-terms">
82-
{{@session.termCount}}
90+
{{@sessionProxy.session.termCount}}
8391
</span>
8492
<span class="session-grid-first-offering">
85-
{{#if @session.firstOfferingDate}}
86-
{{#if @session.isIndependentLearning}}
87-
{{#if @session.hasPostrequisite}}
93+
{{#if @sessionProxy.session.firstOfferingDate}}
94+
{{#if @sessionProxy.session.isIndependentLearning}}
95+
{{#if @sessionProxy.session.hasPostrequisite}}
8896
<strong>
8997
{{t "general.ilm"}}:
9098
<FaIcon @icon="user-clock" />
9199
{{t "general.duePriorTo"}}:
92100
</strong>
93101
<LinkTo
94102
@route="session"
95-
@models={{array @session.course.id @session.postrequisite.id}}
96-
title={{@session.postrequisite.title}}
103+
@models={{array
104+
@sessionProxy.session.course.id
105+
@sessionProxy.session.postrequisite.id
106+
}}
107+
title={{@sessionProxy.session.postrequisite.title}}
97108
>
98-
{{truncate @session.postrequisite.title 18 true}}
109+
{{truncate @sessionProxy.session.postrequisite.title 18 true}}
99110
</LinkTo>
100111
{{else}}
101112
<strong>
102113
{{t "general.ilm"}}:
103114
{{t "general.dueBy"}}
104115
</strong>
105-
{{formatDate @session.firstOfferingDate month="2-digit" day="2-digit" year="numeric"}}
116+
{{formatDate
117+
@sessionProxy.session.firstOfferingDate
118+
month="2-digit"
119+
day="2-digit"
120+
year="numeric"
121+
}}
106122
{{/if}}
107-
{{else if @session.hasPostrequisite}}
123+
{{else if @sessionProxy.session.hasPostrequisite}}
108124
<strong>
109125
<FaIcon @icon="user-clock" />
110126
{{t "general.duePriorTo"}}:
111127
</strong>
112128
<LinkTo
113129
@route="session"
114-
@models={{array @session.course.id @session.postrequisite.id}}
115-
title={{@session.postrequisite.title}}
130+
@models={{array
131+
@sessionProxy.session.course.id
132+
@sessionProxy.session.postrequisite.id
133+
}}
134+
title={{@sessionProxy.session.postrequisite.title}}
116135
>
117-
{{truncate @session.postrequisite.title 18 true}}
136+
{{truncate @sessionProxy.session.postrequisite.title 18 true}}
118137
</LinkTo>
119138
{{else}}
120139
{{formatDate
121-
@session.firstOfferingDate
140+
@sessionProxy.session.firstOfferingDate
122141
month="2-digit"
123142
day="2-digit"
124143
year="numeric"
@@ -130,10 +149,10 @@ export default class SessionsGridRowComponent extends Component {
130149
{{/if}}
131150
</span>
132151
<span class="session-grid-offerings">
133-
{{@session.offeringCount}}
152+
{{@sessionProxy.session.offeringCount}}
134153
</span>
135154
<span class="session-grid-status" data-test-status>
136-
{{#if (and this.canUpdate @session.prerequisiteCount)}}
155+
{{#if (and this.canUpdate @sessionProxy.session.prerequisiteCount)}}
137156
<FaIcon
138157
@icon="arrow-right-to-bracket"
139158
@ariaHidden={{false}}
@@ -143,22 +162,22 @@ export default class SessionsGridRowComponent extends Component {
143162
data-test-prerequisites
144163
/>
145164
{{/if}}
146-
{{#if (and this.canUpdate @session.instructionalNotes.length)}}
165+
{{#if (and this.canUpdate @sessionProxy.session.instructionalNotes.length)}}
147166
<FaIcon
148167
@icon="clipboard-list"
149168
@ariaHidden={{false}}
150169
class="instructional-notes"
151170
@title={{t "general.instructionalNotes"}}
152171
/>
153172
{{/if}}
154-
<PublicationStatus @item={{@session}} />
173+
<PublicationStatus @item={{@sessionProxy.session}} />
155174
</span>
156175
<span class="session-grid-actions" data-test-actions>
157-
{{#if (and this.canUpdate (not @session.prerequisiteCount))}}
176+
{{#if (and this.canUpdate (not @sessionProxy.session.prerequisiteCount))}}
158177
<button
159178
class="link-button"
160179
type="button"
161-
{{on "click" (fn @confirmDelete @session.id)}}
180+
{{on "click" (fn @confirmDelete @sessionProxy.session.id)}}
162181
data-test-delete
163182
>
164183
<FaIcon

0 commit comments

Comments
 (0)