# **`react-a11y-inspector`**  

### **Accessibility Inspection Tool for React**  

`react-a11y-inspector` is a powerful React accessibility inspection tool based on WCAG standards. It helps developers detect and resolve common accessibility issues in React applications. Key features include custom rule validation, real-time monitoring, screen reader simulation, and downloadable reports in PDF/CSV formats.  

---

## **Installation**  

```bash
# Using npm
npm install react-a11y-inspector

# Using yarn
yarn add react-a11y-inspector
```

---

## **Usage**  

### **Basic Example**  

```javascript
import React from 'react';
import A11yInspector from 'react-a11y-inspector';

function App() {
  return (
    <div>
      <h1>My Accessible React App</h1>
      <A11yInspector enabled={true} />
    </div>
  );
}

export default App;
```

---

### **Advanced Example with Custom Rules**  

```javascript
import React from 'react';
import A11yInspector from 'react-a11y-inspector';

const customRules = [
  {
    name: 'Custom Button Check',
    selector: 'button',
    check: (el) => el.innerText.trim().length > 0,
    message: 'Buttons must have descriptive labels.',
    severity: 'Warning',
  },
];

function App() {
  return (
    <div>
      <h1>Accessible App with Custom Rules</h1>
      <button></button>
      <A11yInspector
        enabled={true}
        customRules={customRules}
        reportSeverity="Warning"
        enableRealTimeMonitoring={true}
      />
    </div>
  );
}

export default App;
```

---

## **Features**  

- ✅ **Accessibility Checks**: Detects common a11y issues (ARIA roles, form labels, and color contrast).  
- ✅ **Custom Rule Support**: Create and validate custom rules.  
- ✅ **Severity Filtering**: Filters issues by severity (`Info`, `Warning`, `Critical`).  
- ✅ **Screen Reader Simulation**: Simulates how screen readers interpret issues.  
- ✅ **Real-Time Monitoring**: Rechecks the DOM on updates.  
- ✅ **Report Export**: Generates PDF/CSV reports for accessibility issues.  

---

## **Props Reference**  

| Prop                       | Type                | Default    | Description                          |
|---------------------------|---------------------|-------------|--------------------------------------|
| `enabled`                 | `boolean`          | `true`      | Enables/disables the inspector.     |
| `customRules`             | `array`            | `[]`        | Custom a11y validation rules.        |
| `reportSeverity`          | `string`           | `"Warning"`| Minimum severity to display.        |
| `enableRealTimeMonitoring`| `boolean`          | `false`     | Monitors DOM changes in real-time.  |

---

## **Accessibility Checks**  

- **ARIA Role Checks**: Ensures valid ARIA roles are used.  
- **Form Label Checks**: Verifies that form elements have labels.  
- **Contrast Ratio Checks**: Detects low contrast between foreground and background colors.  
- **Custom Rules**: Supports project-specific validation logic.  

---

## **Report Generation**  

Accessibility reports can be generated in PDF or CSV format:  

```javascript
<button onClick={() => exportPDF(issues)}>Download Report</button>
```

---

## **Screen Reader Simulation**  

Simulate screen reader output for detected accessibility issues:  

```javascript
<button onClick={() => simulateScreenReader(issues)}>Simulate Screen Reader</button>
```

---

## **Changelog**  

### **[1.0.0] - YYYY-MM-DD**  

#### **Added**  

- Initial release of `react-a11y-inspector`.  
- WCAG-based accessibility checks (ARIA roles, form labels, and color contrast).  
- Custom rule support.  
- Severity filtering (`Info`, `Warning`, `Critical`).  
- Real-time monitoring.  
- PDF/CSV report generation.  
- Screen reader simulation.  

---

## **Contribution Guide**  

1. **Clone Repository**:  

```bash
git clone https://github.com/your-repo/react-a11y-inspector.git
cd react-a11y-inspector
npm install
```

2. **Run Tests**:  

```bash
npm run test
```

3. **Build the Package**:  

```bash
npm run build
```

4. **Submit Pull Requests**:  

- Create a feature branch  
- Submit a PR with detailed descriptions  

---

## **License**  

Licensed under the [MIT License](LICENSE).