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);
        });
    }
}

Browser not supported