Improve tab navigations accessibility with Home and End keys

[Rezyan]

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');
	}
});

[yashviradia]

Hi,
I would like to work on this issue.
Could you pl assign it to me?

[Rezyan]

Hi, I would like to work on this issue. Could you pl assign it to me?

Hi, I think @julien-deramond could assign this issue to you. Thanks for your help.