RE: Possible Carousel demo for the APG, please review.

Excellent thanks ☺

In the short term I’ve zipped and uploaded the working code to
http://whatsock.com/test/Carousel%20(Flat%20from%20XML%20with%20Overrides).zip

This is designed to be a scalable widget, so it may help for me to briefly explain the files it contains.

From demo.htm, it references the CSS and JavaScript files as normal.
E.G
First it loads jQuery,
Second it loads the AccDC normalization plugin for jQuery
Third it loads the Carousel module,
Fourth it loads the general setup.js file that configures the carousel functionality, which is reflected in the attached ReadMe.txt file.

So the place where the offset positioning is controled is within the carousel_module.js module file, where it begins with the following code lines

                                                                                                                                                                                                runBefore: function(dc){
                                                                                                                                                                                                                dc.cssObj.height = bDiv.clientHeight;
                                                                                                                                                                                                                dc.cssObj.width = bDiv.clientWidth;

And so on within that code block. This is where it calculates the height and width of each slide panel as well as the starting top and left properties.

It seems likely though that the problem may stem from the issue that all of the images are not actually the same height and width, which I didn’t notice till now.

The markup for these is contained within the text file: files/carousel.xml, where it includes the markup that is rendered in each slide like so:

<slide announce="Emiliana Torrini - Love in the Time of Science" ><![CDATA[
<img src="img/music/ar_et_lts.jpg" alt="Emiliana Torrini - Love in the Time of Science" title="Emiliana Torrini - Love in the Time of Science" />
]]></slide>

It might be more useful to add markup like so instead

<slide announce="Emiliana Torrini - Love in the Time of Science" ><![CDATA[
<div class=”slide1”>
<img src="img/music/ar_et_lts.jpg" alt="Emiliana Torrini - Love in the Time of Science" title="Emiliana Torrini - Love in the Time of Science" />
</div>
]]></slide>

And then to add padding values in the CSS file custom.css to adjust for the different image height and width ratios between each slide. That may do the trick.

Within the file setup.js, the DOM positioning and additional controls are configured within the function ‘renderFn’, which is how the numerical buttons and keyboard functionality is setup.

If it makes sense, I can add another div node and place this before centerDiv (which is where the slides are dynamically generated), and add an O icon positioned in the top right corner for doing this, or if you wish to give it a swing you are welcome as well ☺ I’m not sure where the best positioning for something like this would be.

E.G To make the same code equally compatible across jQuery, Dojo, and MooTools, the syntax would be like the following:

Var topDiv = $A.createEl(‘div’, {
// Attribute1: ‘value1’,
// Attribute2: ‘value2’
// etc.
}, {
// CSSProp1: ‘value1’,
// CSSProp2: ‘value2’
// etc.
}, ‘className clearfix whateverHere’, optionalDomNodesToAppend);

It’s just an event binding to stop the carousel, like so:

$A.bind(buttonDOMNode, {
click: function(ev){
var dc = $A.reg['carouselId'];
dc.enableAuto(false);
ev.preventDefault();
}
});

Plus a redundant keyDown handler of course if this is a simulated element.

Also, if it’s desirable to change something like a class or content when the carousel starts or stopps rotating, this can be configured using the ‘stopStateChange’ handler like so:

stopStateChange: function(isStopped, dc){
// isStopped = true or false
// do something
},

This too is documented in the attached ReadMe file too.

I’ve added this in case it’s helpful, but I will of course add these things to save time since I can usually do this fairly quickly.

If you can help me get the CSS issue worked out though, that would really be appreciated. I think the key is the markup within the XML file and adding a fixed padding for differently sized images within the CSS file, but any insights would be great.

All the best,
Bryan


From: Michiel Bijl [mailto:michiel@agosto.nl]
Sent: Tuesday, November 17, 2015 3:00 PM
To: Bryan Garaventa <bryan.garaventa@ssbbartgroup.com>
Cc: Protocols and Formats Working Group <public-pfwg@w3.org>
Subject: Re: Possible Carousel demo for the APG, please review.

No problem Bryan. Once you post the code I can have a look at the offset bug.

A button before the carousel itself would work. Not sure what the guide or WCAG says, but should the carousel autoplay, or should the button perhaps say “play”? I’m for/against either, just a question.

—Michiel

On 17 Nov 2015, at 19:19, Bryan Garaventa <bryan.garaventa@ssbbartgroup.com<mailto:bryan.garaventa@ssbbartgroup.com>> wrote:

Thanks, I’ll package up a copy of the regular code in a bit for download. It’s difficult for me to track down strictly visual stuff like the offsets, so if you could help with this that would be awesome. I can show you where this is in the code.

Adding a pause element is no problem, it takes me longer to figure out where to put this in the layout.

All the best,
Bryan

From: Michiel Bijl [mailto:michiel@agosto.nl]
Sent: Tuesday, November 17, 2015 4:27 AM
To: Bryan Garaventa <bryan.garaventa@ssbbartgroup.com<mailto:bryan.garaventa@ssbbartgroup.com>>
Cc: Protocols and Formats Working Group <public-pfwg@w3.org<mailto:public-pfwg@w3.org>>
Subject: Re: Possible Carousel demo for the APG, please review.

This looks like a good start!

Found some issues:


  *   No visual way to pause the slider, this is needed to satisfy WCAG 2.2.2;
  *   Offset of slides goes out of sync after a while.

Could you provide a un-minified version of the slider code?

Some VoiceOver testing with Safari 9 on OS X 10.10 Yosemite:


  *   Title for content is spoken when focused on slide itself (image portion);
  *   Didn’t hear it group next/prev buttons, but not sure what that should sound like;
  *   All buttons are spoken correctly.

—Michiel

On 16 Nov 2015, at 21:03, Bryan Garaventa <bryan.garaventa@ssbbartgroup.com<mailto:bryan.garaventa@ssbbartgroup.com>> wrote:

Also, this exposes a bug in JAWS16 in IE11 where it won’t recognize the shared button grouping between the Prev and Next buttons, though there is no reason why this should be the case since this is simply a role=”group” with embedded role=”button” elements. Confirmed using JAWS16 + IE11 + Win7. I’m not sure if this occurs in JAWS17 however or in later OS versions.

This also makes use of the new aria-current attribute within the numerical indicators as well, though there is currently no browser or AT support for this as yet. This can be examined within the DOM using a DOM viewer utility.

From: Bryan Garaventa [mailto:bryan.garaventa@ssbbartgroup.com]
Sent: Monday, November 16, 2015 11:48 AM
To: 'PF' <public-pfwg@w3.org<mailto:public-pfwg@w3.org>>
Subject: Possible Carousel demo for the APG, please review.

Hi,
I've been working on a carousel demo that uses different concepts than those previously explored such as Tabs and Listboxes, which I find to be more intuitive from a UX perspective. This is meant to be in accordance with the guidance at
http://www.w3.org/WAI/tutorials/carousels/


This is live at
http://whatsock.com/tsg/Coding%20Arena/Carousels,%20Slideshows,%20and%20Wizards/Carousel%20(Flat%20from%20XML%20with%20Overrides)/demo.htm

This uses standard button roles plus named region and group to identify associated button groupings, plus CSS tooltips for added keyboard-only user accessibility support, plus a one tab stop scrollable slide region for single keypress navigation if desired for keyboard-only users.

The slides just include images at the moment as placeholders, but can be anything from multiple images, combinations of images and links and form fields, etc.

Please let me know if I’ve missed anything or if anything looks off.

Thanks,
Bryan