Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-45054

Conditional availability: HTML structure improvements

    XMLWordPrintable

    Details

    • Testing Instructions:
      Hide

      0. Ensure the availability system is enabled at site level.
      1. Edit settings for any activity.
      2. Expand 'Restrict access' and click 'Add restriction...'

      EXPECTED: The Cancel button at the bottom of the dialog is now centered (if using Clean theme), consistent with the action button at bottom of Atto dialogs.

      3. Add a Date condition
      4. Mouse over the X button and pause

      EXPECTED: Title 'Delete' displays

      5. Click the X button

      EXPECTED: Item deleted

      6. Add a Date again. This time, tab to the X button using the keyboard and press Enter.

      EXPECTED: Item deleted.

      7. Repeat again, but this time use Space instead of Enter.

      EXPECTED: Item still deleted.

      8. Add another date. Mouse over the eye icon next to it.

      EXPECTED: title message (displayed greyed out...) pops up

      9. Click eye icon.

      EXPECTED: Icon changes appearance.

      10. Hover over icon again

      EXPECTED: New title (hidden entirely...) shows

      11. Tab to icon and activate it with Enter key.

      EXPECTED: Icon toggles state

      12. Now press Space key too.

      EXPECTED: Icon toggles state again.

      Show
      0. Ensure the availability system is enabled at site level. 1. Edit settings for any activity. 2. Expand 'Restrict access' and click 'Add restriction...' EXPECTED: The Cancel button at the bottom of the dialog is now centered (if using Clean theme), consistent with the action button at bottom of Atto dialogs. 3. Add a Date condition 4. Mouse over the X button and pause EXPECTED: Title 'Delete' displays 5. Click the X button EXPECTED: Item deleted 6. Add a Date again. This time, tab to the X button using the keyboard and press Enter. EXPECTED: Item deleted. 7. Repeat again, but this time use Space instead of Enter. EXPECTED: Item still deleted. 8. Add another date. Mouse over the eye icon next to it. EXPECTED: title message (displayed greyed out...) pops up 9. Click eye icon. EXPECTED: Icon changes appearance. 10. Hover over icon again EXPECTED: New title (hidden entirely...) shows 11. Tab to icon and activate it with Enter key. EXPECTED: Icon toggles state 12. Now press Space key too. EXPECTED: Icon toggles state again.
    • Affected Branches:
      MOODLE_27_STABLE
    • Fixed Branches:
      MOODLE_27_STABLE
    • Pull Master Branch:
      MDL-45054-master

      Description

      Here are some stuff that could be improved when setting restriction on an activity access.

      Accessibility

      1. I think the images Delete and Hide should be in an A tag, and the role=button set on the A. Then there is no need for a tabindex, neither for a CSS property for the cursor to be pointer.
      2. The dialogue could do with an "X" to close the dialogue
      3. The Hide/Delete icons have both a title and an alt, this is redundant and one should be enough. If there was an anchor around it the anchor could use the title and the image the span. Actually, I just realised that I am not certain what this eye means... I thought it was to disable a rule, but maybe I'm wrong.
      4. With user profile field, the SELECT and INPUT have a title with the same value than the label, is that useful? Could a screenreader read them twice?
      5. The form should not use SPAN but DIV with display inline or inline block. SPAN are not considered as blocks at all, and screenreaders sometimes merge the content from both when reading them out.

        <span class="availability-single" aria-hidden="true">match the following</span>
        <span class="availability-multi">match <label><span>Required restrictions </span>
        SNIP</span>
         
        Is read: match the followingmatch Required restrictions
        

      Styling

      1. There is no need to set the class btn to the buttons, as they are buttons already. And if this is for base, then let's leave them as normal buttons in base.
      2. It seems that usually the buttons in the dialogues are centered, or right aligned.
      3. IMO Bootstrap styles should not have been copied to base: MDL-45050
      4. Why is there a mix of aria-hidden and accesshide? One or the other would make more sense to me.

        Attachments

          Activity

            People

            • Assignee:
              quen Sam Marshall
              Reporter:
              fred Frédéric Massart
              Peer reviewer:
              Frédéric Massart
              Integrator:
              Dan Poltawski
              Tester:
              Dan Poltawski
              Participants:
              Component watchers:
              Sam Marshall, Jake Dallimore, Jun Pataleta, Ryan Wyllie
            • Votes:
              0 Vote for this issue
              Watchers:
              5 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:
                Fix Release Date:
                12/May/14