keyboard TAB selection is not visible
Multi tool use
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 the TAB is on an element
This is when I click on space to expand the accordionTab
I added the following CSS then its working only on mouse hover BUT 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 when I keyboard tab selected.
I am unable to figure out why its not highlighting when fucused using keyboard TAB. Can anyone help me out? Thanks in advance :)
html5 css3 focus angular6 primeng
asked yesterday
Extreme
656516
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 the TAB is on an element
This is when I click on space to expand the accordionTab
I added the following CSS then its working only on mouse hover BUT 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 when I keyboard tab selected.
I am unable to figure out why its not highlighting when fucused using keyboard TAB. Can anyone help me out? Thanks in advance :)
html5 css3 focus angular6 primeng
asked yesterday
Extreme
656516
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
4 hours ago
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 the TAB is on an element
This is when I click on space to expand the accordionTab
I added the following CSS then its working only on mouse hover BUT 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 when I keyboard tab selected.
I am unable to figure out why its not highlighting when fucused using keyboard TAB. Can anyone help me out? Thanks in advance :)
html5 css3 focus angular6 primeng
asked yesterday
Extreme
656516
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 the TAB is on an element
This is when I click on space to expand the accordionTab
I added the following CSS then its working only on mouse hover BUT 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 when I keyboard tab selected.
I am unable to figure out why its not highlighting when fucused using keyboard TAB. Can anyone help me out? Thanks in advance :)
html5 css3 focus angular6 primeng
html5 css3 focus angular6 primeng
asked yesterday
Extreme
656516
asked yesterday
Extreme
656516
edited yesterday
asked yesterday
Extreme
656516
asked yesterday
Extreme
656516
asked yesterday
Extreme
656516
656516
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
4 hours ago
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
4 hours ago
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
4 hours ago
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
4 hours ago
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 19 hours ago
Jose Guerra
161
New contributor
Jose Guerra is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
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 19 hours ago
Jose Guerra
161
New contributor
Jose Guerra is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
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 19 hours ago
Jose Guerra
161
New contributor
Jose Guerra is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
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 19 hours ago
Jose Guerra
161
New contributor
Jose Guerra is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
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 19 hours ago
Jose Guerra
161
New contributor
Jose Guerra is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered 19 hours ago
Jose Guerra
161
New contributor
Jose Guerra is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered 19 hours ago
Jose Guerra
161
answered 19 hours ago
Jose Guerra
161
161
New contributor
Jose Guerra is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
Jose Guerra is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Jose Guerra is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
add a comment |
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
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
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
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
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
wyX,yiytKgc ZIJA09p3DCpujvKX wUVln9 u,RF3QFnnWT c,Zlw x
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
4 hours ago