MDL-72822 core_reportbuilder: Accessibility improvements

- Add sr-only headings to tabs - Change role to 'presentation' in tab <li> elements - Remove unnecessary aria-labelledby - Fix heading levels - Avoid duplicated IDs in audiences - Replace empty links with buttons - Fix mustache comments - Fix mustache contexts
moodle · Nov 24, 2021 · 8e25d53 · 8e25d53
1 parent 16a5169
commit 8e25d53
Show file tree

Hide file tree

Showing 26 changed files with 106 additions and 72 deletions.
diff --git a/lib/templates/dynamic_tabs.mustache b/lib/templates/dynamic_tabs.mustache
@@ -48,7 +48,7 @@
     {{#showtabsnavigation}}
         <ul class="nav nav-tabs mb-4" id="dynamictabs-tabs" role="tablist">
             {{#tabs}}
-                <li class="nav-item">
+                <li class="nav-item" role="presentation">
                     <a class="nav-link {{#active}}active{{/active}} {{^enabled}}disabled{{/enabled}}" id="{{shortname}}-tab" data-toggle="tab" href="#{{shortname}}" role="tab" aria-controls="{{shortname}}">
                         {{{displayname}}}
                     </a>

diff --git a/reportbuilder/templates/local/audience/form.mustache b/reportbuilder/templates/local/audience/form.mustache
@@ -38,11 +38,11 @@
         </span>
     {{/showormessage}}
     <div class="mb-3 card">
-        <div class="card-header p-0" id="form-instance-{{instanceid}}-heading">
+        <div class="card-header p-0">
             <div class="mb-0 d-flex">
-                <span class="text-left ml-1 nomargin btn">
+                <h3 class="h6 text-left m-0 align-self-center pl-3">
                     {{title}}
-                </span>
+                </h3>
                 <span class="ml-auto">
                     {{#canedit}}
                         <button class="btn btn-link px-0"
@@ -65,16 +65,14 @@
                 </span>
             </div>
         </div>
-        <div id="form-instance-{{instanceid}}" aria-labelledby="form-instance-{{instanceid}}-heading">
-            <div class="card-body p-3" data-region="audience-form">
-                <div data-region="audience-description" {{^description}}class="hidden"{{/description}}>
-                    {{{description}}}
-                </div>
-                <div data-region="audience-form-container" {{^form}}class="hidden"{{/form}}>
-                    <div class="alert alert-warning p-2" data-region="audience-not-saved">{{#str}} audiencenotsaved, core_reportbuilder {{/str}}</div>
-                    {{{form}}}
-                </div>
+        <div class="card-body p-3" data-region="audience-form">
+            <div data-region="audience-description" {{^description}}class="hidden"{{/description}}>
+                {{{description}}}
+            </div>
+            <div data-region="audience-form-container" {{^form}}class="hidden"{{/form}}>
+                <div class="alert alert-warning p-2" data-region="audience-not-saved">{{#str}} audiencenotsaved, core_reportbuilder {{/str}}</div>
+                {{{form}}}
             </div>
         </div>
     </div>
-</div>
+</div>
diff --git a/reportbuilder/templates/local/conditions/footer.mustache b/reportbuilder/templates/local/conditions/footer.mustache
@@ -23,4 +23,4 @@
     {
     }
 }}
-</div>
+</div>
diff --git a/reportbuilder/templates/local/conditions/header.mustache b/reportbuilder/templates/local/conditions/header.mustache
@@ -35,7 +35,11 @@
                 <small class="text-muted text-uppercase">{{entityname}} • {{heading}}</small>
             </div>
         </div>
-        <a data-action="report-remove-condition" class="ml-auto" href="#">
-            {{#pix}}e/cancel, core, {{#str}}deletecondition, core_reportbuilder, {{{heading}}}{{/str}}{{/pix}}
-        </a>
-    </div>
+        <button class="btn btn-link p-0 ml-auto"
+                type="button"
+                data-action="report-remove-condition"
+                title="{{#str}}deletecondition, core_reportbuilder, {{{heading}}}{{/str}}"
+                aria-label="{{#str}}deletecondition, core_reportbuilder, {{{heading}}}{{/str}}">
+            {{#pix}}e/cancel, core{{/pix}}
+        </button>
+    </div>
diff --git a/reportbuilder/templates/local/dynamictabs/access.mustache b/reportbuilder/templates/local/dynamictabs/access.mustache
@@ -24,6 +24,7 @@
         "report": "The report content"
     }
 }}
+<h2 class="sr-only">{{#str}} access, core_reportbuilder {{/str}}</h2>
 <div class="reportbuilder-access-container">
     {{{ report }}}
-</div>
+</div>
diff --git a/reportbuilder/templates/local/dynamictabs/audience.mustache b/reportbuilder/templates/local/dynamictabs/audience.mustache
@@ -21,19 +21,38 @@
 
     Example context (json):
     {
-        "id": 1,
+        "reportid": 1,
+        "contextid": 1,
         "hasinstances": 1,
-        "instances": "instances",
-        "form": "form"
+        "instances": [{
+            "instanceid": 1,
+            "classname": "some\\class\\name",
+            "title": "Title",
+            "showormessage": 1,
+            "canedit": 1,
+            "candelete": 1,
+            "description": "description",
+            "form": "form"
+        }],
+        "sidebarmenucards": [{
+            "menucards": [{
+                "name": "General",
+                "items": [{
+                    "name": "Manually added users",
+                    "identifier": "core_reportbuilder:users"
+                }]
+            }]
+        }]
     }
 }}
+<h2 class="sr-only">{{#str}} audience, core_reportbuilder {{/str}}</h2>
 <div class="audiences-wrapper d-flex flex-column flex-md-row">
     <div id="audiences-menu">
-        <!-- Sidebar -->
+        {{! Sidebar }}
         {{> core_reportbuilder/local/sidebar-menu/area}}
     </div>
     <div id="audiences-container" class="reportbuilder-audiences-container d-flex flex-column flex-fill" data-region="audiences">
-        <!-- No audience container -->
+        {{! No audience container }}
         <div class="justify-content-center {{#hasinstances}}hidden{{/hasinstances}}" data-region="no-instances-message">
             <div class="alert alert-info mb-0">{{#str}} addaudiences, core_reportbuilder {{/str}}</div>
         </div>

diff --git a/reportbuilder/templates/local/dynamictabs/editor.mustache b/reportbuilder/templates/local/dynamictabs/editor.mustache
@@ -87,6 +87,7 @@
         }
     }
 }}
+<h2 class="sr-only">{{#str}} editor, core_reportbuilder {{/str}}</h2>
 <div class="reportbuilder-report"
      data-region="core_reportbuilder/report"
      data-report-id="{{id}}"
@@ -95,14 +96,14 @@
      {{#editmode}}data-editing{{/editmode}}>
     <div class="reportbuilder-wrapper d-flex flex-column flex-md-row">
         {{#editmode}}
-            <!-- Sidebar -->
+            {{! Menu sidebar }}
             {{> core_reportbuilder/local/sidebar-menu/area}}
         {{/editmode}}
-        <!-- Report -->
+        {{! Report }}
         <div class="reportbuilder-report-container">
             <div class="{{#editmode}}p-2 border{{/editmode}}">
                 <div data-region="core_reportbuilder/report-header" class="dropdown d-flex justify-content-end">
-                    <!-- Preview/Edit button -->
+                    {{! Preview/Edit button }}
                     <button data-action="toggle-edit-preview" data-edit-mode="{{editmode}}" class="btn btn-outline-secondary mr-2"
                             title="{{#editmode}}{{#str}} switchpreview, core_reportbuilder {{/str}}{{/editmode}}{{^editmode}}{{#str}} switchedit, core_reportbuilder {{/str}}{{/editmode}}">
                         {{#editmode}}
@@ -114,7 +115,7 @@
                             {{#str}} edit, core {{/str}}
                         {{/editmode}}
                     </button>
-                    <!-- Settings/Filters button -->
+                    {{! Settings/Filters button }}
                     {{#editmode}}
                         <button id="report-settings-collapse" data-toggle="collapse" data-target="#report-settings" class="btn btn-outline-secondary collapsed"
                                 title="{{#str}} reportsettingstoggle, core_reportbuilder {{/str}}">
@@ -123,20 +124,20 @@
                         </button>
                     {{/editmode}}
                     {{^editmode}}
-                        <!-- Filters -->
+                        {{! Filters }}
                         {{#filterspresent}}
                             {{>core_reportbuilder/local/filters/area}}
                         {{/filterspresent}}
                     {{/editmode}}
                 </div>
                 <div class="mt-2">
-                    <!-- Table -->
+                    {{! Table }}
                     {{{table}}}
                 </div>
             </div>
         </div>
         {{#editmode}}
-            <!-- Settings sidebar -->
+            {{! Settings sidebar }}
             {{> core_reportbuilder/local/settings/area}}
         {{/editmode}}
         </div>

diff --git a/reportbuilder/templates/local/filters/area.mustache b/reportbuilder/templates/local/filters/area.mustache
@@ -28,15 +28,15 @@
     }
 }}
 
-<!-- Filters button -->
+{{! Filters button }}
 <button class="btn btn-outline-secondary" type="button" id="dropdownFiltersButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="{{#str}} filters, moodle {{/str}}">
     {{#pix}} i/filter, core {{/pix}}
     <span data-region="filter-button-label">
         {{#filtersapplied}} {{#str}} filtersappliedx, core_reportbuilder, {{filtersapplied}} {{/str}} {{/filtersapplied}}
         {{^filtersapplied}} {{#str}} filters, moodle {{/str}} {{/filtersapplied}}
     </span>
 </button>
-<!-- Filters content -->
+{{! Filters content }}
 <div class="filters-dropdown dropdown-menu dropdown-menu-right" aria-labelledby="dropdownFiltersButton">
     <div id="filters" class="reportbuilder-filters-sidebar" data-region="report-filters">
         <div class="p-3">

diff --git a/reportbuilder/templates/local/filters/footer.mustache b/reportbuilder/templates/local/filters/footer.mustache
@@ -23,4 +23,4 @@
     {
     }
 }}
-</div>
+</div>
diff --git a/reportbuilder/templates/local/filters/header.mustache b/reportbuilder/templates/local/filters/header.mustache
@@ -29,4 +29,4 @@
         <div class="filter-name">
             {{name}}
         </div>
-    </div>
+    </div>
diff --git a/reportbuilder/templates/local/settings/area.mustache b/reportbuilder/templates/local/settings/area.mustache
@@ -122,4 +122,3 @@
         </div>
     </div>
 </div>
-
diff --git a/reportbuilder/templates/local/settings/conditions.mustache b/reportbuilder/templates/local/settings/conditions.mustache
@@ -70,4 +70,4 @@
             {{/hasactiveconditions}}
         </div>
     {{/conditions}}
-</div>
+</div>
diff --git a/reportbuilder/templates/local/settings/empty_message.mustache b/reportbuilder/templates/local/settings/empty_message.mustache
@@ -28,4 +28,4 @@
     <div class="text-xs-center text-center mt-3" data-region="empty-message">
         <p class="text-muted mt-3">{{$nothingtoshow}}{{nothingtoshow}}{{/nothingtoshow}}</p>
     </div>
-</div>
+</div>
diff --git a/reportbuilder/templates/local/settings/filters.mustache b/reportbuilder/templates/local/settings/filters.mustache
@@ -77,9 +77,13 @@
                                     {{{headingeditable}}}
                                 </div>
                             </div>
-                            <a data-action="report-remove-filter" class="ml-auto" href="#">
-                                {{#pix}}e/cancel, core, {{#str}}deletefilter, core_reportbuilder, {{{heading}}}{{/str}}{{/pix}}
-                            </a>
+                            <button class="btn btn-link p-0 ml-auto"
+                                    type="button"
+                                    data-action="report-remove-filter"
+                                    title="{{#str}}deletefilter, core_reportbuilder, {{{heading}}}{{/str}}"
+                                    aria-label="{{#str}}deletefilter, core_reportbuilder, {{{heading}}}{{/str}}">
+                                {{#pix}}e/cancel, core{{/pix}}
+                            </button>
                         </li>
                     {{/activefilters}}
                 </ul>
@@ -92,4 +96,4 @@
             {{/hasactivefilters}}
         </div>
     {{/filters}}
-</div>
+</div>
diff --git a/reportbuilder/templates/local/settings/sorting.mustache b/reportbuilder/templates/local/settings/sorting.mustache
@@ -54,7 +54,11 @@
                         {{>core/drag_handle}}
                         {{#sorticon}}
                             <span class="float-right">
-                                <button class="btn btn-link p-0" data-action="report-toggle-sort-direction" title="{{{title}}}"
+                                <button id="toggle-sort-direction-{{id}}"
+                                        class="btn btn-link p-0"
+                                        data-action="report-toggle-sort-direction"
+                                        title="{{{title}}}"
+                                        aria-label="{{{title}}}"
                                         {{^sortenabled}}disabled{{/sortenabled}}>
                                     {{#sorticon}}{{#pix}}{{key}}, {{component}}{{/pix}}{{/sorticon}}
                                 </button>
@@ -76,4 +80,4 @@
             {{/ core_reportbuilder/local/settings/empty_message }}
         {{/hassortablecolumns}}
     {{/sorting}}
-</div>
+</div>
diff --git a/reportbuilder/templates/local/sidebar-menu/card.mustache b/reportbuilder/templates/local/sidebar-menu/card.mustache
@@ -41,4 +41,4 @@
             </div>
         {{/body}}
     {{/ core_reportbuilder/toggle_card }}
-</div>
+</div>
diff --git a/reportbuilder/templates/table_header_cell.mustache b/reportbuilder/templates/table_header_cell.mustache
@@ -35,12 +35,16 @@
         <div class="d-flex justify-content-between mb-2">
             <small class="text-muted text-nowrap text-uppercase">{{entityname}} &bull; {{name}}</small>
             <span class="text-nowrap">
-                <a data-action="report-remove-column" class="nomargin" href="#">
-                    {{#pix}}e/cancel, core, {{#str}}deletecolumn, core_reportbuilder, {{{name}}}{{/str}}{{/pix}}
-                </a>
+                <button class="btn btn-link p-0"
+                        data-action="report-remove-column"
+                        type="button"
+                        title="{{#str}}deletecolumn, core_reportbuilder, {{{name}}}{{/str}}"
+                        aria-label="{{#str}}deletecolumn, core_reportbuilder, {{{name}}}{{/str}}">
+                    {{#pix}}e/cancel, core{{/pix}}
+                </button>
             </span>
         </div>
-        <h5 class="text-nowrap">{{{headingeditable}}}</h5>
+        <h3 class="h5 text-nowrap">{{{headingeditable}}}</h3>
         <small class="text-muted text-nowrap">{{{aggregationeditable}}}</small>
     </div>
 </div>
diff --git a/reportbuilder/templates/toggle_card.mustache b/reportbuilder/templates/toggle_card.mustache
@@ -29,26 +29,26 @@
     }
 }}
 <div class="card reportbuilder-toggle-card mb-2">
-    <div class="card-header p-0" id="{{$id}}{{/id}}-heading">
+    <div class="card-header p-0">
         <div class="d-flex align-items-center bg-light mb-0 p-1">
             <div class="ml-3">
                 <span class="mr-1">{{$header}}{{/header}}</span> {{$helpicon}}{{/helpicon}}
             </div>
             <button class="btn toggle-card-button nomargin ml-auto {{$collapsed}}{{/collapsed}}"
                     data-toggle="collapse"
-                    data-target="#{{$id}}{{/id}}"
+                    data-target="#{{$id}}{{uniqid}}{{/id}}"
                     aria-expanded="true"
-                    aria-controls="{{$id}}{{/id}}"
+                    aria-controls="{{$id}}{{uniqid}}{{/id}}"
                     title="{{#str}}showhide, core_reportbuilder, {{$header}}{{/header}}{{/str}}"
             >
                 <span class="collapsed-icon-container"><i class="toggle-card-icon fa fa-lg fa-angle-down"></i></span>
                 <span class="expanded-icon-container"><i class="toggle-card-icon fa fa-lg fa-angle-up"></i></span>
             </button>
         </div>
     </div>
-    <div id="{{$id}}{{/id}}" class="collapse {{$collapsed}}show{{/collapsed}}" aria-labelledby="{{$id}}{{/id}}-heading">
+    <div id="{{$id}}{{uniqid}}{{/id}}" class="collapse {{$collapsed}}show{{/collapsed}}">
         <div class="card-body p-0">
             {{$body}}{{/body}}
         </div>
     </div>
-</div>
+</div>
diff --git a/reportbuilder/tests/behat/cardview.feature b/reportbuilder/tests/behat/cardview.feature
@@ -39,7 +39,7 @@ Feature: Manage card view settings in the report editor
     And the following fields match these values:
       | Columns visible       | 3     |
       | First column title    | Yes   |
-    And I click on "Delete column 'Full name'" "link"
+    And I click on "Delete column 'Full name'" "button"
     And I click on "Delete" "button" in the "Delete column 'Full name'" "dialogue"
     # Check that 'Columns visible' select updates taking into account report maximum columns.
     And the field "visiblecolumns" matches value "2"

diff --git a/reportbuilder/tests/behat/columneditor.feature b/reportbuilder/tests/behat/columneditor.feature
@@ -63,7 +63,7 @@ Feature: Manage custom report columns
       | report    | uniqueidentifier |
       | My report | user:fullname    |
     And I am on the "My report" "reportbuilder > Editor" page logged in as "admin"
-    When I click on "Delete column 'Full name'" "link"
+    When I click on "Delete column 'Full name'" "button"
     And I click on "Delete" "button" in the "Delete column 'Full name'" "dialogue"
     Then I should see "Deleted column 'Full name'"
     And I should see "Nothing to display"
diff --git a/reportbuilder/tests/behat/columnsortingeditor.feature b/reportbuilder/tests/behat/columnsortingeditor.feature
@@ -67,6 +67,6 @@ Feature: Manage custom report columns sorting
     Given I click on "Show/hide settings sidebar" "button"
     And I change window size to "large"
     And I click on "Show/hide 'Sorting'" "button"
-    When I click on "Delete column 'Username'" "link"
+    When I click on "Delete column 'Username'" "button"
     And I click on "Delete" "button" in the "Delete column 'Username'" "dialogue"
     Then I should not see "Username" in the "#settingssorting" "css_element"
diff --git a/reportbuilder/tests/behat/conditioneditor.feature b/reportbuilder/tests/behat/conditioneditor.feature
@@ -60,7 +60,7 @@ Feature: Manage custom report conditions
       | Email address operator | Does not contain |
       | Email address value    | user02           |
     And I click on "Apply" "button" in the "[data-region='settings-conditions']" "css_element"
-    And I click on "Delete condition 'Email address'" "link"
+    And I click on "Delete condition 'Email address'" "button"
     And I click on "Delete" "button" in the "Delete condition 'Email address'" "dialogue"
     Then I should see "Deleted condition 'Email address'"
     And I should see "There are no conditions selected" in the "[data-region='settings-conditions']" "css_element"

diff --git a/reportbuilder/tests/behat/filtereditor.feature b/reportbuilder/tests/behat/filtereditor.feature
@@ -79,7 +79,7 @@ Feature: Manage custom report filters
     And I am on the "My report" "reportbuilder > Editor" page logged in as "admin"
     When I click on "Show/hide settings sidebar" "button"
     And I click on "Show/hide 'Filters'" "button"
-    And I click on "Delete filter 'Email address'" "link"
+    And I click on "Delete filter 'Email address'" "button"
     And I click on "Delete" "button" in the "Delete filter 'Email address'" "dialogue"
     Then I should see "Deleted filter 'Email address'"
     And I should see "There are no filters selected" in the "[data-region='active-filters']" "css_element"