Добавление стиля к делает его недоступным с клавиатуры. ⇐ Html

[Anonymous]

У меня есть интерфейсное приложение Angular, в котором элементы меню должны быть полностью доступны через клавиатуру.
Моя проблема в том, что мне нужно добавить к элементам меню некоторое форматирование стиля - и я застрял между элементами меню, имеющими форматирование, и элементами меню, недоступными с клавиатуры.
Если использовать кнопку без какого-либо форматирования стиля, она доступна через клавиатура.
Например, если я реализую это таким образом, используя компонент кнопки для пункта меню, он будет нормально работать с клавиатурой:
Вот содержимое моего .html-файла:

Код: Выделить всё

Click Me

А вот содержимое моего файла .ts:

Код: Выделить всё

@Component({
standalone: false,
selector: 'app-navigation',
templateUrl: './navigation.component.html',
styleUrls: ['./navigation.component.scss']
})
export class NavigationComponent implements OnInit {
items: MenuItem[];

constructor() {
this.items = [
{
label: 'File',
items: [
{ label: 'New', icon: 'pi pi-fw pi-plus' },
{ label: 'Open', icon: 'pi pi-fw pi-download' }
]
},
{
label: 'Edit',
items: [
{ label: 'Undo', icon: 'pi pi-fw pi-refresh' }
]
}
];
}

ngOnInit() {
}
}

И это полностью доступно через клавиатуру. Все, что мне нужно сделать, это нажать TAB, а затем ENTER, и меню открывается нормально:


Однако проблема в том, что я хочу добавить немного стиля к кнопке. Он должен быть больше похож на пункт меню, чем на кнопку. Однако как только я это сделаю, он станет недоступен с клавиатуры.
Если я добавлю следующий стиль из таблицы стилей .scss:

Код: Выделить всё

.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
text-align: left;
cursor: pointer;
font-family: inherit; /* Important for vertical align on mobile phones */
margin: 0; /* Important for vertical align on mobile phones */
}

На такую ​​кнопку:

Код: Выделить всё

Click Me

Это выглядит намного лучше — больше похоже на пункт меню:


Однако, как только я это делаю, доступ к клавиатуре теряется.
Оно откроется, если я воспользуюсь мышью, но не когда я нажму TAB и ENTER.
Должен быть способ одновременно использовать стиль и доступность клавиатуры?
большое спасибо!>

Подробнее здесь: https://stackoverflow.com/questions/797 ... e-keyboard