Components

Component styles are provided through the mango.css file, using minimal class names to enforce semantic HTML. Across the Internet, a common accessibility issue is that the visuals of a component don't match the semantics. For example, some component libraries expose a .selected class that will style a component in the selected state. Developers will apply that class without updating the semantics in the HTML as well (aria-selected="true"). Screen readers can't perceive the different classes applied and are now unable to properly use the component.

The strength of Mango UI is that it tightly couples the styling with the semantics. Instead of using a .selected class, the stylesheet takes advantage of CSS selectors to target components with the relevant ARIA attributes. For example, to style an active nav link, use <a aria-current="true" /> or to style a menu button, use <button aria-haspopup="menu" />. No other class names are required!

In each component page, the selectors required are listed at the start to show the expected markup or you can inspect the example boxes, which are always shown in a slightly darker background, like so:

Some components use JavaScript to handle things like focus management and ARIA attributes. If so, the page will indicate that you have to include the mango.js file as well. If desired, you can also use your own implementation as long as you follow the ARIA semantics. None of the styles are ever provided in the JavaScript file, making it easy to replace functionality.

Anyways, thanks for checking out Mango UI! Check out the src/components folder on GitHub to see all of the SCSS implementations. The JavaScript is available in the src/js directory. Feel free to raise any issues or PRs in the repository. Remember, it takes two to mango 😄