Accessibility issues with GitHub Issue Forms multi-line edit and markdown blocks

[seanbudd]

Select Topic Area

Bug

Body

Example form:

https://github.com/nvaccess/nvda-issue-form-test/issues/new?assignees=&labels=bug&projects=&template=bug_report.yml

I'd encourage tabbing through the form with a screen reader to get a sense of the issues.

Multi-line edit control

Edit: this appears to be solved now: https://github.com/orgs/community/discussions/61696#discussioncomment-12999489

When navigating to a multi-line edit control, the values for aria-describedby and aria-label are lost when focus lands. This is due to the control being rebuilt when focus moves to it. This causes the label and description for the form to not be reported correctly.
It would be ideal to retain these values when the control is rebuilt. Alternatively, use a fieldset for the label, description and multiline edit box.

Multi-select control

Edit: this appears to be solved now
The multiselect button is not accessible either, it is not labelled correctly when you tab to the control.

Custom markdown block

Custom markdown blocks are skipped over.
Unfortunately this is more of a spec / screen reader issue.
Ideally there would be an element that indicates text within a form should be read when filling out the form, e.g. <input type="info" aria-labelledby="infoDiv">.
However, this can be worked around.
If possible, can we get the possibility of attaching a markdown block as a "legend" element to a group of fields?
For example, in our example form, we used custom markdown to try and delineate form inputs into groups.
If we were able to associate the custom markdown blocks with a group of form inputs using fieldset, it could be associated via a legend tag. This allows the screen reader to read out the custom markdown block when navigating into the fieldset form group, made up of input fields and our "legend" markdown block.

In a broader sense, associating custom markdown blocks with any other form input element via a legend tag in a fieldset will ensure a screen reader reads it out.

This would require being able to group inputs in the YML, and associate a markdown block with each grouping as a legend.

[girirajsingh7]

same problem faced but i solved it using simple extension to edit milti-line edit control

[seanbudd]

Would you be able to share the extension information here so that others can use it?

[girirajsingh7]

given the answer

[seanbudd]

could you explain what you mean here more?

[XLTechie]

@girirajsingh7 can you explain more how you solved this? I.e. answering the question in this comment please?

[cehfisher]

Hi @seanbudd - thank you for providing this feedback! We wanted to follow up on this reported bug. Is this still an issue you can replicate? If it is resolved, could you please close out this issue? If it is not resolved, we can file this as an issue for the Accessibility team to review. Thank you! (cc @queenofcorgis)

[seanbudd]

Yes from what I can tell all 3 issues are still valid

[cehfisher]

Thank you @seanbudd - we will file this with our Accessibility team so that it can be reviewed and will follow-up here with any additional questions or updates. Thanks again!

[XLTechie]

@cehfisher Is there anywhere the progress of this issue can be tracked? (Apart from this discussion)

[gerald-hartig]

Hi @cehfisher Has there been any progress on this issue? Is there anything you can share? Thanks!

[cehfisher]

Hello @gerald-hartig - the issue has been reported internally and team are working on fixes. Unfortunately, we have no insight into timelines, but we will follow-up here with any additional questions or updates when we have them. Thanks for your continued patience!

[seanbudd]

@cehfisher - I noticed that 1 of these fixes landed - very much appreciated!

[cehfisher]

Great to hear you've seen progress on this issue @seanbudd! I can't take credit for fixing anything, but I will pass your comments on to the team that did. I'll leave this discussion open while the team works on the other issues. Thanks!

[seanbudd]

It appears the behaviour is now worse for "Multi-line edit controls" aria labels and description. Previously they used the form controls label when browsing the form in browse mode, and their aria description and label was only messed up when tab focus landed. Now they always have the bad label and description.

[cehfisher]

Hi @seanbudd – the accessibility team mentioned that some code updates have been made for this feature. They're not certain if these changes will resolve your issue, so they’ve asked if you could clear your cache and test again. Thanks!

[seanbudd]

Hi @cehfisher - yes the behaviour is much better now!
When landing on a multi-line edit, the description is now read correctly.
However, the label for the control is not read. Instead the label "Markdown value" is used.

For example, with this template, NVDA reads

Markdown value  edit  multi line  Markdown input: edit mode selected. This section should contain a clear and concise list of the steps you take to demonstrate the problem. While performing the steps required, please make a copy of your NVDA log to attach to the issue. It's important to include any files that are required to reproduce an issue. This might be an example file, or a link to a minimal code example using CodePen or JSFiddle. Example: Open Chrome Browse to www.google.com Type "Hello" Press Enter  Leave a comment  blank

Instead it should say

Steps to reproduce  edit  multi line  Markdown input: edit mode selected. This section should contain a clear and concise list of the steps you take to demonstrate the problem. While performing the steps required, please make a copy of your NVDA log to attach to the issue. It's important to include any files that are required to reproduce an issue. This might be an example file, or a link to a minimal code example using CodePen or JSFiddle. Example: Open Chrome Browse to www.google.com Type "Hello" Press Enter  Leave a comment  blank

[cehfisher]

Thank you @seanbudd for the quick review! We will pass along this additional information to the team and follow-up here when a fix is in place. Thank you all for your continued patience!

[seanbudd]

Thanks! we are really looking forward to using issue forms, and accessibility for them seems really close now

[seanbudd]

it seems like this is resolved now - much appreciated!

[cehfisher]

That is great news @seanbudd! Thanks for following up. Feel free to open up a new discussion if you see anything change or have other requests. Closing this thread as resolved 🎉