-
Bug
-
Resolution: Fixed
-
Major
-
3.11.7, 4.0.1
-
MOODLE_311_STABLE, MOODLE_400_STABLE
-
MOODLE_311_STABLE, MOODLE_400_STABLE
-
MDL-74812-master -
Setup
- Install axe DevTools on your browser (Chrome/Firefox).
- Log in as an admin
- Restore the course backup: backup-moodle2-course-2-activity_examples-20220616-1603-nu.mbz
- Enrol a student and a teacher on the restored course
- Log in as a student.
- Create a submission. Make sure to attach a file to the submission as well.
- On a separate browser session (e.g. incognito), log in as a teacher.
- Grade the student's submission. Add comments. Fill out the rubrics table. Add comments on the criteria. Make sure to provide feedback comments as well.
Test: Text wrapping
- On the student's browser, go to the assignment's view page.
- Check the rubrics tables (both on the Submission status and Feedback sections)
- Confirm that the longer words (e.g. "onomatopoeia") don't overflow to the other cells
- Inspect the rubrics table on the browser dev tools.
- Under Elements > Style (Chrome) / Inspector > Styles (Firefox), look for the "table" style, add the following line:
letter-spacing: 0.5em; - Confirm that the letters have wider spacing but they wrap nicely and don't overlap outside their respective cells.
Test: HTML Validator check
- View the page source (Right-click > View page source)
- Copy the page source
- Paste it on the text area of the Nu HTML Validator
- Press Check. Filter out the warnings.
- Confirm you don't see any of the following errors (Note: Disregard the other errors not mentioned below):
- Duplicate ID.
- The "width" attribute on the "td" element is obsolete.
Test - Axe DevTools
- On the student's browser, go to the assignment's view page.
- Run axe DevTools
- Confirm that there are no errors related to the rubrics tables:
- (Critical) Certain ARIA roles must contain particular children
- (Serious) Elements must have sufficient color contrast
- (Minor) id attribute value must be unique
Note: The "Needs review" colour contrast issues are false positives. The 2 Moderate ones are unrelated to the rubrics table.
Setup Install axe DevTools on your browser (Chrome/Firefox). Log in as an admin Restore the course backup: backup-moodle2-course-2-activity_examples-20220616-1603-nu.mbz Enrol a student and a teacher on the restored course Log in as a student. Create a submission. Make sure to attach a file to the submission as well. On a separate browser session (e.g. incognito), log in as a teacher. Grade the student's submission. Add comments. Fill out the rubrics table. Add comments on the criteria. Make sure to provide feedback comments as well. Test: Text wrapping On the student's browser, go to the assignment's view page. Check the rubrics tables (both on the Submission status and Feedback sections) Confirm that the longer words (e.g. " onomatopoeia ") don't overflow to the other cells Inspect the rubrics table on the browser dev tools. Under Elements > Style (Chrome) / Inspector > Styles (Firefox), look for the " table " style, add the following line: letter-spacing: 0.5em; Confirm that the letters have wider spacing but they wrap nicely and don't overlap outside their respective cells. Test: HTML Validator check View the page source (Right-click > View page source) Copy the page source Paste it on the text area of the Nu HTML Validator Press Check. Filter out the warnings. Confirm you don't see any of the following errors ( Note: Disregard the other errors not mentioned below ): Duplicate ID . The "width" attribute on the "td" element is obsolete. Test - Axe DevTools On the student's browser, go to the assignment's view page. Run axe DevTools Confirm that there are no errors related to the rubrics tables: (Critical) Certain ARIA roles must contain particular children (Serious) Elements must have sufficient color contrast (Minor) id attribute value must be unique Note: The " Needs review " colour contrast issues are false positives. The 2 Moderate ones are unrelated to the rubrics table.
-
3
To reproduce
- Create an assignment
- Set its grading method to Rubrics
- Configure the rubrics, and set up several criteria and levels. Make sure to include lengthy descriptions on the labels.
- Save and display
- On another browser session, log in as a student.
- Make a submission.
- Back on the admin/teacher's browser, grade the student's submission.
- On the student's browser, reload the assignment view page.
- View the page source and check with Nu HTML validator
HTML validator issues
- Duplicate ID "intro"
- The activity description container already has an ID of "intro" and the actual description
- The "role" attribute must not be used on a "tr" element which has a "table" ancestor with no "role" attribute, or with a "role" attribute whose value is "table", "grid", or "treegrid"
- Found on the Rubrics table
- The "role" attribute must not be used on a "td" element which has a "table" ancestor with no "role" attribute, or with a "role" attribute whose value is "table", "
- Found on the Rubrics table{{grid}}", or "treegrid"
- The "width" attribute on the "td" element is obsolete.
- Also on the Rubrics table
Others from the audit
- When text spacing is increased, text in the Grading Criteria table is cut off.
- Text with longer words that don't fit in the Rubrics table cell overlaps with the other cells.
- Colour contrast issues on the green text within the Rubrics table.
- Grading criteria - The points text inside the rubric table does not have sufficient colour contrast. Both normal and on hover.
- Feedback > Grade - The points text inside the rubric table within the grey cells does not have sufficient colour contrast. Both normal and on hover.
