Monaca Onsen UI Discord Chat Github Repo

onsen Button and ARIA



  • I am trying to get a good ARIA accessability experience on my OnsenUI app. testing on Android. I am an OnsenUI and ARIA newb

    <Button onClick={clickHandler} modifier='large'>New</Button>
    

    Aria sais “New”, but I want “New button” (I think)
    Aria only highlights button text

    <Button role="button" onClick={clickHandler} modifier='large'>New</Button>
    

    Aria sais "New button New"
    Aria highlights the whole button (instead of just button text) which is good

    <div role="button" aria-label="New" onClick={clickHandler}>
      <Button aria-hidden="true" modifier='large'>New</Button>
    </div>
    

    Aria sais "New button"
    Aria highlights the whole button

    The last example fullfills my (hopefully correct) requirements but seems a bit of a kludge.
    Maybe OnsenUI needs a little ARIA love?