Closed
Description
Prerequisites
- I have searched for duplicate or closed feature requests
- I have read the contributing guidelines
Proposal
I suggest to improve tab navigations (e.g. .nav-tabs) accessibility with the keyboard:
Home: moves focus to the FIRST tab and activates it.End: moves focus to the LAST tab and activates it.
The idea is taken from the W3C example.
Motivation and context
This could be useful for users using keyboards, and this enhancement would be the continuation of #33079 (keyboard accessibility with arrow keys).
I've already implemented it in one of my website. This is much the same as the implementation for arrow keys. My jQuery code looks like below:
$(document).on('keydown', '.nav-link[data-bs-toggle="tab"]', (event) =>
{
if (['Home', 'End'].includes(event.key))
{
event.preventDefault();
const $tabs = $(event.currentTarget).parents('.nav[role="tablist"]').find('.nav-link[data-bs-toggle="tab"]').not('.disabled');
const $tabToShow = (event.key === 'Home') ? $tabs.first() : $tabs.last();
$tabToShow.get(0).focus({
preventScroll: true
});
$tabToShow.tab('show');
}
});