keyboard TAB selection is not visible
up vote
0
down vote
favorite
I have an angular application, when I use keyboard TAB to move around the elements, current focused element is not highlighting.
This is how it looks like when I TAB to an element
This is when I then click on space to expand the accordionTab
I then added the following CSS but it's working only on mouse hover BUT not on tab selection.
::ng-deep {
.ui-accordion-header:hover, .ui-accordion-header:active, .ui-accordion-header:focus {
border: solid #00a1cf 1px !important;
}
}
I had been testing, it is working when I force select focus in chrome developer tools but not when I keyboard tab select.
I am unable to figure out why its not highlighting when focused using keyboard TAB. Can anyone help me out? Thanks in advance :)
html5 css3 focus angular6 primeng
asked Nov 9 at 21:26
Extreme
681516
add a comment |
up vote
0
down vote
favorite
I have an angular application, when I use keyboard TAB to move around the elements, current focused element is not highlighting.
This is how it looks like when I TAB to an element
This is when I then click on space to expand the accordionTab
I then added the following CSS but it's working only on mouse hover BUT not on tab selection.
::ng-deep {
.ui-accordion-header:hover, .ui-accordion-header:active, .ui-accordion-header:focus {
border: solid #00a1cf 1px !important;
}
}
I had been testing, it is working when I force select focus in chrome developer tools but not when I keyboard tab select.
I am unable to figure out why its not highlighting when focused using keyboard TAB. Can anyone help me out? Thanks in advance :)
html5 css3 focus angular6 primeng
asked Nov 9 at 21:26
Extreme
681516
Are you using a third party library like angular material for your accordion? If so, you may want to check their documentation for intercepting keyboard events and focusing on their elements. Good general discussions about this on MDN-Widgets, and MDN-Focus and Selection
– dmcgrandle
Nov 11 at 1:25
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I have an angular application, when I use keyboard TAB to move around the elements, current focused element is not highlighting.
This is how it looks like when I TAB to an element
This is when I then click on space to expand the accordionTab
I then added the following CSS but it's working only on mouse hover BUT not on tab selection.
::ng-deep {
.ui-accordion-header:hover, .ui-accordion-header:active, .ui-accordion-header:focus {
border: solid #00a1cf 1px !important;
}
}
I had been testing, it is working when I force select focus in chrome developer tools but not when I keyboard tab select.
I am unable to figure out why its not highlighting when focused using keyboard TAB. Can anyone help me out? Thanks in advance :)
html5 css3 focus angular6 primeng
asked Nov 9 at 21:26
Extreme
681516
I have an angular application, when I use keyboard TAB to move around the elements, current focused element is not highlighting.
This is how it looks like when I TAB to an element
This is when I then click on space to expand the accordionTab
I then added the following CSS but it's working only on mouse hover BUT not on tab selection.
::ng-deep {
.ui-accordion-header:hover, .ui-accordion-header:active, .ui-accordion-header:focus {
border: solid #00a1cf 1px !important;
}
}
I had been testing, it is working when I force select focus in chrome developer tools but not when I keyboard tab select.
I am unable to figure out why its not highlighting when focused using keyboard TAB. Can anyone help me out? Thanks in advance :)
html5 css3 focus angular6 primeng
html5 css3 focus angular6 primeng
asked Nov 9 at 21:26
Extreme
681516
asked Nov 9 at 21:26
Extreme
681516
edited Nov 12 at 20:56
asked Nov 9 at 21:26
Extreme
681516
asked Nov 9 at 21:26
Extreme
681516
asked Nov 9 at 21:26
Extreme
681516
681516
Are you using a third party library like angular material for your accordion? If so, you may want to check their documentation for intercepting keyboard events and focusing on their elements. Good general discussions about this on MDN-Widgets, and MDN-Focus and Selection
– dmcgrandle
Nov 11 at 1:25
add a comment |
Are you using a third party library like angular material for your accordion? If so, you may want to check their documentation for intercepting keyboard events and focusing on their elements. Good general discussions about this on MDN-Widgets, and MDN-Focus and Selection
– dmcgrandle
Nov 11 at 1:25
Are you using a third party library like angular material for your accordion? If so, you may want to check their documentation for intercepting keyboard events and focusing on their elements. Good general discussions about this on MDN-Widgets, and MDN-Focus and Selection
– dmcgrandle
Nov 11 at 1:25
Are you using a third party library like angular material for your accordion? If so, you may want to check their documentation for intercepting keyboard events and focusing on their elements. Good general discussions about this on MDN-Widgets, and MDN-Focus and Selection
– dmcgrandle
Nov 11 at 1:25
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
What does the markup look like? Normally when tabbing to focus the elements that have focus by default are:
- a (anchors)
- buttons
- inputs
- textareas
If you have a different type of element such as a div, you can try and give it focus by adding tabindex to your markup.
answered Nov 10 at 9:42
Jose Guerra
543
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
What does the markup look like? Normally when tabbing to focus the elements that have focus by default are:
- a (anchors)
- buttons
- inputs
- textareas
If you have a different type of element such as a div, you can try and give it focus by adding tabindex to your markup.
answered Nov 10 at 9:42
Jose Guerra
543
add a comment |
up vote
0
down vote
What does the markup look like? Normally when tabbing to focus the elements that have focus by default are:
- a (anchors)
- buttons
- inputs
- textareas
If you have a different type of element such as a div, you can try and give it focus by adding tabindex to your markup.
answered Nov 10 at 9:42
Jose Guerra
543
add a comment |
up vote
0
down vote
up vote
0
down vote
What does the markup look like? Normally when tabbing to focus the elements that have focus by default are:
- a (anchors)
- buttons
- inputs
- textareas
If you have a different type of element such as a div, you can try and give it focus by adding tabindex to your markup.
answered Nov 10 at 9:42
Jose Guerra
543
What does the markup look like? Normally when tabbing to focus the elements that have focus by default are:
- a (anchors)
- buttons
- inputs
- textareas
If you have a different type of element such as a div, you can try and give it focus by adding tabindex to your markup.
answered Nov 10 at 9:42
Jose Guerra
543
answered Nov 10 at 9:42
Jose Guerra
543
answered Nov 10 at 9:42
Jose Guerra
543
answered Nov 10 at 9:42
Jose Guerra
543
543
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53233473%2fkeyboard-tab-selection-is-not-visible%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Are you using a third party library like angular material for your accordion? If so, you may want to check their documentation for intercepting keyboard events and focusing on their elements. Good general discussions about this on MDN-Widgets, and MDN-Focus and Selection
– dmcgrandle
Nov 11 at 1:25