:关注 jQuery

Question

为什么这不起作用，我该如何正确地做到这一点

if ($('#ch03').is(':focus')) {
  $('this').attr("aria-grabbed","true");
} else {
  $('this').attr("aria-grabbed","false");
}

或基于我无法开始工作的现有 SO 解决方案

var inFocus = false;
$('#ch03').focus(function() {
    $('#ch03').attr("aria-grabbed","true");
});

$('#ch03').blur(function() {
    $('#ch03').attr("aria-grabbed","false");
});

HTML

<div id="activity_contents">
<div id="columns" class="clearfix">
<div id="col_1" class="column">
<div class="column_head">Section A</div>
  <ul id="tier1" class="connected" role="region" aria-labelledby="col_1" aria-dropeffect="move">
  </ul>
<div class="clearfix"></div>
</div>
<div id="col_2" class="column">
<div class="column_head">Section  B</div>
  <ul id="tier2" class="connected" role="region" aria-labelledby="col_2" aria-dropeffect="move">
  </ul>
</div>
<div id="col_3" class="column">
<div class="column_head">Section C</div>
  <ul id="tier3" class="connected" role="region" aria-labelledby="col_3" aria-    dropeffect="move">
  </ul>
</div>
<div id="col_4" class="column last">
<div class="column_head">Section  D </div>
  <ul id="tier4" class="connected" role="region" aria-labelledby="col_4" aria-dropeffect="move">
  </ul>
</div>
</div>
<div id="well" class="clearfix">
  <ul id="choices" class="connected" aria-labelledby="well" role="region">
    <li id="ch01" class="choice"><a href="#">Drag item 1</a></li>
    <li id="ch03" class="choice"><a href="#">Drag item 2</a></li>
    <li id="ch04" class="choice"><a href="#">Drag item 3</a></li>
    <li id="ch02" class="choice"><a href="#">Drag item 4</a></li>
  </ul>
</div>
</div>

感谢您对此提供的任何帮助。代码来自 jQueriUI dragnDrop/Sortable。我想要实现的是通过动态添加 aria-roles 使其更易于访问。

Answer 1

选项 1 : 依赖于 DOM 上的 click 事件，它检查元素是否有焦点然后设置属性 aria-grabbed值。

$(document).on("click",function(){
  $("#ch03").attr("aria-grabbed",$("#ch03").is(':focus'));
});

示例：https://jsfiddle.net/DinoMyte/2oygeh0w

选项 2： 只需触发元素上的 focus 和 blur 事件即可设置属性“aria-grabbed”的值。

 $("#ch03").on("focus",function(){
      $(this).attr("aria-grabbed",true);
    }).on("blur",function()
    {
      $(this).attr("aria-grabbed",false);
    });;

示例：https://jsfiddle.net/DinoMyte/2oygeh0w/1/

UPDATE ：根据您发布的 html，如果您尝试在焦点上的每个 li 上设置属性 'aria-grabbed'。

$('#choices li a').on("focus",function(e)
{
     $(this).closest('li').attr("aria-grabbed",true);
     $(this).addClass("selected");   

}).on("blur",function(e)
{
       $(this).closest('li').attr("aria-grabbed",false);
      $(this).removeClass("selected");
});

示例：https://jsfiddle.net/DinoMyte/2oygeh0w/3/

Answer 2

使用 DinoMyte 的方法和来自 sitepoint 网站的一些代码 http://www.sitepoint.com/accessible-drag-drop/

/***** 测试

****/

//get the collection of draggable targets and add their draggable attribute
for(var 
    targets = document.querySelectorAll('[data-draggable="target"]'), 
    len = targets.length, 
    i = 0; i < len; i ++)
{
    targets[i].setAttribute('aria-dropeffect', 'none');
}

//get the collection of draggable items and add their draggable attributes
for(var 
    items = document.querySelectorAll('[data-draggable="item"]'), 
    len = items.length, 
    i = 0; i < len; i ++)
{
    items[i].setAttribute('draggable', 'true');
    items[i].setAttribute('aria-grabbed', 'false');
    items[i].setAttribute('tabindex', '0');
}
//Place some dynamic aria roles for accessibility
$("#ch01").on("focus",function(){
  $(this).attr("aria-grabbed",true);
}).on("blur",function()
{
  $(this).attr("aria-grabbed",false);
});
$("#ch02").on("focus",function(){
  $(this).attr("aria-grabbed",true);
}).on("blur",function()
{
  $(this).attr("aria-grabbed",false);
});
$("#ch03").on("focus",function(){
  $(this).attr("aria-grabbed",true);
}).on("blur",function()
{
  $(this).attr("aria-grabbed",false);
});
$("#ch04").on("focus",function(){
  $(this).attr("aria-grabbed",true);
}).on("blur",function()
{
  $(this).attr("aria-grabbed",false);
});

//end

仍然需要清理，但这个想法可行。一次一小步，我会在你的帮助下到达那里:-)

:关注 jQuery

:focus in jQuery

jquery

focus