Moodle

I was able to see Moodle under "Windows High Contrast Black" mode, but I could not see what buttons are not showing, could you please give us an example of what button is missing?

Hi Nick,

Could you please advise the test environment?

Thanks,

Yu

Found it, I had to disable all colors in accessibility settings!

Original description: Expand/collapse block buttons - These buttons are not visible under Windows High Contrast Black settings. Need to ensure that these are visible under all settings. High.

block hide/show button image is stored in CSS as background behind a clearer, it is switched using JS trick named elementToggleHide()
the problem is that background images are "ignored" after disabling the colors in accessibility settings in IE - the theme does not matter here

Solution:
hmmm...
some other JS trick that would manipulate normal image?
Or two buttons and hiding them alternatively?

In anycase my JS knowledge is not good enough for this task.

I've added javascript to replace the plus/minus image on the fly when hide/show is toggled.

The screenshot shows Moodle Features on IE6/ Windows XP Pro in "Windows High Contrast Black". I activated it from the Control Panel - Accessibility Options - Display tab - tick Use High Contrast (and press Settings button - choose High Constrast Black (large) from the drop-down. (Note, refresh page after configuring.)

The attach screen shot shows me hovering over a "Show or hide block" button, which IS invisible (I knew where to look!) So whatever fix was tried has not worked - reopened.
Thanks

Nick

The attached patch is a POSSIBLE solution - it adds white borders (white=invisible. Note, "transparent" didn't work in IE 6 non-High Contrast) on the "Show and hide block" button-links which appear blue/ purple in High Contrast Black mode. Or we could add the border on the element enclosing the link, which then appears white.

1 file affected - theme/standard/styles_color.css

Do NOT commit yet - I am taking advice! Many thanks
Nick

Partial fix in HEAD and 1.8 branch, using patch, because 1.8.3 is imminent.

IMPORTANT: not complete!

The white border is quite disturbing in standardwhite - I expected a bug when I saw it. Why not create a real high contrast theme and let users always choose those accessibility supporting themes? Breaking normal themes to support accessibility is definitely the wrong way.

Why has the CSS been added to the end of the file and not in the block section???

Hi Urs, sorry for the delay. This was a temporary hack, and now I'm looking at a proper solution! To address your points:

-"The white border is quite disturbing in standardwhite" - I thought the effect with this theme was barely noticeable (white on pale grey sideblock header background). I agree that other themes - cornflower, wood, chameleon?, and other user's themes would need modifying, so not ideal.

• "Why not create a real high contrast theme" - yes, that could be worthwhile ( http://moodle.org/mod/forum/discuss.php?d=85119 ) but is not sufficient on its own, because
  1. many users who need high contrast, need it across their system not just in the browser (and hiding blocks may be very useful for these people to reduce screen clutter);
  2. it needs to be configured per install;
  3. users need to know about it.

–
On to my solution:
-It replaces <a href="#" onclick=".."><img src="spacer.gif" alt="[generic text]" /></a>, with
<input type="image" onclick=".." src="switch_minus.gif" alt="[specific text]" />
-The foreground image stays visible in "Windows High Contrast" mode.
-The SRC and ALT attributes are switched in Javascript.
The images can be themed using "smartpix": Admin - Miscellaneous - Experimental - smartpix (manipulates $CFG>pixpath).
-Specific text, example "Show Latest News block", "Hide Latest News block".
-Text is multi-language - passed in via PHP.

The attached patch is not final (it contains a bug to do with cookies/initialisation). It affects 6 files:
-blocks/moodleblock.class.php - block_base::_title_html method.
-lib/javascript-static.js - elementToggleHIde, elementCookieHide functions.
-lib/weblib.php - print_side_block_end function probably needs changing.
-lang/en_utf8/access.php
-theme/standard/styles_color.css - removing rules, including border hack.
-theme/standard/styles_layout.css

Comments welcome! Thanks, Nick

New patch to follow this weekend - I'd like to commit to 1.9 and HEAD start of next week - preferably Monday.
Ciao.

OK, version 4js of the patch, fixes the bug in the previous patch, and effects 2 more files:
-pix/t/switch_plus.gif
-pix/t/switch_minus.gif
Increase contrast, reduce rgb of + from about 79 to 49 (0 is black, 256 white).

Fix: now elementToggleHide Javascript function knows about the "togglehide_" ID prefix.

I have tested, with mouse and keyboard (TAB, ENTER):

• IE 6, Firefox 2/Win, Safari, Opera 9.

Can I commit?

Nick, I voted for your patch. But I think it's important that MartinD checks the solution.

Is your JavaScript solution the only way to go? It looks so much more complicated than the simple CSS approach.

And do your findings imply that icon handling can't be done with CSS? I ask because there have been discussions to change icon handling in Moodle to CSS background images.

Hi Martin - welcome back!
This patch (version 4.1 js, replaces v4 js) fixes bug MDL-7493 properly, by replacing the CSS background images with a foreground image, switched with Javascript. This makes it visible in Windows High Contrast Black (see previous comments for further details). I'd like to commit this to 1.9 and HEAD - is this OK?

–
Hi Urs, thanks for the vote!

Yes, I believe Javascript is the only solution, and it's not too complicated (the original buttons used Javascript anyway).

And no, I don't think significant images like icons should be CSS background images as there is a danger they will "disappear", in Windows High Contrast Mode, user style sheets and similar situations. This would be a backwards step. Smartpix (Admin - Miscellaneous - Experimental - smartpix) is a way to theme foreground images.
Where is the discussion about CSS icons?

Thanks Nick

Hi,
I forgot to say in my comments yesterday, my solution is similar to that committed by Yu/ vyshane for revision 1.19/ 11-Dec-2006. Unfortunately this was overwritten, I think by mistake, on the next revision 3 days later and no one spotted it - were the CSS background images left in in as well, making the presence/absence of the foreground image invisible?
Nick

I've committed fixes to the 8 files on HEAD, 1.9 and 1.8 branches, tagged merged.

Martin, let me know if you don't agree with the fix.
Thanks.

I realised that other themes re-style the hide-show button, so they need modifying. This patch affects 2+5+3 files:

Fix transparency! (Thanks sam - on GIMP)
-pix/t/switch_minus.gif
-pix/t/switch_plus.gif

Remove reference to 'root' pix as background, that is: url(../../pix/t/switch_minus.gif),
-theme/metal/colors.css
-theme/chameleon/user_styles.css -Urs, OK?
-theme/formal_white/fw_color.css
-theme/custom_corners/user_styles.css
-theme/oceanblue/styles_color.css

Fix CSS selectors - these themes override the icons - need to use "Smartpix":
-theme/orangewhite/styles_layout.css
-theme/orangewhite/styles_color.css -icons need moving to orangewhite/pix/t/
-theme/wood/styles_color.css -Eloy, OK?

Reopening.
I'm going to commit fixes for the icon transparency now (see previous comment/patch) - and I await comments before committing the other fixes.
Many thanks.

After much confusion I've finally fixed the images (moodle/pix/t/switch_minus, plus.gif) in Head, 1.9 and 1.8 branches. A summary of revisions:
-r 1.1 original grey on transparent background, not great contrast in standard theme,
-r 1.2 darker grey on white (transparency broken) background, better contrast in standard theme, the best for Windows High Contrast Black mode (WHCB), but no good for themes,
-r 1.3 darker grey on transparent background, poorer contrast in WHCB!
-r 1.4, 1.1.22.2 etc, reverts to r 1.1, grey on transparent background, acceptable in standard theme and WHCB, the best compromise!

I have tested Wood theme, with Smartpix in normal mode - the black on transparent Wood +- icons are correctly substituted.

Notes,
-The folder icons in the Site Administration block disappear in WHCB/high contrast - they aren't important so OK.
-For WHCB/high contrast the safest option is plain black on white icons, no transparency, but this is not ideal for theming.

Well,

under wood, with smartpix disabled, the grey pixs are showed, correct? Only if we enable smartpix the black ones are showed.

And that's caused because they aren't anymore background pixs (css) but explicit ones (html), correct?

IMO the grey pixs look a bit annoying under wood but I think that's not important so I would suggest to:

1) Disable current .hide-show-image selectors in wood (they aren't needed now that pixs are html).
2) Put a note in theme README in order to have custompix enabled for better normal browsing.

Some day (2.0), with custompix becoming the default for all themes.

Perhaps the same 1) & 2) must be done in all themes with custom minus/plus background pixs, because they aren't going to be used anymore, isn't it?

Ciao

I noticed a problem with HTML in titles getting into the title tags ... added strip_tags to those.

Thanks Martin - I've copied you're fix to weblib.php - print_side_block_end.

I've committed the themes cleanup - details above, with explanations in the readme for 'wood' and orangewhite.
Finally fixed.

Great job, Nick! Wood looks really curious in my Mac high contrast, inverse colors. What a "blues wood them"

With the + - buttons perfectly contrasted, of course.

Ciao

Show/hide block buttons are displayed and work normally. Moodle is usable but most themes appear exactly the same. Closing.