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

atto editor's insert media dialog should display errors on blur and few other a11y issues

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Won't Do
    • Icon: Minor Minor
    • None
    • 3.11
    • Text editor Atto
    • MOODLE_311_STABLE
    • MDL-71997-master
    • Hide

      Empty url check

      1. # Go to user profile and click edit profile
      2. scroll down to Description
      3. use "Insert/edit an audio/video file" button
      4. In "Link" tab, leave source URL input field empty, and click submit, you should see a warning: "A media must have a URL.", start to type in source URL input field, then click away from it, the warning should go disappear
      5. In "Video" tab, leave source URL input field empty, and click submit, you should see a warning: "A media must have a URL.", start to type in source URL input field, then click away from it, the warning should go disappear
      6. In "Audio" tab, leave source URL input field empty, and click submit, you should see a warning: "A media must have a URL.", start to type in source URL input field, then click away from it, the warning should go disappear
      7. don't refresh the page yet, do the duplicate ids check below:

      make sure no duplicate HTML ids from atto editor

      Open browser's developer console and copy paste the code blow:

      function getAllDuplicateIds() {
          const elements = [...document.querySelectorAll('[id]')];
          const ids = elements.map((el) => el.id);
          const dups = elements.filter((el) => ids.filter((id) => id === el.id).length > 1);
          return dups.map((el) => {
              return { id: el.id, el };
          });
      }
      var dups = getAllDuplicateIds();
      if (dups.length > 0) {
          console.error('found duplicate ids');
          console.table(dups);
      } else {
          console.info('📗: all good');
      }
      
      

      Press "Enter", then you should be able to see this output:

      Show
      Empty url check # Go to user profile and click edit profile scroll down to Description use "Insert/edit an audio/video file" button In "Link" tab, leave source URL input field empty, and click submit, you should see a warning: "A media must have a URL.", start to type in source URL input field, then click away from it, the warning should go disappear In "Video" tab, leave source URL input field empty, and click submit, you should see a warning: "A media must have a URL.", start to type in source URL input field, then click away from it, the warning should go disappear In "Audio" tab, leave source URL input field empty, and click submit, you should see a warning: "A media must have a URL.", start to type in source URL input field, then click away from it, the warning should go disappear don't refresh the page yet, do the duplicate ids check below: make sure no duplicate HTML ids from atto editor Open browser's developer console and copy paste the code blow: function getAllDuplicateIds() { const elements = [...document.querySelectorAll('[id]')]; const ids = elements.map((el) => el.id); const dups = elements.filter((el) => ids.filter((id) => id === el.id).length > 1); return dups.map((el) => { return { id: el.id, el }; }); } var dups = getAllDuplicateIds(); if (dups.length > 0) { console.error('found duplicate ids'); console.table(dups); } else { console.info('📗: all good'); } Press "Enter", then you should be able to see this output:
    • HQ Team International Sprint 3

      Insert media dialogue

      • There are accessibility issues in this dialogue. There are still elements with duplicate IDs. For example, the id #lang-input is used for the 'Language' element in the video tab, in the 'subtitles', 'captions', 'descriptions', ... If possible, just remove the id attribute. otherwise, make sure it is not duplicate. This is not in the scope of this issue and will unnecessarily delay the current issue. so please create a separate MDL for this.
      • The value for the id attribute can not contain whitespace
      • The validation of the elements does not happen on the element's blur event. So the user still sees a validation error even after filling in a missing value.

            dongsheng Dongsheng Cai
            dongsheng Dongsheng Cai
            Shamim Rezaie Shamim Rezaie
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - 0 minutes
                0m
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 1 day, 5 hours, 1 minute
                1d 5h 1m

                  Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.