This documentation is currently being moved to our new documentation site.

Please view or edit the documentation there, instead.

If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 3 Next »

fluid.updateAriaLabel(element, text, options)

Update the ARAI label of an element.

fluid.updateAriaLabel(element, text, options);

File name: FluidView.js

Parameters

element (CSS-based selector, single-element jQuery object, or DOM elemen) Identifies the element to described.
text (String) The text description.
options (Object) Optional: An object containing properties to customize the functioning of the ARIA labeller.

Return Value

Object The ARIA labeller object.

Options

Name

Description

Default

dynamicLabel

A boolean indicating whether or not a live region should be created an associated with the element.

false

liveRegionMarkup

The mark-up to use in the creation of the live region (only used if dynamicLabel is true).

"<div class=\"liveRegion fl-offScreen-hidden\" aria-live=\"polite\"></div>"

liveRegionId

The ID to assign to the live region (only used if dynamicLabel is true).

"fluid-ariaLabeller-liveRegion"

text

The text to place in the live region (only used if dynamicLabel is true).

none

See Also

  • [ARIA Labeller]

Examples

The following function (taken from the Infusion Uploader component) uses fluid.updateAriaLabel() to add the file name and size information to items in the list of files in the Uploader queue. 

var renderRowFromTemplate = function (that, file) {
    var row = that.rowTemplate.clone(),
        fileName = file.name,
        fileSize = fluid.uploader.formatFileSize(file.size);
    
    row.removeClass(that.options.styles.hiddenTemplate);
    that.locate("fileName", row).text(fileName);
    that.locate("fileSize", row).text(fileSize);
    that.locate("fileIconBtn", row).addClass(that.options.styles.remove);
    row.prop("id", file.id);
    row.addClass(that.options.styles.ready);
    bindRowHandlers(that, row);
    fluid.updateAriaLabel(row, fileName + " " + fileSize);
    return row;    
};

The example below is taken from the Infusion Reorderer component. This event listener uses fluid.updateAriaLabel to label the reordered items with information about their positioning in the list. The second call to fluid.updateAriaLabel creates a live region that specifies where the moved item was moved from.

listeners: {
    onRefresh: function () {
        var selectables = that.dom.locate("selectables");
        fluid.each(selectables, function (selectable) {
            var labelOptions = {};
            var id = fluid.allocateSimpleId(selectable);
            var moved = movedMap[id];
            var label = that.renderLabel(selectable);
            var plainLabel = label;
            if (moved) {
                moved.newRender = plainLabel;
                label = that.renderLabel(selectable, moved.oldRender.position);
                $(selectable).one("focusout", function () {
                    if (movedMap[id]) {
                        var oldLabel = movedMap[id].newRender.label;
                        delete movedMap[id];
                        fluid.updateAriaLabel(selectable, oldLabel);
                    }
                });
                labelOptions.dynamicLabel = true;
            }
            fluid.updateAriaLabel(selectable, label.label, labelOptions);
        });
    }
}
  • No labels