CODEWITHSUNDEEP
htmlmaterial-designaccessibility
Mike
Mike

Reputation: 1139

How to set Material design list to behave like getmdl-select dropdown (respond to keyboard arrows and tab)

The standard material design select list (dropdown) support accessibility. I can get to the dropdown with a TAB (keyboard), navigate the list items with the arrows (keyboard) and by pressing again on tab it will navigate to other component on the screen. Means, the behavior is: TAB navigate between the components on the screen and arrows navigate between the items in the list.

Example:

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select getmdl-select__fix-height">
    <input class="mdl-textfield__input" type="text" id="names" value="select name" readonly>
    <ul for="names" class="mdl-menu mdl-menu--bottom-left mdl-js-menu">
        <li class="mdl-menu__item" data-val="1">name1</li>
        <li class="mdl-menu__item" data-val="1">name2</li>
        <li class="mdl-menu__item" data-val="1">name3</li>
    </ul>
</div>

JSFIDDLE

I would like to have the same behavior but for a list:

<div>
  <ul tabindex="0" id="categories-list" class="mdl-list">
              <li class="mdl-list__item <TMPL_VAR NAME='category_selected'>" data-name="name" value="name id1">
                    <span class="mdl-list__item-primary-content">name 1</span>
              </li>
              <li class="mdl-list__item <TMPL_VAR NAME='category_selected'>" data-name="name" value="name id2">
                    <span class="mdl-list__item-primary-content">name 2</span>
                </li>
              <li class="mdl-list__item <TMPL_VAR NAME='category_selected'>" data-name="name" value="name id2">
                    <span class="mdl-list__item-primary-content">name 2</span>
              </li>
        </ul>
</div>

JSFIDDLE

Currently, when pressing on the arrows it only scroll the scrollbar (in case the list is long). I tried to add tabindex="0" to each "li" tag but it will allows navigating the list with the tab and not with the arrows.

Is it possible?

Thanks in advance!

Upvotes: 0

Views: 1195

Answers (1)

KrubYou
KrubYou

Reputation: 11

Dynamically usage For dynamically usage, you must add getmdlSelect.init(cssSelector) in javascript code, (where cssSelector, for example, is ".getmdl-select" or "#mySelect"), after new item is created or any new element added to existing list.

Pre-selected item To set pre-selected value add data-selected="true" attribute to corresponding li in your list

PLEASE READ from this site : https://github.com/CreativeIT/getmdl-select

Example

after you get data and input value after that add like this

$('ul[for="xxx_field_name"] li[data-val="'+xxx_value+'"]').attr('data-selected',true); 
getmdlSelect.init('.getmdl-select');

it work for me! good luck :)

Upvotes: 1

Related Questions