[#24007] - [4.0][a11y] 'Cancel' button changes from an anchor tag to a button tag (profile edit)
- Closed
- 21 Mar 2019
- Medium
- Build: 4.0-dev
- # 24007
- Diff
- tarot-ray:patch-4
User tests: Successful: Unsuccessful:
For A11Y reasons, this should be a button tag, not a styled anchor tag.
Pull Request for Issue # .
Summary of Changes
'Cancel' button is changed to a button tag from an anchor tag, to improved A11Y
Testing Instructions
Check that the 'Cancel' button is seen correctly by a screenreader.
Expected result
Improved A11Y.
Actual result
Documentation Changes Required
| Status | New | ⇒ | Pending |
joomla-cms-bot
- | Category | ⇒ | Front End com_users |
infograf768
- | Title |
|
||||||
I have tested this item
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/24007.
| Labels |
Added:
?
|
||
I have tested this item
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/24007.
@tarot-ray almost there - in the latest commit you've accidentally removed the classes again :)
@tarot-ray: Add: class="btn btn-danger"
So, further changes have been made to the PR to make the line absolutely correct and perfectly A11Y compatible. Please, review.
I have tested this item
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/24007.
I have tested this item
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/24007.
LGTM!
I have tested this item
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/24007.
| Status | Pending | ⇒ | Ready to Commit |
Just whitespace changes between the last two tests so RTC
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/24007.
What exactly is the point of changing anchor to a button that does exactly the same but with JS dependency?
@zwiastunsw Actually in this specific case thinking about it - I think a link was the correct choice because this is a redirect to another page. From http://web-accessibility.carnegiemuseums.org/content/buttons/
Navigation: If you want a user to navigate to a new page or to a different target on the same page, use an anchor element <a>.
Basically buttons should be used if you're doing stuff on the same page and links for moving to another page
@SharkyKZ , @wilsonge :
It's a bit more complicated. In this case, Cancel will actually redirect to another page. But the essence of this control is to cancel the action and not to move user to another page.
In this and other similar cases, Cancel cancels actions you have performed.
The command also speaks: Cancel, not Go to.
This is not just a tag problem. If you use a tag, make it look like a link and not like a button. Because it's confusing for keyboard users. I run the link with the Enter key, the button I run with the Enter or Space keys. If you activating link with the spacebar causes the page to scroll and not running the link.
| Labels |
Added:
?
|
||
| Status | Ready to Commit | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2019-03-21 13:01:07 |
| Closed_By | ⇒ | wilsonge |
This doesn't work. Button with
type="button"needs some JS code to do anything.hrefis not a valid attribute for elementbutton. If this really needs to be a button it should submit the form with cancel task.