fluid.updateAriaLabel(element,

text,

options)

Section
Column width 70% Update the ARAI label of an element. Code Block javascript bgColor white borderStyle none javascript fluid.updateAriaLabel(element, text, options);

{code} *

File

name:

* {{

FluidView.js

}} h2. Parameters {span:class=

Parameters Span class borderless-table

} |*{{element}}*|

element (CSS-based

selector,

single-element

jQuery

object,

or

DOM

elemen)

Identifies

the

element

to

described.

| |*{{text}}*|

text (String)

The

text

description.

| |*{{options}}*|

options (Object)

Optional:

An

object

containing

properties

to

customize

the

functioning

of

the

ARIA

labeller.

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

Return Value Span class borderless-table 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}}). |

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

text The text to place in the live region (only used if dynamicLabel is true). none Column width 5% Column 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);
        });
    }
}