Mixing
How do I make an accessible onClick handler for links in React?
I have a link in my React application that calls an onClick handler as follows:
<a onClick={handleClick}>Link</a>
However, since I'm not using the native href attribute, this handler does not get activated when I focus the link, then press Enter.
Now, of course I could add an onKeyDown handler, then check whether the key that was pressed is Space or Enter and, if it is, call handleClick. However, I'm afraid that that won't be enough to capture all accessibility nuances, nor whether it will behave exactly like regular links.
Thus, the question is: is there a way to indicate that I want my function to be called when the link is followed by whatever possible interaction method?
reactjs accessibility web-accessibility
asked Jan 2 at 14:11
VincentVincent
1,41211930
|
show 1 more comment
I have a link in my React application that calls an onClick handler as follows:
<a onClick={handleClick}>Link</a>
However, since I'm not using the native href attribute, this handler does not get activated when I focus the link, then press Enter.
Now, of course I could add an onKeyDown handler, then check whether the key that was pressed is Space or Enter and, if it is, call handleClick. However, I'm afraid that that won't be enough to capture all accessibility nuances, nor whether it will behave exactly like regular links.
Thus, the question is: is there a way to indicate that I want my function to be called when the link is followed by whatever possible interaction method?
reactjs accessibility web-accessibility
asked Jan 2 at 14:11
VincentVincent
1,41211930
Are you using React Router in your application ?
– Olivier Boissé
Jan 2 at 14:28
@reach/router, but in this case it's an actual<a>element, not a<Link>.
– Vincent
Jan 2 at 15:08
so why not using aLink?
– Olivier Boissé
Jan 2 at 15:10
Because it's not a link to a different page in the application. It performs different actions depending on the current app state, ranging from making a GET request and updating the view depending on the response, to opening a pop-up.
– Vincent
Jan 2 at 15:15
1
Sounds like<button>would be a better fit?
– steveax
Jan 2 at 22:48
|
show 1 more comment
I have a link in my React application that calls an onClick handler as follows:
<a onClick={handleClick}>Link</a>
However, since I'm not using the native href attribute, this handler does not get activated when I focus the link, then press Enter.
Now, of course I could add an onKeyDown handler, then check whether the key that was pressed is Space or Enter and, if it is, call handleClick. However, I'm afraid that that won't be enough to capture all accessibility nuances, nor whether it will behave exactly like regular links.
Thus, the question is: is there a way to indicate that I want my function to be called when the link is followed by whatever possible interaction method?
reactjs accessibility web-accessibility
asked Jan 2 at 14:11
VincentVincent
1,41211930
I have a link in my React application that calls an onClick handler as follows:
<a onClick={handleClick}>Link</a>
However, since I'm not using the native href attribute, this handler does not get activated when I focus the link, then press Enter.
Now, of course I could add an onKeyDown handler, then check whether the key that was pressed is Space or Enter and, if it is, call handleClick. However, I'm afraid that that won't be enough to capture all accessibility nuances, nor whether it will behave exactly like regular links.
Thus, the question is: is there a way to indicate that I want my function to be called when the link is followed by whatever possible interaction method?
reactjs accessibility web-accessibility
reactjs accessibility web-accessibility
asked Jan 2 at 14:11
VincentVincent
1,41211930
asked Jan 2 at 14:11
VincentVincent
1,41211930
asked Jan 2 at 14:11
VincentVincent
1,41211930
asked Jan 2 at 14:11
VincentVincent
1,41211930
asked Jan 2 at 14:11
VincentVincent
1,41211930
1,41211930
Are you using React Router in your application ?
– Olivier Boissé
Jan 2 at 14:28
@reach/router, but in this case it's an actual<a>element, not a<Link>.
– Vincent
Jan 2 at 15:08
so why not using aLink?
– Olivier Boissé
Jan 2 at 15:10
Because it's not a link to a different page in the application. It performs different actions depending on the current app state, ranging from making a GET request and updating the view depending on the response, to opening a pop-up.
– Vincent
Jan 2 at 15:15
1
Sounds like<button>would be a better fit?
– steveax
Jan 2 at 22:48
|
show 1 more comment
Are you using React Router in your application ?
– Olivier Boissé
Jan 2 at 14:28
@reach/router, but in this case it's an actual<a>element, not a<Link>.
– Vincent
Jan 2 at 15:08
so why not using aLink?
– Olivier Boissé
Jan 2 at 15:10
Because it's not a link to a different page in the application. It performs different actions depending on the current app state, ranging from making a GET request and updating the view depending on the response, to opening a pop-up.
– Vincent
Jan 2 at 15:15
1
Sounds like<button>would be a better fit?
– steveax
Jan 2 at 22:48
Are you using React Router in your application ?
– Olivier Boissé
Jan 2 at 14:28
Are you using React Router in your application ?
– Olivier Boissé
Jan 2 at 14:28
@reach/router, but in this case it's an actual
<a> element, not a <Link>.– Vincent
Jan 2 at 15:08
@reach/router, but in this case it's an actual
<a> element, not a <Link>.– Vincent
Jan 2 at 15:08
so why not using a
Link ?– Olivier Boissé
Jan 2 at 15:10
so why not using a
Link ?– Olivier Boissé
Jan 2 at 15:10
Because it's not a link to a different page in the application. It performs different actions depending on the current app state, ranging from making a GET request and updating the view depending on the response, to opening a pop-up.
– Vincent
Jan 2 at 15:15
Because it's not a link to a different page in the application. It performs different actions depending on the current app state, ranging from making a GET request and updating the view depending on the response, to opening a pop-up.
– Vincent
Jan 2 at 15:15
1
1
Sounds like
<button> would be a better fit?– steveax
Jan 2 at 22:48
Sounds like
<button> would be a better fit?– steveax
Jan 2 at 22:48
|
show 1 more comment
2 Answers
2
active
oldest
votes
an <a> tag without an href is no longer valid. Instead of trying to reimplement focus and keyboard logic, use a button and style however you like. Semantically, if it is firing an onClick it should most likely be a button and will be most accessible.
For reference https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md
answered Jan 2 at 23:24
JustHJustH
1,03758
Agreed, although one correction. An <a> without anhrefis valid. It's just not a link and is not a tab stop.
– slugolicious
Jan 3 at 1:20
I'm guessing I should change it into a button (it currently is ana[role="button"], which doesn't sound too logical a day later). Still, the question remains: do I still need to add my ownonKeyDownhandler? Or do I wrap it in a form and listen toonSubmit? Anything else?
– Vincent
Jan 3 at 8:37
1
<a role="button">is semantically correct - screen readers will announce it as a button. BUT it also needs to behave like a button, i.e. it needs to be operable with the spacebar as well as the return key. So yes, you do need a key handler to emulate this. By contrast, a HTML<button>is already set up to be operable by space-or-return, so you can just use the click handler for that. The browser knows that soace-or-return on a button is the same as a click. Use a button!
– andrewmacpherson
Jan 4 at 20:46
@vincent if you use a<button>it will handle onKeyDown for you
– JustH
Jan 4 at 23:33
@JustH Cool, I did not know that and cannot find docs on it, but it appears to be true. That saves quite a bit of uncertainty, thanks!
– Vincent
Jan 7 at 10:45
|
show 1 more comment
You have the right idea onKeyDown or something needs to be set.
Ideally I would recommend using a library like Microsoft's FabricUI or Material which do all of this behind the scenes.
Alternatively you can use react-a11y package which has checks for such things. Following is the check for onClick
https://github.com/reactjs/react-a11y/blob/master/docs/rules/click-events-have-key-events.md
answered Jan 2 at 14:23
codebreachcodebreach
1,3831224
1
Thanks, guess I'll be going for adding my own keyDown handler then and hope I cover all the basis. I'd rather not adopt all the styling and such that come with things like Fabric or Material.
– Vincent
Jan 2 at 15:39
The point I was trying to make is that react-a11y will give you warnings when your code is not a11y compatible. So instead of hunting for issues you will know exactly what to fix and where.
– codebreach
Jan 2 at 22:27
instead of relying on complex UI libraries, use semantic HTML and make the element abuttonand you get everything for free (minus having to reset styles)
– JustH
Jan 2 at 23:25
Thanks @codebreach, I prefer to use a linter for that, but otherwise I agree with your point. Ideally, however, this would be fixed automatically rather than a warning telling me to do it manually.
– Vincent
Jan 3 at 8:34
@JustH That's what I'd prefer to do. Unfortunately, the element contains some other elements that, as far as I'm aware, don't really lend themselves well to a button. Using a button would also require me to embed it in a form and to handle theonSubmitevent, no?
– Vincent
Jan 3 at 8:35
|
show 2 more comments
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',
autoActivateHeartbeat: false,
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
});
}
});
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%2f54007850%2fhow-do-i-make-an-accessible-onclick-handler-for-links-in-react%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
an <a> tag without an href is no longer valid. Instead of trying to reimplement focus and keyboard logic, use a button and style however you like. Semantically, if it is firing an onClick it should most likely be a button and will be most accessible.
For reference https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md
answered Jan 2 at 23:24
JustHJustH
1,03758
Agreed, although one correction. An <a> without anhrefis valid. It's just not a link and is not a tab stop.
– slugolicious
Jan 3 at 1:20
I'm guessing I should change it into a button (it currently is ana[role="button"], which doesn't sound too logical a day later). Still, the question remains: do I still need to add my ownonKeyDownhandler? Or do I wrap it in a form and listen toonSubmit? Anything else?
– Vincent
Jan 3 at 8:37
1
<a role="button">is semantically correct - screen readers will announce it as a button. BUT it also needs to behave like a button, i.e. it needs to be operable with the spacebar as well as the return key. So yes, you do need a key handler to emulate this. By contrast, a HTML<button>is already set up to be operable by space-or-return, so you can just use the click handler for that. The browser knows that soace-or-return on a button is the same as a click. Use a button!
– andrewmacpherson
Jan 4 at 20:46
@vincent if you use a<button>it will handle onKeyDown for you
– JustH
Jan 4 at 23:33
@JustH Cool, I did not know that and cannot find docs on it, but it appears to be true. That saves quite a bit of uncertainty, thanks!
– Vincent
Jan 7 at 10:45
|
show 1 more comment
an <a> tag without an href is no longer valid. Instead of trying to reimplement focus and keyboard logic, use a button and style however you like. Semantically, if it is firing an onClick it should most likely be a button and will be most accessible.
For reference https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md
answered Jan 2 at 23:24
JustHJustH
1,03758
Agreed, although one correction. An <a> without anhrefis valid. It's just not a link and is not a tab stop.
– slugolicious
Jan 3 at 1:20
I'm guessing I should change it into a button (it currently is ana[role="button"], which doesn't sound too logical a day later). Still, the question remains: do I still need to add my ownonKeyDownhandler? Or do I wrap it in a form and listen toonSubmit? Anything else?
– Vincent
Jan 3 at 8:37
1
<a role="button">is semantically correct - screen readers will announce it as a button. BUT it also needs to behave like a button, i.e. it needs to be operable with the spacebar as well as the return key. So yes, you do need a key handler to emulate this. By contrast, a HTML<button>is already set up to be operable by space-or-return, so you can just use the click handler for that. The browser knows that soace-or-return on a button is the same as a click. Use a button!
– andrewmacpherson
Jan 4 at 20:46
@vincent if you use a<button>it will handle onKeyDown for you
– JustH
Jan 4 at 23:33
@JustH Cool, I did not know that and cannot find docs on it, but it appears to be true. That saves quite a bit of uncertainty, thanks!
– Vincent
Jan 7 at 10:45
|
show 1 more comment
an <a> tag without an href is no longer valid. Instead of trying to reimplement focus and keyboard logic, use a button and style however you like. Semantically, if it is firing an onClick it should most likely be a button and will be most accessible.
For reference https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md
answered Jan 2 at 23:24
JustHJustH
1,03758
an <a> tag without an href is no longer valid. Instead of trying to reimplement focus and keyboard logic, use a button and style however you like. Semantically, if it is firing an onClick it should most likely be a button and will be most accessible.
For reference https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md
answered Jan 2 at 23:24
JustHJustH
1,03758
answered Jan 2 at 23:24
JustHJustH
1,03758
answered Jan 2 at 23:24
JustHJustH
1,03758
answered Jan 2 at 23:24
JustHJustH
1,03758
1,03758
Agreed, although one correction. An <a> without anhrefis valid. It's just not a link and is not a tab stop.
– slugolicious
Jan 3 at 1:20
I'm guessing I should change it into a button (it currently is ana[role="button"], which doesn't sound too logical a day later). Still, the question remains: do I still need to add my ownonKeyDownhandler? Or do I wrap it in a form and listen toonSubmit? Anything else?
– Vincent
Jan 3 at 8:37
1
<a role="button">is semantically correct - screen readers will announce it as a button. BUT it also needs to behave like a button, i.e. it needs to be operable with the spacebar as well as the return key. So yes, you do need a key handler to emulate this. By contrast, a HTML<button>is already set up to be operable by space-or-return, so you can just use the click handler for that. The browser knows that soace-or-return on a button is the same as a click. Use a button!
– andrewmacpherson
Jan 4 at 20:46
@vincent if you use a<button>it will handle onKeyDown for you
– JustH
Jan 4 at 23:33
@JustH Cool, I did not know that and cannot find docs on it, but it appears to be true. That saves quite a bit of uncertainty, thanks!
– Vincent
Jan 7 at 10:45
|
show 1 more comment
Agreed, although one correction. An <a> without anhrefis valid. It's just not a link and is not a tab stop.
– slugolicious
Jan 3 at 1:20
I'm guessing I should change it into a button (it currently is ana[role="button"], which doesn't sound too logical a day later). Still, the question remains: do I still need to add my ownonKeyDownhandler? Or do I wrap it in a form and listen toonSubmit? Anything else?
– Vincent
Jan 3 at 8:37
1
<a role="button">is semantically correct - screen readers will announce it as a button. BUT it also needs to behave like a button, i.e. it needs to be operable with the spacebar as well as the return key. So yes, you do need a key handler to emulate this. By contrast, a HTML<button>is already set up to be operable by space-or-return, so you can just use the click handler for that. The browser knows that soace-or-return on a button is the same as a click. Use a button!
– andrewmacpherson
Jan 4 at 20:46
@vincent if you use a<button>it will handle onKeyDown for you
– JustH
Jan 4 at 23:33
@JustH Cool, I did not know that and cannot find docs on it, but it appears to be true. That saves quite a bit of uncertainty, thanks!
– Vincent
Jan 7 at 10:45
Agreed, although one correction. An <a> without an
href is valid. It's just not a link and is not a tab stop.– slugolicious
Jan 3 at 1:20
Agreed, although one correction. An <a> without an
href is valid. It's just not a link and is not a tab stop.– slugolicious
Jan 3 at 1:20
I'm guessing I should change it into a button (it currently is an
a[role="button"], which doesn't sound too logical a day later). Still, the question remains: do I still need to add my own onKeyDown handler? Or do I wrap it in a form and listen to onSubmit? Anything else?– Vincent
Jan 3 at 8:37
I'm guessing I should change it into a button (it currently is an
a[role="button"], which doesn't sound too logical a day later). Still, the question remains: do I still need to add my own onKeyDown handler? Or do I wrap it in a form and listen to onSubmit? Anything else?– Vincent
Jan 3 at 8:37
1
1
<a role="button"> is semantically correct - screen readers will announce it as a button. BUT it also needs to behave like a button, i.e. it needs to be operable with the spacebar as well as the return key. So yes, you do need a key handler to emulate this. By contrast, a HTML <button> is already set up to be operable by space-or-return, so you can just use the click handler for that. The browser knows that soace-or-return on a button is the same as a click. Use a button!– andrewmacpherson
Jan 4 at 20:46
<a role="button"> is semantically correct - screen readers will announce it as a button. BUT it also needs to behave like a button, i.e. it needs to be operable with the spacebar as well as the return key. So yes, you do need a key handler to emulate this. By contrast, a HTML <button> is already set up to be operable by space-or-return, so you can just use the click handler for that. The browser knows that soace-or-return on a button is the same as a click. Use a button!– andrewmacpherson
Jan 4 at 20:46
@vincent if you use a
<button> it will handle onKeyDown for you– JustH
Jan 4 at 23:33
@vincent if you use a
<button> it will handle onKeyDown for you– JustH
Jan 4 at 23:33
@JustH Cool, I did not know that and cannot find docs on it, but it appears to be true. That saves quite a bit of uncertainty, thanks!
– Vincent
Jan 7 at 10:45
@JustH Cool, I did not know that and cannot find docs on it, but it appears to be true. That saves quite a bit of uncertainty, thanks!
– Vincent
Jan 7 at 10:45
|
show 1 more comment
You have the right idea onKeyDown or something needs to be set.
Ideally I would recommend using a library like Microsoft's FabricUI or Material which do all of this behind the scenes.
Alternatively you can use react-a11y package which has checks for such things. Following is the check for onClick
https://github.com/reactjs/react-a11y/blob/master/docs/rules/click-events-have-key-events.md
answered Jan 2 at 14:23
codebreachcodebreach
1,3831224
1
Thanks, guess I'll be going for adding my own keyDown handler then and hope I cover all the basis. I'd rather not adopt all the styling and such that come with things like Fabric or Material.
– Vincent
Jan 2 at 15:39
The point I was trying to make is that react-a11y will give you warnings when your code is not a11y compatible. So instead of hunting for issues you will know exactly what to fix and where.
– codebreach
Jan 2 at 22:27
instead of relying on complex UI libraries, use semantic HTML and make the element abuttonand you get everything for free (minus having to reset styles)
– JustH
Jan 2 at 23:25
Thanks @codebreach, I prefer to use a linter for that, but otherwise I agree with your point. Ideally, however, this would be fixed automatically rather than a warning telling me to do it manually.
– Vincent
Jan 3 at 8:34
@JustH That's what I'd prefer to do. Unfortunately, the element contains some other elements that, as far as I'm aware, don't really lend themselves well to a button. Using a button would also require me to embed it in a form and to handle theonSubmitevent, no?
– Vincent
Jan 3 at 8:35
|
show 2 more comments
You have the right idea onKeyDown or something needs to be set.
Ideally I would recommend using a library like Microsoft's FabricUI or Material which do all of this behind the scenes.
Alternatively you can use react-a11y package which has checks for such things. Following is the check for onClick
https://github.com/reactjs/react-a11y/blob/master/docs/rules/click-events-have-key-events.md
answered Jan 2 at 14:23
codebreachcodebreach
1,3831224
1
Thanks, guess I'll be going for adding my own keyDown handler then and hope I cover all the basis. I'd rather not adopt all the styling and such that come with things like Fabric or Material.
– Vincent
Jan 2 at 15:39
The point I was trying to make is that react-a11y will give you warnings when your code is not a11y compatible. So instead of hunting for issues you will know exactly what to fix and where.
– codebreach
Jan 2 at 22:27
instead of relying on complex UI libraries, use semantic HTML and make the element abuttonand you get everything for free (minus having to reset styles)
– JustH
Jan 2 at 23:25
Thanks @codebreach, I prefer to use a linter for that, but otherwise I agree with your point. Ideally, however, this would be fixed automatically rather than a warning telling me to do it manually.
– Vincent
Jan 3 at 8:34
@JustH That's what I'd prefer to do. Unfortunately, the element contains some other elements that, as far as I'm aware, don't really lend themselves well to a button. Using a button would also require me to embed it in a form and to handle theonSubmitevent, no?
– Vincent
Jan 3 at 8:35
|
show 2 more comments
You have the right idea onKeyDown or something needs to be set.
Ideally I would recommend using a library like Microsoft's FabricUI or Material which do all of this behind the scenes.
Alternatively you can use react-a11y package which has checks for such things. Following is the check for onClick
https://github.com/reactjs/react-a11y/blob/master/docs/rules/click-events-have-key-events.md
answered Jan 2 at 14:23
codebreachcodebreach
1,3831224
You have the right idea onKeyDown or something needs to be set.
Ideally I would recommend using a library like Microsoft's FabricUI or Material which do all of this behind the scenes.
Alternatively you can use react-a11y package which has checks for such things. Following is the check for onClick
https://github.com/reactjs/react-a11y/blob/master/docs/rules/click-events-have-key-events.md
answered Jan 2 at 14:23
codebreachcodebreach
1,3831224
answered Jan 2 at 14:23
codebreachcodebreach
1,3831224
answered Jan 2 at 14:23
codebreachcodebreach
1,3831224
answered Jan 2 at 14:23
codebreachcodebreach
1,3831224
1,3831224
1
Thanks, guess I'll be going for adding my own keyDown handler then and hope I cover all the basis. I'd rather not adopt all the styling and such that come with things like Fabric or Material.
– Vincent
Jan 2 at 15:39
The point I was trying to make is that react-a11y will give you warnings when your code is not a11y compatible. So instead of hunting for issues you will know exactly what to fix and where.
– codebreach
Jan 2 at 22:27
instead of relying on complex UI libraries, use semantic HTML and make the element abuttonand you get everything for free (minus having to reset styles)
– JustH
Jan 2 at 23:25
Thanks @codebreach, I prefer to use a linter for that, but otherwise I agree with your point. Ideally, however, this would be fixed automatically rather than a warning telling me to do it manually.
– Vincent
Jan 3 at 8:34
@JustH That's what I'd prefer to do. Unfortunately, the element contains some other elements that, as far as I'm aware, don't really lend themselves well to a button. Using a button would also require me to embed it in a form and to handle theonSubmitevent, no?
– Vincent
Jan 3 at 8:35
|
show 2 more comments
1
Thanks, guess I'll be going for adding my own keyDown handler then and hope I cover all the basis. I'd rather not adopt all the styling and such that come with things like Fabric or Material.
– Vincent
Jan 2 at 15:39
The point I was trying to make is that react-a11y will give you warnings when your code is not a11y compatible. So instead of hunting for issues you will know exactly what to fix and where.
– codebreach
Jan 2 at 22:27
instead of relying on complex UI libraries, use semantic HTML and make the element abuttonand you get everything for free (minus having to reset styles)
– JustH
Jan 2 at 23:25
Thanks @codebreach, I prefer to use a linter for that, but otherwise I agree with your point. Ideally, however, this would be fixed automatically rather than a warning telling me to do it manually.
– Vincent
Jan 3 at 8:34
@JustH That's what I'd prefer to do. Unfortunately, the element contains some other elements that, as far as I'm aware, don't really lend themselves well to a button. Using a button would also require me to embed it in a form and to handle theonSubmitevent, no?
– Vincent
Jan 3 at 8:35
1
1
Thanks, guess I'll be going for adding my own keyDown handler then and hope I cover all the basis. I'd rather not adopt all the styling and such that come with things like Fabric or Material.
– Vincent
Jan 2 at 15:39
Thanks, guess I'll be going for adding my own keyDown handler then and hope I cover all the basis. I'd rather not adopt all the styling and such that come with things like Fabric or Material.
– Vincent
Jan 2 at 15:39
The point I was trying to make is that react-a11y will give you warnings when your code is not a11y compatible. So instead of hunting for issues you will know exactly what to fix and where.
– codebreach
Jan 2 at 22:27
The point I was trying to make is that react-a11y will give you warnings when your code is not a11y compatible. So instead of hunting for issues you will know exactly what to fix and where.
– codebreach
Jan 2 at 22:27
instead of relying on complex UI libraries, use semantic HTML and make the element a
button and you get everything for free (minus having to reset styles)– JustH
Jan 2 at 23:25
instead of relying on complex UI libraries, use semantic HTML and make the element a
button and you get everything for free (minus having to reset styles)– JustH
Jan 2 at 23:25
Thanks @codebreach, I prefer to use a linter for that, but otherwise I agree with your point. Ideally, however, this would be fixed automatically rather than a warning telling me to do it manually.
– Vincent
Jan 3 at 8:34
Thanks @codebreach, I prefer to use a linter for that, but otherwise I agree with your point. Ideally, however, this would be fixed automatically rather than a warning telling me to do it manually.
– Vincent
Jan 3 at 8:34
@JustH That's what I'd prefer to do. Unfortunately, the element contains some other elements that, as far as I'm aware, don't really lend themselves well to a button. Using a button would also require me to embed it in a form and to handle the
onSubmit event, no?– Vincent
Jan 3 at 8:35
@JustH That's what I'd prefer to do. Unfortunately, the element contains some other elements that, as far as I'm aware, don't really lend themselves well to a button. Using a button would also require me to embed it in a form and to handle the
onSubmit event, no?– Vincent
Jan 3 at 8:35
|
show 2 more comments
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.
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%2f54007850%2fhow-do-i-make-an-accessible-onclick-handler-for-links-in-react%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 React Router in your application ?
– Olivier Boissé
Jan 2 at 14:28
@reach/router, but in this case it's an actual
<a>element, not a<Link>.– Vincent
Jan 2 at 15:08
so why not using a
Link?– Olivier Boissé
Jan 2 at 15:10
Because it's not a link to a different page in the application. It performs different actions depending on the current app state, ranging from making a GET request and updating the view depending on the response, to opening a pop-up.
– Vincent
Jan 2 at 15:15
1
Sounds like
<button>would be a better fit?– steveax
Jan 2 at 22:48