It has been brought to my attention that MDL-50554 might have caused a regression in terms of accessibility. This is down to 'tab focus' being I believe the outline that is placed on an element by CSS when the tab key is used and an element has focus.
The story of this being:
a:focus {
.tab-focus();
}of: https://github.com/moodle/moodle/blob/master/theme/bootstrapbase/less/bootstrap/reset.less#L49-L52 implemented as:
.tab-focus() {
// Default
outline: thin dotted #333;
// Webkit
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}of: https://github.com/moodle/moodle/blob/master/theme/bootstrapbase/less/bootstrap/mixins.less#L27-L35.
Therefore my current line of thinking being that the issue is caused by the negative 'top' on the img implemented as:
.block_settings .block_tree li.item_with_icon > p img {vertical-align:middle;position:absolute;left:0;top:-1px; width: 16px; height: 16px;}of: https://github.com/moodle/moodle/blob/master/blocks/settings/styles.css#L12. So, I think what is happening is that the outline applies and conflicts in Chrome with the calculation of the img position being outside of its 'box'. This then translates into movement as the browser repaints on a mouse move. The negative 'top' is there to make the icon 'look good' against the set size of text etc. The solution could be to not have the 'outline' on the img only or somehow reduce the size of the icon so that 'top' could be '0'. But the either might not work and the latter will have 'complaints' about the look and feel changing - arrrggghh!
Thoughts / solutions please.
Kind regards,
Gareth
