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

          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: