[Django] #35874: The console directive is not accessible for screenreaders.

[Django]

#35874: The console directive is not accessible for screenreaders.
-----------------------------+-----------------------------------------
Reporter: Sarah Boyce | Type: Uncategorized
Status: new | Component: Documentation
Version: dev | Severity: Normal
Keywords: | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-----------------------------+-----------------------------------------
`docs._ext.djangodocs.visit_console_html` generates the HTML for the
console directive in docs and has buttons for Linux/MasOS and Windows

This is not very screen reader friendly.
The main issues are that the labels are not read out properly (it should
read out the current title but is reading the content of
`&#xf17c/&#xf179`).
That these are clickable and what happens when you click them are also not
clear.

I think it might be better to turn this into tabs:
https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-manual/

Some examples in docs:
https://docs.djangoproject.com/en/5.1/intro/contributing/#getting-a-copy-
of-django-s-development-version
Example html:
{{{
<div class="console-block" id="console-block-0">
<input class="c-tab-unix" id="c-tab-0-unix" type="radio" name="console-0"
checked="">
<label for="c-tab-0-unix" title="Linux/macOS">/</label>
<input class="c-tab-win" id="c-tab-0-win" type="radio" name="console-0">
<label for="c-tab-0-win" title="Windows"></label>
<section class="c-content-unix" id="c-content-0-unix" style="display:
block;">
<div class="highlight-console notranslate"><div
class="highlight"><pre><span></span><span class="gp">$ </span>git<span
class="w"> </span>clone<span class="w">
</span>https://github.com/YourGitHubName/django.git
</pre></div>
</div>
</section>
<section class="c-content-win" id="c-content-0-win" style="display:
none;">
<div class="highlight"><pre><span></span><span class="gp">...\&gt;</span>
git clone https://github.com/YourGitHubName/django.git
</pre></div>
</section>
</div>
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/35874>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.

[Django]

#35874: The console directive is not accessible for screenreaders.

-------------------------------+--------------------------------------
Reporter: Sarah Boyce | Owner: (none)
Type: Bug | Status: new
Component: Documentation | Version: dev
Severity: Normal | Resolution:

Keywords: | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0

-------------------------------+--------------------------------------
Changes (by Sarah Boyce):

* type: Uncategorized => Bug

--
Ticket URL: <https://code.djangoproject.com/ticket/35874#comment:1>

[Django]

#35874: The console directive is not accessible for screenreaders.
-------------------------------+------------------------------------

Reporter: Sarah Boyce | Owner: (none)
Type: Bug | Status: new
Component: Documentation | Version: dev
Severity: Normal | Resolution:

Keywords: accessibility | Triage Stage: Accepted

Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------+------------------------------------

Changes (by Tom Carrick):

* keywords: => accessibility
* stage: Unreviewed => Accepted

--
Ticket URL: <https://code.djangoproject.com/ticket/35874#comment:2>

[Django]

#35874: The console directive is not accessible for screenreaders.

-------------------------------------+-------------------------------------
Reporter: Sarah Boyce | Owner: Johanan
| Oppong Amoateng
Type: Bug | Status: assigned

Component: Documentation | Version: dev
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0

-------------------------------------+-------------------------------------
Changes (by Johanan Oppong Amoateng):

* owner: (none) => Johanan Oppong Amoateng
* status: new => assigned

--
Ticket URL: <https://code.djangoproject.com/ticket/35874#comment:3>

[Django]

#35874: The console directive is not accessible for screenreaders.

-------------------------------+----------------------------------------
Reporter: Sarah Boyce | Owner: Ahmed Nassar

Type: Bug | Status: assigned
Component: Documentation | Version: dev
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0

-------------------------------+----------------------------------------
Changes (by Ahmed Nassar):

* owner: Johanan Oppong Amoateng => Ahmed Nassar

Comment:

Due to the owner's inactivity. I will be happy to work on this ticket.
--
Ticket URL: <https://code.djangoproject.com/ticket/35874#comment:4>