#Pomegranate UI - Buttons

a-btn

Basic buttons import to your project , head side

<link rel="stylesheet" href="node_modules/@pomegranate-ui/buttons/dist/index.css">

if pomegranate just add it to the main file

@import '@pomegranate-ui/buttons/index.scss';

example

	{{> @a-btn }}
    
	{{> @a-btn modifier="primary" text="primary raised" }}

<button type="button" class="a-btn a-btn--primary" role="button">
    primary
</button>

has Accessibility ?

• YES ~~NO~~

buttons Accessibility

1. Ensure that each button element and elements with role="button" have one of the following characteristics:

• Inner text that is discernible to screen reader users.
• Non-empty aria-label attribute.
• aria-labelledby pointing to element with text which is discernible to screen reader users (i.e. not display: none; or aria-hidden="true". role="presentation" or role="none" (ARIA 1.1) and is not in tab order (tabindex="-1").

2. Ensure that <input type="button">s have one of the following characteristics:

• Non-empty value attribute.
• Non-empty aria-label attribute.
• aria-labelledby pointing to element with text which is discernible to screen reader users (i.e. not display: none; or aria-hidden="true".

3. Ensure that <input type="submit">, <input type="reset"> have one of the following characteristics:

• Non-empty aria-label attribute.
• aria-labelledby pointing to element with text which is discernible to screen reader users (i.e. not display: none; or aria-hidden="true". `- Non-empty or unspecified value attribute. Browsers will give reset and submit buttons a default value so long as the value attribute is not specified.

source: button-name

Copyright © 2021 Franz Gamarra