I'm using React and javascript to style my webpage, and I have implemented a skip link in my navbar that takes the user further down the page when clicked. This skip link only comes into focus when the user hits the tab key, but it is positioned above the site logo in the navbar and so needs more space when it is visible. I want to increase the height of my navbar when the link is visible, and right now I am using a boolean called linkHasFocus (for some conditional CSS styling), along with a function called checkFocus, to do that:
const TopNavbar = styled. div`
...
height: ${props => (props.linkHasFocus ? '9rem' : '4rem')};
...
`;
And here's the checkFocus function:
const checkFocus = () => {
const elem = document.getElementById('skip-link');
if (elem === document.activeElement) {
this.linkHasFocus = true;
}
this.linkHasFocus = false;
return this.linkHasFocus;
};
I then pass this to my TopNavbar component (which is the parent of my skip link component) in my return function like so:
<TopNavbar linkHasFocus={checkFocus}>
But it seems the checkFocus function isn't updating the linkHasFocus variable correctly. My understanding of props and javascript in general is a little shaky, so apologies if there's glaring issues here.
