Elements that should not be implemented as buttons

ecureuill commented 4 years ago

Expected Behavior

A button activates functionality (e.g., shows or hides content, toggles a state on or off).
A link is intend to navigate to new content.

Current Behavior

Above list is not an exhaustive, but meant to help you understand the problem. I'd suggest that when working in some existent code, to search for problems like this.

[x] Course Preview button
[x] Course duration button
[x] Course Syllabus button
[x] Course overview
[x] Ordered list
[x] Some cards are rendered as a button.

[ ] Video Content
[ ] Sliders

Steps to Reproduce

For each button in a page, check if the button activates functionality

Environment

Browser: all

Possible Implementation

Slider using react component

Link


<a href="#content">TEXT DESCRIPTION</a>

or, using react component

TEXT DESCRIPTION



NOTE:
Custom widgets are interactive interface components designed to meet unique UX needs. They are created by adding functionality to native widgets or to non-interactive components such as <div> elements.

Custom widgets are most appropriate for complex controls (such as a text field, listbox, and button that together function as a combo box). For simple controls (such as buttons or links), it's better to use native widgets, as they require significantly less coding to make them accessible.

A custom widget usually requires an ARIA widget role to communicate the correct function to assistive technologies and enable them to interact with the widget.

If possible, replace the custom widget with a native HTML control. (As a rule, it's better to use native semantics than to modify them using ARIA roles.) If needed, use CSS styling to achieve the desired appearance.

If you can't use a native HTML control:

1. Familiarize yourself with the [ARIA design patterns](https://www.w3.org/TR/wai-aria-practices-1.1) for custom widgets.
2. Add the correct widget role specified by the design pattern. Exception: A few design patterns do not require a widget role.

Most design patterns have additional requirements related to (1) roles, states, properties, and (2) keyboard interaction. These requirements are covered in the Custom widgets test.

github-actions[bot] commented 4 years ago

This Feature is ready to be implemented.

CAndresH commented 4 years ago

I checked the components you mentioned and changed the functionalities of the buttons by link in each case, in addition, I looked for other incorrect buttons and found the following elements to which I changed the functionality