primereact
primereact copied to clipboard
Fix #3259: ARIA button helper
Defect Fixes
Fix #3259: ARIA button helper
Old code was this:
<button ref={prevBtnRef} className="p-tabview-nav-prev p-tabview-nav-btn p-link" onClick={navBackward} type="button">
<span className="pi pi-chevron-left"></span>
<Ripple />
</button>
New code allows us to use Button which include Ripple and other features properly with the ariaButton switch.
<Button ref={prevBtnRef} ariaButton className="p-tabview-nav-prev p-tabview-nav-btn p-link"
icon="pi pi-chevron-left" onClick={navBackward} aria-label={ariaLabel('previousPageLabel')} />;
Now the rendered HTML is identical: Old:
<button class="p-tabview-nav-next p-tabview-nav-btn p-link" type="button">
<span class="pi pi-chevron-right">
</span><span role="presentation" class="p-ink"></span>
</button>
New: (added benefit of cleaner code and Aria Label!)
<button aria-label="Next Page" class="p-tabview-nav-next p-tabview-nav-btn p-link" type="button">
<span class="pi pi-chevron-right"></span>
<span role="presentation" class="p-ink"></span>
</button>