Versions Compared

Old Version 1

changes.mady.by.user Anastasia Cheetham

Saved on

compared with

New Version 2

changes.mady.by.user Anastasia Cheetham

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
This example ...
Div
classapi-page

fluid.updateAriaLabel(element, text, options)

Section
Column
width70%

Compose any number of path segments, none of which may be emptyUpdate the ARAI label of an element.

Code Block
javascript
javascript
bgColorwhite
borderStylenone
fluid.updateAriaLabel(element, text, options);

File name: FluidView.js

Parameters

Span
classborderless-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

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

"fluid-ariaLabeller-liveRegion"

text

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

none

Column
width5%

Column

See Also

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.

Code Block
javascript
javascript

This example ...

Code Block
javascriptjavascript

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.

Code Block
javascript
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);
        });
    }
}