Details

    • Testing Instructions:
      Hide

      1. Attempt a quiz as a student.
      2. Use Firebug (or similar) to verify that the question flags have ARIA attributes, and clicking it works, etc.
      3. Review the attempt as a teacher. Verify that the flags are not click-able, that you don't get a link pointer when you mouse over them, and they don't have ARIA attributes.

      Show
      1. Attempt a quiz as a student. 2. Use Firebug (or similar) to verify that the question flags have ARIA attributes, and clicking it works, etc. 3. Review the attempt as a teacher. Verify that the flags are not click-able, that you don't get a link pointer when you mouse over them, and they don't have ARIA attributes.
    • Affected Branches:
      MOODLE_21_STABLE
    • Fixed Branches:
      MOODLE_21_STABLE, MOODLE_22_STABLE, MOODLE_23_STABLE
    • Pull from Repository:
    • Pull Master Branch:

      Description

      When flagging a question, nothing is spoken by screen readers, so the user does not know that they actually did anything. Making this an aria-live region will solve this problem.

        Gliffy Diagrams

          Attachments

            Activity

            Hide
            timhunt Tim Hunt added a comment -

            You could make my life easier by telling me the correct ARIA mark-up. I have not yet learned ARIA.

            Also, why are you setting fix-for version? The bug reporter should not do that. I should do that when I triage your bug report.

            Show
            timhunt Tim Hunt added a comment - You could make my life easier by telling me the correct ARIA mark-up. I have not yet learned ARIA. Also, why are you setting fix-for version? The bug reporter should not do that. I should do that when I triage your bug report.
            Hide
            gdkraus Greg Kraus added a comment -

            The pertinent attributes that need to be added to the container element are

            aria-atomic="true" (This tells the screen reader to read the entire contents of the containing element whenever anything changes within the containing element)
            aria-relevant="text" (This says that the changes are textual, as opposed to new nodes being inserted)
            aria-live="assertive" (This tells the screen reader to announce it as soon as possible)

            In this case you would just apply those three attributes to the <div> element that contains the whole area. This is the code from qa.moodle.net

            <div id="yui_3_5_1_1_1338578627632_17" class="questionflag" aria-atomic="true" aria-relevant="text" aria-live="assertive"><input type="hidden" name="q17:1_:flagged" value="0"><input type="hidden" value="qaid=19&qubaid=17&qid=22&slot=1&checksum=848d71aed3c627c5142b63da8bd94261&sesskey=Kq0s8S2ScU&newstate=" class="questionflagpostdata">
            <input type="hidden" value="1" name="q17:1_:flagged" id="q17:1_:flaggedcheckbox" class="questionflagvalue"><input type="image" alt="Flagged" title="Remove flag" src="http://qa.moodle.net/theme/image.php/binarius/core/1338577259/i/flagged" class="questionflagimage" id="yui_3_5_1_1_1338578627632_571"><span title="Remove flag" class="questionflagtext">Remove flag</span></div>

            I've tested this in JAWS and NVDA and it works with the proposed change.

            Show
            gdkraus Greg Kraus added a comment - The pertinent attributes that need to be added to the container element are aria-atomic="true" (This tells the screen reader to read the entire contents of the containing element whenever anything changes within the containing element) aria-relevant="text" (This says that the changes are textual, as opposed to new nodes being inserted) aria-live="assertive" (This tells the screen reader to announce it as soon as possible) In this case you would just apply those three attributes to the <div> element that contains the whole area. This is the code from qa.moodle.net <div id="yui_3_5_1_1_1338578627632_17" class="questionflag" aria-atomic="true" aria-relevant="text" aria-live="assertive"><input type="hidden" name="q17:1_:flagged" value="0"><input type="hidden" value="qaid=19&qubaid=17&qid=22&slot=1&checksum=848d71aed3c627c5142b63da8bd94261&sesskey=Kq0s8S2ScU&newstate=" class="questionflagpostdata"> <input type="hidden" value="1" name="q17:1_:flagged" id="q17:1_:flaggedcheckbox" class="questionflagvalue"><input type="image" alt="Flagged" title="Remove flag" src="http://qa.moodle.net/theme/image.php/binarius/core/1338577259/i/flagged" class="questionflagimage" id="yui_3_5_1_1_1338578627632_571"><span title="Remove flag" class="questionflagtext">Remove flag</span></div> I've tested this in JAWS and NVDA and it works with the proposed change.
            Hide
            timhunt Tim Hunt added a comment -

            Brilliant, I should be able to do that now.

            Show
            timhunt Tim Hunt added a comment - Brilliant, I should be able to do that now.
            Hide
            timhunt Tim Hunt added a comment -

            Note, the CSS change is not required on the 21 branch.

            Show
            timhunt Tim Hunt added a comment - Note, the CSS change is not required on the 21 branch.
            Hide
            timhunt Tim Hunt added a comment -

            Rebased and 2.3 branch added.

            Show
            timhunt Tim Hunt added a comment - Rebased and 2.3 branch added.
            Hide
            poltawski Dan Poltawski added a comment -

            Integrated to master, 23, 22, 21, thanks

            (note we won't be accepting non-security 2.1 patches after this week)

            Show
            poltawski Dan Poltawski added a comment - Integrated to master, 23, 22, 21, thanks (note we won't be accepting non-security 2.1 patches after this week)
            Hide
            rwijaya Rossiani Wijaya added a comment -

            This looks great.

            Test passed.

            Show
            rwijaya Rossiani Wijaya added a comment - This looks great. Test passed.
            Hide
            samhemelryk Sam Hemelryk added a comment -

            Congratulations your code is upstream - gold star for you!

            This issue + 79 others made it in in time for the minor releases.
            Thank you everyone involved for your exuberant efforts.

            Show
            samhemelryk Sam Hemelryk added a comment - Congratulations your code is upstream - gold star for you! This issue + 79 others made it in in time for the minor releases. Thank you everyone involved for your exuberant efforts.

              People

              • Votes:
                1 Vote for this issue
                Watchers:
                2 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:
                  Fix Release Date:
                  9/Jul/12