@pomegranate-ui/buttons/README.md

Basic buttons for pomegranate

#Pomegranate UI - Buttons
# a-btn

Basic buttons 
import to your project , head side
```html
<link rel="stylesheet" href="node_modules/@pomegranate-ui/buttons/dist/index.css">
```

if pomegranate just add it to the main file 
```scss
@import '@pomegranate-ui/buttons/index.scss';
```


## example 
```hbs
	{{> @a-btn }}
    
	{{> @a-btn modifier="primary" text="primary raised" }}
```

```html
<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](https://dequeuniversity.com/rules/axe/3.1/button-name)




Copyright &copy; 2021 Franz Gamarra