primereact icon indicating copy to clipboard operation
primereact copied to clipboard

Fix #3259: ARIA button helper

Open melloware opened this issue 3 years ago • 0 comments

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>

melloware avatar Sep 22 '22 12:09 melloware