Missing button text in Bootstrap Add Elements within Your Bootstrap Wells
See original GitHub issueDescribe the Issue
in the instructions, they forgot to specify the button text and tests are passing without button text I think this is a good practice a button should always have a text and tests can not run without it for good practice
Affected Page
Your code
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<div class="well">
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
</div>
</div>
<div class="col-xs-6">
<div class="well">
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
</div>
</div>
</div>
</div>
Expected behavior
the button element should have a button text I think for good practice button should always have a button text in the instructions they forgot to include button text and tests are passing without it I think this should be solved
Screenshots
System
- Device: Laptop
- OS: Windows 11
- Browser: Chrome
- Version: 22
Additional context
No response
Issue Analytics
- State:
- Created a year ago
- Comments:10 (6 by maintainers)
Top Results From Across the Web
Add Elements within Your Bootstrap Wells - HTML-CSS
Tell us what's happening: What am I missing here? Your code so far <div class="container-fluid"> <h3 class="text-primary text-center">jQuery ...
Read more >Add Elements within Your Bootstrap Wells - Free Code Camp
In this Bootstrap Front End Libraries tutorial we add elements within your Bootstrap wells. This video constitutes one part of many where I ......
Read more >Components - Bootstrap
Only for use on empty elements. Icon classes should only be used on elements that contain no text content and have no child...
Read more >Add Elements within your Bootstrap Wells | Altcademy™
Nest three button elements within each of your well div elements. copy. <div class="container-fluid">. <h3 class="text-primary ...
Read more >Bootstrap Buttons - examples & tutorial
Buttons, as one of the key UI elements, must have their own hierarchy. This means that the user should be able to easily...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I don’t think we need to change anything here. We do this throughout the curriculum, specifically the new curriculum, where we add empty elements and fill them in later. I would vote to leave these as they are. I know the new front end curriculum probably won’t be ready for a while, but these challenges will become legacy and not maintained at some point. We have discussed that want to minimize (or eliminate) the work we put into these challenges so we can focus on the new curriculum.
We do this incremental building of an element(s) in a lot of places. So even though something doesn’t start out as accessible, it does become accessible at some point. I’m guessing in this case we only add the button and not the text in this step in order to keep it short and simple. And as @ieahleen pointed out, the text is added in a later step. If we don’t want to make a change to this step then I would recommend we add a little blurb about the necessity of having text on buttons in the step that adds the text. Right now it reads:
In order to highlight the importance of a button’s text for accessibility, perhaps change it to something like:
Technically, this text does not need to be visible (for example, you could use a well-known icon instead of visible text) but then underneath you would use
aria-label
oraria-labelledby
to give it an accessible name. But I think this much detail might be too much for this particular step. So using “text associated with it” is ambiguous enough to cover either method.