SeaMonkey:Toolkit Transition:PrefwindowPanes:HowTo: Difference between revisions

Edit [http://mxr.mozilla.org/seamonkey/source/suite/common/pref/preferences.xul /suite/common/pref/preferences.xul] (or the respective overlay, if e.g. you're migrating a MailNews panel) and set the following attributes on the respective <treeitem>:

* SeaMonkey's derived <prefpane> 'paneload' handler is called, loading the scripts specified in the <prefpane>'s 'script' attribute. If defined, the <prefpane>'s Startup() function is called, so that <preference> elements can be created dynamically.<br><i style="color:red">Mind that UI elements tied to <preference>s are '''not''' yet initialized to their <preference> value here!</i> Instead, simply read the value directly from the <preference> element.

 

Fortunately this is usually simply achieved by moving the oncommand or similar handler to an onchange handler on the <preference> element itself.

 

== Accessibility markup enhancements ==

 

 

 

The other way to label a control is to use the "aria-labelledby" attribute on the XUL control that is to be labelled. The "aria-labelledby" attribute's value consists  of one or more IDs of other elements that make up the label. An example is the "keep history for x days" combination. There is one label in front of the textbox "keep history for", then there's the value of days inside the textbox, and another label following that only contains the "days" appendix.  If we used the "control" attribute on the preceeding label, the label would only be "Keep history for". However the user would not know what: Days, Months, Eons?  So we use a little trick borrowed from Web 2.0 accessibility technology: We make up the label out of the first label, followed by the contents of the textbox, followed by the trailing label. The IDs of these are to be enclosed in quotes and separated by spaces.  Of course, the two labels will need to get IDs for this to work.

 

"aria-labelledby" can also be used if you actually need a XUL:description element to label something (because you might need wrapping). Instead of giving the XUL:description element the "control" attribute, give it an ID instead, and give the control it is labelling an "aria-labelledby" attribute with the ID of the XUL:description element that is labelling it.  If we used the "control" attribute on the XUL:description, it would become the AccDescription property of the control's accessible, which is usually used to give additional information rather than the main name.

 

 

 

                size="3"

 

Note that this has already a simple label/textbox association. However it can be improved like this:

 

        <label value="&pageHis.label;"

        <label value="&days.label;"

              id="histTrailLabel"/>

 

The accessible name for the textbox will become the first label, followed by the value currently inside the textbox, followed by the trailing label, giving the control a much more meaningful name. Keeping the "control" attribute on the label ensures that, if it is clicked, the textbox gets focus. "aria-labelledby" will, if present, override the label/textbox association for the accessible name.

 

Quoting [https://bugzilla.mozilla.org/show_bug.cgi?id=429143#c17 bug 429143 comment 17]:

 

 

* The access key should obviously be part of the control's caption/label.