moodle/moodle
3
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-08-06 01:16:44 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

MDL-70846 accessibility: update tree attributes to pass a11y check

Browse source 
- Move aria-* atrributes from <p> to <li>
- Move "role" attribute from <p> to <li>
- Update behat tests

Based on reference implementation from:
- https://www.w3.org/TR/wai-aria-practices-1.1/examples/treeview/treeview-2/treeview-2a.html
- https://www.w3.org/WAI/GL/wiki/Using_ARIA_trees
This commit is contained in:
Dongsheng Cai 2021-05-25 20:38:51 +10:00
parent 30b8ad51f4
commit e3690a392d
14 changed files with 67 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

12
theme/boost/scss/moodle/blocks.scss
View file

@ -322,8 +322,8 @@ body.drawer-open-left #region-main.has-blocks {
.block_navigation .block_tree [aria-expanded="false"] {
background-image: none;
}
.block_settings .block_tree [aria-expanded="true"]:before,
.block_navigation .block_tree [aria-expanded="true"]:before {
.block_settings .block_tree [aria-expanded="true"] > p:before,
.block_navigation .block_tree [aria-expanded="true"] > p:before {
content: $fa-var-angle-down;
margin-right: 0;
@include fa-icon();
@ -331,8 +331,8 @@ body.drawer-open-left #region-main.has-blocks {
width: 16px;
}
.block_settings .block_tree [aria-expanded="false"]:before,
.block_navigation .block_tree [aria-expanded="false"]:before {
.block_settings .block_tree [aria-expanded="false"] > p:before,
.block_navigation .block_tree [aria-expanded="false"] > p:before {
content: $fa-var-angle-right;
margin-right: 0;
@include fa-icon();
@ -340,8 +340,8 @@ body.drawer-open-left #region-main.has-blocks {
width: 16px;
}
.dir-rtl {
.block_settings .block_tree [aria-expanded="false"]:before,
.block_navigation .block_tree [aria-expanded="false"]:before {
.block_settings .block_tree [aria-expanded="false"] > p:before,
.block_navigation .block_tree [aria-expanded="false"] > p:before {
content: $fa-var-angle-left;
}
}

12
theme/boost/style/moodle.css
View file

@ -12744,8 +12744,8 @@ input[disabled] {
.block_navigation .block_tree [aria-expanded="false"] {
background-image: none; }
.block_settings .block_tree [aria-expanded="true"]:before,
.block_navigation .block_tree [aria-expanded="true"]:before {
.block_settings .block_tree [aria-expanded="true"] > p:before,
.block_navigation .block_tree [aria-expanded="true"] > p:before {
content: "";
margin-right: 0;
display: inline-block;
@ -12757,8 +12757,8 @@ input[disabled] {
font-size: 16px;
width: 16px; }
.block_settings .block_tree [aria-expanded="false"]:before,
.block_navigation .block_tree [aria-expanded="false"]:before {
.block_settings .block_tree [aria-expanded="false"] > p:before,
.block_navigation .block_tree [aria-expanded="false"] > p:before {
content: "";
margin-right: 0;
display: inline-block;
@ -12770,8 +12770,8 @@ input[disabled] {
font-size: 16px;
width: 16px; }
.dir-rtl .block_settings .block_tree [aria-expanded="false"]:before,
.dir-rtl .block_navigation .block_tree [aria-expanded="false"]:before {
.dir-rtl .block_settings .block_tree [aria-expanded="false"] > p:before,
.dir-rtl .block_navigation .block_tree [aria-expanded="false"] > p:before {
content: ""; }
.block_navigation .block_tree p.hasicon,

12
theme/classic/style/moodle.css
View file

@ -12966,8 +12966,8 @@ input[disabled] {
.block_navigation .block_tree [aria-expanded="false"] {
background-image: none; }
.block_settings .block_tree [aria-expanded="true"]:before,
.block_navigation .block_tree [aria-expanded="true"]:before {
.block_settings .block_tree [aria-expanded="true"] > p:before,
.block_navigation .block_tree [aria-expanded="true"] > p:before {
content: "";
margin-right: 0;
display: inline-block;
@ -12979,8 +12979,8 @@ input[disabled] {
font-size: 16px;
width: 16px; }
.block_settings .block_tree [aria-expanded="false"]:before,
.block_navigation .block_tree [aria-expanded="false"]:before {
.block_settings .block_tree [aria-expanded="false"] > p:before,
.block_navigation .block_tree [aria-expanded="false"] > p:before {
content: "";
margin-right: 0;
display: inline-block;
@ -12992,8 +12992,8 @@ input[disabled] {
font-size: 16px;
width: 16px; }
.dir-rtl .block_settings .block_tree [aria-expanded="false"]:before,
.dir-rtl .block_navigation .block_tree [aria-expanded="false"]:before {
.dir-rtl .block_settings .block_tree [aria-expanded="false"] > p:before,
.dir-rtl .block_navigation .block_tree [aria-expanded="false"] > p:before {
content: ""; }
.block_navigation .block_tree p.hasicon,