Page Comparison

Update the ARAI label of an element.

{section}
{column:width=70%}
Update the ARAI label of an element.
{code:javascript|borderStyle=none|bgColor=white}
fluid.updateAriaLabel(element, text, options);

{code}
*File name:* {{FluidView.js

Parameters

}}

h2. Parameters

{span:class=borderless-table

}
|*{{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

{div:class=api-page

}

h1. fluid.updateAriaLabel(element, text, options)

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).

.  |
{span}

h2. Return Value
{span:class=borderless-table}
|*Object*| The ARIA labeller object. |
{span}

h2. 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).

}} |
|*{{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

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.

 |
|*{{text}}*| The text to place in the live region (only used if {{dynamicLabel}} is {{true}}).  | none |

{column}

{column:width=5%}
{column}

{column}
h3. See Also
* [ARIA Labeller]
{column}
{section}
----

h3. Examples
The following function (taken from the Infusion [Infusion13:Uploader] component) uses {{fluid.updateAriaLabel()}} to add the file name and size information to items in the list of files in the Uploader queue. 
{code:javascript}
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;    
};
{code}

The example below is taken from the Infusion [Reorderer|Infusion13: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.

{code

:javascript

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

{div}