Repository: spyder-ide/spyder

Issue:
Accessibility: Autocomplete suggestions are surrounded by HTML markup for screen reader users
<!--- **PLEASE READ:** When submitting here, please ensure you've completed the following checklist and checked the boxes to confirm. Issue reports without it may be closed. Thanks! --->

### Issue Report Checklist

* [x] Searched the [issues page](https://github.com/spyder-ide/spyder/issues?q=is%3Aissue) for similar reports
* [x] Read the relevant sections of the [Spyder Troubleshooting Guide](https://github.com/spyder-ide/spyder/wiki/Troubleshooting-Guide-and-FAQ) and followed its advice
* [x] Reproduced the issue after updating with ``conda update spyder`` (or ``pip``, if not using Anaconda)
* [x] Could not reproduce inside ``jupyter qtconsole`` (if console-related)
* [x] Tried basic troubleshooting (if a bug/error)
    * [x] Restarted Spyder
    * [x] Reset preferences with ``spyder --reset``
    * [x] Reinstalled the latest version of [Anaconda](https://www.anaconda.com/download/)
    * [x] Tried the other applicable steps from the Troubleshooting Guide
* [x] Completed the **Problem Description**, **Steps to Reproduce** and **Version** sections below


## Problem Description

When a screen reader user uses Spyder's editor component and receives a code suggestion, focus is correctly handled. Frankly, this amazes me, since most editors get this wrong. So that is more a point of praise than a problem.
However, the way these suggestions are formatted causes screen readers to read all the surrounding HTML markup out loud, each and every time. This is verbose to such a degree that it makes the experience unusable.
An example:

```HTML
<table width="250" height="13"><tr><td valign="middle" style="color:#FAFAFA">from</td><td valign="middle" align="right" float="right" style="color:#FAFAFA">keyword</td></tr></table>
```

This is pronounced as:
"Less table width equals quote 250 quote  height equals  quote 13 quote greater less tr greater less td valign equals quote middlequote  style equals  quote color colon  number FAFAFAquote greater from less slash td greater  less td valign equals quote middle quote  align equals  quote right quote  float equals  quote right quote  style equals  quote color colon 
 number FAFAFA quote greater keyword less slash td greater less  slash tr greater less  slash table greater"

I hope I don't need to explain that is not really ideal if all the output from all that we really needed was "from, keyword".

### What steps reproduce the problem?

1. It looks like Narrator does not support QT applications at present, so the best way to test this on Windows, where I'm testing, is to download the [free NVDA screen reader](https://nvaccess.org).
2. Open Spyder.
3. Arrow down past the temporary script comments.
4. Type the letters "fro".
5. Observe the alphabet soup.

### What is the expected output? What do you see instead?
The expected output is  the actual text, sans markup. In this case: "From, keyword".
What I'm seeing instead is ...the mess illustrated above.

## Versions
<!--- You can get this information from Help > About Spyder...
or (if Spyder won't launch) the "conda list" command
from the Anaconda Prompt/Terminal/command line. --->
* Spyder version: 5.1.5 None
* Python version: 3.8.5 64-bit
* Qt version: 5.9.7
* PyQt5 version: 5.9.2
* Operating System: Windows 10



Discussion:
Hi @zersiax,

Thanks a lot for opening this issue! We want to start this discussion started about how we can make Spyder more inclusive, including screen readers. We've been trying to gather up resources of other apps that are made in Qt and do the correct thing that we can expect, so we can learn how to do it on the code. If you know of any other app that is made in Qt and works well we would like to know it! 

I could reproduce your issue, and we will explore how we can enhance this experience for future Spyder versions. If you want to help us in any way, you are more than welcome! 
@steff456 Thanks a bunch for your response. 
I am going to preface this by saying I am basing this on general accessibility principles and experience, not so much QT since I am very much a novice in the way QT works in  particular. I therefore have to make some assumptions that might be wrong.
Looking at the HTML that gets spit out tells me that visually, the suggestions look like a table, with the "from" and the "keyword" showing up horizontally next to one another. I initially thought this was QML, but looking at the examples I've been able to find of that I don't think that's true given it looks completely different.
Anyway, for screen reader users, this is not rendered as a table, but rather a list of items with no spacial layout. What I am assuming is happening is that the accessible  name or the accessible description gets  set to the HTML markup composing that table when not explicitly set. Both of these attributes can be overridden in QML at least, and I'm reasonably sure the other QT toolkit technologies have similar options. o what I think needs to happen is that the relevant information, in this case "from, keyword" needs to be stringified as it's own property and then explicitly set on the item in question's accessible  name or accessible description property. You can see examples on how to do this [here](https://doc.qt.io/qt-5/accessible.html).
I know of no examples that currently do this, but I'd be happy to test tryBuilds if and when you have them. Does that help at all?
Yes! That helps a lot, once we start working on this I will ping you so you can test it :) 
Thanks a lot!
Note: Qt has a way a set to accessible names for widgets, as described here:

https://doc.qt.io/qt-5/qwidget.html#accessibleName-prop

so we should use that for completion elements so that screen readers can use it.
@ccordoba12 yes, I think that if you were to manually set the accessible name of the list items for the completion list, you would fix this issue. And the accesible name is likely just the relevant information concaatenated together with perhaps a comma in the middle.
Close enough. We use html to stylize those elements, not to arrange them in a table or list. So the accessible name just needs to be the completion item name without the style tags around it.
sounds good @ccordoba12. I'd do it, but as I said I know virtually nothing about QT and wouldn't know where to start :) I'll happily test though.
No prob, I understand. We'll fix this in our next minor version (5.3.0), to be released in a couple of months. 

Resolving patch:
diff --git a/spyder/plugins/editor/widgets/completion.py b/spyder/plugins/editor/widgets/completion.py
--- a/spyder/plugins/editor/widgets/completion.py
+++ b/spyder/plugins/editor/widgets/completion.py
@@ -240,6 +240,10 @@ def set_item_display(self, item_widget, item_info, height, width):
 
         item_widget.setText(item_text)
         item_widget.setIcon(self._get_cached_icon(item_type))
+        # Set data for accessible readers using item label and type
+        # See spyder-ide/spyder#17047 and
+        # https://doc.qt.io/qt-5/qt.html#ItemDataRole-enum
+        item_widget.setData(Qt.AccessibleTextRole, f"{item_label} {item_type}")
 
     def get_html_item_representation(self, item_completion, item_type,
                                      icon_provider=None,


Test patch: