0

I have the following polymer element, that inherits the "paper-behaviors/paper-button-behavior" but doesn´t provide any kind of auditive feedback when the user clicks the button. it just reads the text of the button, but no information about if it is or not pressed. I've tested it Talkback for Android and Narrator for Windows. I cant change the HTML , I need to make it work in a direct and easy way, I´m pretty new with polymer 2 and this is driving me to a sad place. any hint on how to make this button accessible and ay11 compliant?

I have tried replacing the button for a checkbox, and that does work well, but is not approved by the company due to backwards compatibility risks.

<option-button class="optionsButton" role="button" aria-labelledby="button-0" tabindex="0" selected="" aria-pressed="true">
<div class="amount">Button text</div>
</option-button>


 <script>
    class option-button extends Polymer.mixinBehaviors([Polymer.PaperButtonBehavior], Polymer.Element) {
      static get is() { return 'option-button; }
      static get properties() {
        return {
          message : {
            type: String,
            notify: true
          }
        }
      }

    }

    customElements.define(option-button.is, option-button);
  </script>
Yala Yala Herzlin
  • 552
  • 2
  • 8
  • 25
  • When you say you can't change the HTML what do you mean, you will need to change the HTML so can you be more specific about your constraints? – GrahamTheDev Jan 03 '20 at 19:26
  • What is an `option-button`, is that a custom component as I can't find docs on that. – GrahamTheDev Jan 03 '20 at 19:27
  • this is a custom element. it doesnt have an id, I have updated my question, I wrongly added id. is the ID necessary? – Yala Yala Herzlin Jan 03 '20 at 19:28
  • 1
    I don't know what your custom component does so that makes it difficult. Can you put the constructor for your custom element in the question so I can see what it actually is. If you are trying to make a toggle button it is actually easier to use `role="checkbox"` – GrahamTheDev Jan 03 '20 at 19:31
  • 1
    Actually, that was my initial solution, but it was rejected in a code review, due to the risk of breaking other contexts where the same component is being used... its a pitty because changing to checkbox did the trick, and provided the auditive feedback correctly. but using button, doesn´t. I´ll add now the constructor code . – Yala Yala Herzlin Jan 03 '20 at 19:37
  • It isn't really possible to make a button that behaves like a toggle and also behave like a normal button and it be accessible, if that is what you are trying to achieve then it needs escalating to someone who will allow you to swap out components that are being used 'incorrectly', maintainability in the future would also be improved so I don't think it would be a hard sell, do you have a bit more info on where this is used (use cases) so I can see if I can come up with a work around – GrahamTheDev Jan 03 '20 at 19:40
  • try `previousPressed.removeAttribute('aria-pressed');` change to `previousPressed.setAttribute('aria-pressed', 'false');` - removing the attribute is not the same as changing it as far as some screen readers are concerned. – GrahamTheDev Jan 03 '20 at 19:45
  • I´ve added more details about it Graham, they have recommended me an approach that seems overly complicated basically to manage a new property: aria-checked instead of replacing aria-pressed, but this doesn´t make sense to me... also Idk sincerely how to implement this... will consider your suggestion to insist in my solution. – Yala Yala Herzlin Jan 03 '20 at 19:45
  • 1
    your solution is definitely the best solution, I see no reason they couldn't switch it out based on the code I have seen as it looks like this component always acts as a toggle button anyway (in which case I cannot think of a 'breaking' scenario). Your other option is to append some `visually hidden` text inside the button detailing it's state, not the 'correct' way of doing it but it would expose the state and I would consider that accessible. – GrahamTheDev Jan 03 '20 at 19:49
  • thanks for your valuable feedback, it really clarifies im on the right path.will update when i find a fix. the change of the _handleClick bit of code didn´t make the difference, I´m afraid. but will continue trying and see what I can do. really appreciate your help. – Yala Yala Herzlin Jan 03 '20 at 19:51
  • The problem I have is I do not know polymer, my suggestion was to try and toggle the aria-pressed state, looking at the code again I do not see where the state switches back after setting `event.target.setAttribute('aria-pressed', 'true');` as I realised the part I told you to change was the shadow DOM. try changing the actual element with `event.target.setAttribute('aria-pressed', 'false');` below `previousPressed.removeAttribute('aria-pressed');` – GrahamTheDev Jan 03 '20 at 19:55
  • My questions is why it does provide feedback of buttons when they are clicked, and not in my case. but it does provide the feedback in my case. do you know if it could it be a polymer related problem? the state of the button changes correctly, but no audio feedback is provided. I have seen examples on the web where buttons when clicked provide audio feedback about this action. not in this case. – Yala Yala Herzlin Jan 03 '20 at 19:56
  • Inspect the element, does `aria-pressed` actually get changed when you toggle the button? My previous comment was meant to try and change `aria-pressed` from "true" to "false" in the DOM (but I think my first comment changed the shadow DOM). For it to work you need `role="button"` and for `aria-pressed` to toggle, not be added and removed. – GrahamTheDev Jan 03 '20 at 20:02
  • yes, the aria-pressed attribute does change when clicked. with your code or the previous one, both do the change, but none of them gets the screen readers to give feedback of the action. this link for example, works well and gives audible feedback when clicked https://www.accessibility-developer-guide.com/examples/sensible-aria-usage/pressed/_examples/marking-an-element-togglable-using-aria-pressed/ – Yala Yala Herzlin Jan 03 '20 at 20:08
  • That example is an actual button, I am guessing your polymer element is a div so that could be one issue (but I don't think it will be that as you have `role="button"`). The only other thing I can think is that the `aria-labelledby` might not have a corresponding `ID` and this may be causing an issue? Try removing that if it doesn't have a corresponding element with that `ID`. In principle it should be working and I am running out of ideas :-P – GrahamTheDev Jan 03 '20 at 20:11
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/205319/discussion-between-graham-ritchie-and-amouratoglou). – GrahamTheDev Jan 03 '20 at 20:20
  • 1
    added an 'answer' hopefully showing what I mean, I will remove / improve it depending on whether it helps, I am off out now so will pick this up tomorrow at some point. Good luck. – GrahamTheDev Jan 03 '20 at 20:31

1 Answers1

0

Please note this is not a full answer to the question, it is a compliment to the comments i have made as it was hard to explain in a comment.

If you set up your function as below does it work? I realised that there may be something strange with the fact that it appears to always set the aria-pressed to true?

_handleClick(event) {
    this.dispatchEvent(new CustomEvent(OptionButton.is + '.button-active', {
      bubbles: false,
      composed: true,
      detail: event
    }));
    const previousPressed = this.shadowRoot.querySelector('.OptionButton[aria-pressed="true"]');
    if (previousPressed) {
       previousPressed.setAttribute('aria-pressed', 'false');
       event.target.setAttribute('aria-pressed', 'false');
    }else{
        previousPressed.setAttribute('aria-pressed', 'true');
        event.target.setAttribute('aria-pressed', 'true');
    }
  }

Also change your component to 

<option-button class="optionsButton" role="button" tabindex="0" selected="" aria-pressed="true"> <!-- removed 'aria-labelledby' for testing -->
<div class="amount">Button text</div>
</option-button>
GrahamTheDev
  • 22,724
  • 2
  • 32
  • 64