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 the TAB is on an element

enter image description here

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

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;

    }

}

enter image description here

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 :)

edited yesterday

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

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

enter image description here

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

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;

    }

}

enter image description here

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 :)

edited yesterday

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

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

enter image description here

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

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;

    }

}

enter image description here

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 :)

edited yesterday

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

enter image description here

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

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;

    }

}

enter image description here

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

edited yesterday

asked yesterday

Extreme

656516

edited yesterday

asked yesterday

Extreme

656516

edited yesterday

asked yesterday

Extreme

656516

asked yesterday

Extreme

656516

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 |

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

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

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

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

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 19 hours ago

Jose Guerra

161

New contributor

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

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

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

answered 19 hours ago

Jose Guerra

161

New contributor

answered 19 hours ago

Jose Guerra

161

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 |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Name

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

搜尋此網誌

Vfrdtyky