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:
    • Rank:
      33892

      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.

        Activity

        Hide
        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
        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
        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
        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
        Tim Hunt added a comment -

        Brilliant, I should be able to do that now.

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

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

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

        Rebased and 2.3 branch added.

        Show
        Tim Hunt added a comment - Rebased and 2.3 branch added.
        Hide
        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
        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
        Rossiani Wijaya added a comment -

        This looks great.

        Test passed.

        Show
        Rossiani Wijaya added a comment - This looks great. Test passed.
        Hide
        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
        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: