2016-07-14 6 views
0

モーダルビューにアクセス可能な日付ピッカーポップアップを追加しようとしています。 'タイムカードフォーム'をクリックするとモーダルが開きます。モーダル内のタブを使用します。カレンダーアイコンがフォーカスされると、スペースバーがカレンダーポップアップを開きます。このポップアップの中で、月選択アイコン、曜日または閉じるボタンにアクセスするためにタブを使用し、次に選択するために戻ることができます。つまり、タブオーダーはカレンダーポップアップ内に折り返されます。私はまた、矢印キーを使用して、焦点が合っている日を踏むことができるはずです。これはすべて、モーダルの外でdatepickerを使用するときに機能します。 datePickerをモーダルの中に置くと、カレンダーはフォーカスを維持できず、タブでポップアップが閉じられます。モード内のjQueryポップアップDatepickerがフォーカスを維持しない

私は問題がこのコードのビットであるかなり確信している:

// Hide the entire page (except the date picker) 
    // from screen readers to prevent document navigation 
    // (by headings, etc.) while the popup is open 
    $("main").attr('id','dp-container'); 
    $("#dp-container").attr('aria-hidden','true'); 
    $("#skipnav").attr('aria-hidden','true'); 

私はここにjsfiddleで一緒にすべての部品を引っ張って、いくつかの困難を持っていたが例のURLです:http://lucillekenney-demos.com/sass-muse/time2.html

どんな方向にも大変感謝しています。

p.s. Bootstrapのdatepickerは私がアクセスできないと言われているので使用していません。

答えて

0

aria-hiddenコードがこの問題を引き起こしていると思われる場合は、間違っていると思います。 aria-hidden属性は、スクリーン・リーダー・ユーザーだけのキーボード・ユーザーには影響を与えません。キーボードユーザーは、引き続きaria-hidden属性を持つ要素にアクセスできます。

関連する問題