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

enter image description here

This is when I then click on space to expand the accordionTab
enter image description here

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;

enter image description here

I had been testing, it is working when I force select focus in chrome developer tools but not when I keyboard tab select.

enter image description here

I am unable to figure out why its not highlighting when focused using keyboard TAB. Can anyone help me out? Thanks in advance :)

edited Nov 12 at 20:56

asked Nov 9 at 21:26

Extreme

666516

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

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

enter image description here

This is when I then click on space to expand the accordionTab
enter image description here

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;

enter image description here

I had been testing, it is working when I force select focus in chrome developer tools but not when I keyboard tab select.

enter image description here

I am unable to figure out why its not highlighting when focused using keyboard TAB. Can anyone help me out? Thanks in advance :)

edited Nov 12 at 20:56

asked Nov 9 at 21:26

Extreme

666516

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

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

enter image description here

This is when I then click on space to expand the accordionTab
enter image description here

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;

enter image description here

I had been testing, it is working when I force select focus in chrome developer tools but not when I keyboard tab select.

enter image description here

I am unable to figure out why its not highlighting when focused using keyboard TAB. Can anyone help me out? Thanks in advance :)

edited Nov 12 at 20:56

asked Nov 9 at 21:26

Extreme

666516

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

enter image description here

This is when I then click on space to expand the accordionTab
enter image description here

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;

enter image description here

I had been testing, it is working when I force select focus in chrome developer tools but not when I keyboard tab select.

enter image description here

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

edited Nov 12 at 20:56

asked Nov 9 at 21:26

Extreme

666516

edited Nov 12 at 20:56

asked Nov 9 at 21:26

Extreme

666516

edited Nov 12 at 20:56

asked Nov 9 at 21:26

Extreme

666516

asked Nov 9 at 21:26

Extreme

666516

asked Nov 9 at 21:26

Extreme

666516

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

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 |

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

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

Name

Required, but never shown

1 Answer
1

active

oldest

votes

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 |

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

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

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Pfthb