Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using the new ariaLabelledBy prop in KSwitch #12918

Open
wants to merge 6 commits into
base: develop
Choose a base branch
from
+10 −5
Open

Using the new ariaLabelledBy prop in KSwitch #12918

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
eb64d15
toggle-quiz-visibility-label
RONAK-AI647 Dec 7, 2024
cf17abd
Toggle visibility for lesson {{ lesson.name }}
RONAK-AI647 Dec 7, 2024
cca9766
toggle-lesson-visibility
RONAK-AI647 Dec 7, 2024
7eb9f93
Removing the spans and associating the UII
RONAK-AI647 Feb 15, 2025
0290bec
aria-labelledby to ariaLabelledBy
RONAK-AI647 Feb 15, 2025
4a37ff3
label='''' , no more needed
RONAK-AI647 Feb 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions kolibri/plugins/coach/assets/src/views/common/LessonStatus.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,10 @@
:layout8="{ span: 4 }"
:layout12="{ span: 2 }"
>
<span id="toggle-lesson-visibility-label">Toggle lesson visibility</span>
<KSwitch
name="toggle-lesson-visibility"
:aria-labelledby="'toggle-lesson-visibility-label'"
label=""
:checked="lesson.active"
:value="lesson.active"
Expand Down
2 changes: 2 additions & 0 deletions kolibri/plugins/coach/assets/src/views/common/QuizStatus.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,8 +100,10 @@
:layout8="{ span: 4 }"
:layout12="{ span: 2 }"
>
<span id="toggle-quiz-visibility-label">Toggle quiz visibility</span>
<KSwitch
name="toggle-quiz-visibility"
:aria-labelledby="'toggle-quiz-visibility'"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this line match the id='toggle-quiz-visibility-label' in the span above?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, shouldn't the prop be named ariaLabelledBy rather than :aria-labelledby?

label=""
style="display: inline"
:checked="exam.active"
Expand Down
8 changes: 6 additions & 2 deletions kolibri/plugins/coach/assets/src/views/lessons/LessonsRootPage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,10 +96,14 @@
:style="{ display: 'inline-block', marginLeft: '6px' }"
:size="26"
/>
<span :id="`toggle-lesson-visibility-label-${lesson.id}`">
Toggle visibility for lesson {{ lesson.name }}
</span>
<KSwitch
v-else
:key="`switch-${lesson.id}`"
v-else:
key="`switch-${lesson.id}`"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe this piece of code is causing an error in my code editor. Is there a particular reason that the : colon was moved from in front of key and positioned after v-else?

name="toggle-lesson-visibility"
:ariaLabelledBy="`toggle-lesson-visibility-label-${lesson.id}`"
label=""
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since it is set as an empty string, is the label property still required now that we have the ariaLabelledBy prop in use?

:checked="lesson.active"
:value="lesson.active"
Expand Down
Loading