gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

chore(learn): audit files for crowdin (#40838)

Browse Source 
* chore(learn): audit files for crowdin

Audits the challenge text in the Responsive Web Design superblock to
account for words/phrases that should not be translated because they
refer to code.

Signed-off-by: nhcarrigan <nhcarrigan@gmail.com>

* fix: remove quotes from code

Removes instances of quoted code blocks, or code blocked quotes.

Signed-off-by: nhcarrigan <nhcarrigan@gmail.com>

* fix: additional uncaught quote-codes

Thanks Oliver :)

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>

* fix: so many quotes

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* fix: missing punctuation

Noted in a Crowdin comment.

Signed-off-by: nhcarrigan <nhcarrigan@gmail.com>

* fix: remove more quotes

Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>
This commit is contained in:
Nicholas Carrigan (he/him)
2021-02-01 11:56:07 -08:00
committed by GitHub
parent 4c99d18b2f
commit 427444c757
64 changed files with 122 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.md
View File

@ -9,11 +9,11 @@ dashedName: add-an-accessible-date-picker
# --description--
Forms often include the `input` field, which can be used to create several different form controls. The `type` attribute on this element indicates what kind of input will be created.
Forms often include the `input` field, which can be used to create several different form controls. The `type` attribute on this element indicates what kind of `input` element will be created.
You may have noticed the `text` and `submit` input types in prior challenges, and HTML5 introduced an option to specify a `date` field. Depending on browser support, a date picker shows up in the `input` field when it's in focus, which makes filling in a form easier for all users.
For older browsers, the type will default to `text`, so it helps to show users the expected date format in the label or as placeholder text just in case.
For older browsers, the type will default to `text`, so it helps to show users the expected date format in the `label` or `placeholder` text just in case.
Here's an example:
@ -24,7 +24,7 @@ Here's an example:
# --instructions--
Camper Cat is setting up a Mortal Kombat tournament and wants to ask his competitors to see what date works best. Add an `input` tag with a `type` attribute of "date", an `id` attribute of "pickdate", and a `name` attribute of "date".
Camper Cat is setting up a Mortal Kombat tournament and wants to ask his competitors to see what date works best. Add an `input` tag with a `type` attribute of `date`, an `id` attribute of `pickdate`, and a `name` attribute of `date`.
# --hints--
@ -34,19 +34,19 @@ Your code should add one `input` tag for the date selector field.
assert($('input').length == 2);
```
Your `input` tag should have a `type` attribute with a value of date.
Your `input` tag should have a `type` attribute with a value of `date`.
```js
assert($('input').attr('type') == 'date');
```
Your `input` tag should have an `id` attribute with a value of pickdate.
Your `input` tag should have an `id` attribute with a value of `pickdate`.
```js
assert($('input').attr('id') == 'pickdate');
```
Your `input` tag should have a `name` attribute with a value of date.
Your `input` tag should have a `name` attribute with a value of `date`.
```js
assert($('input').attr('name') == 'date');

4
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.md
View File

@ -15,11 +15,11 @@ Screen readers do this by reading the link text, or what's between the anchor (`
# --instructions--
The link text that Camper Cat is using is not very descriptive without the surrounding context. Move the anchor (`a`) tags so they wrap around the text "information about batteries" instead of "Click here".
The link text that Camper Cat is using is not very descriptive without the surrounding context. Move the anchor (`a`) tags so they wrap around the text `information about batteries` instead of `Click here`.
# --hints--
Your code should move the anchor `a` tags from around the words "Click here" to wrap around the words "information about batteries".
Your code should move the anchor `a` tags from around the words `Click here` to wrap around the words `information about batteries`.
```js
assert(

2
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.md
View File

@ -26,7 +26,7 @@ Here's an example:
# --instructions--
Time to take a break from Camper Cat and meet fellow camper Zersiax (@zersiax), a champion of accessibility and a screen reader user. To hear a clip of his screen reader in action, add an `audio` element after the `p`. Include the `controls` attribute. Then place a `source` tag inside the `audio` tags with the `src` attribute set to "`https://s3.amazonaws.com/freecodecamp/screen-reader.mp3`" and `type` attribute set to "audio/mpeg".
Time to take a break from Camper Cat and meet fellow camper Zersiax (@zersiax), a champion of accessibility and a screen reader user. To hear a clip of his screen reader in action, add an `audio` element after the `p`. Include the `controls` attribute. Then place a `source` tag inside the `audio` tags with the `src` attribute set to `https://s3.amazonaws.com/freecodecamp/screen-reader.mp3` and `type` attribute set to `"audio/mpeg"`.
**Note:** The audio clip may sound fast and be difficult to understand, but that is a normal speed for screen reader users.

10
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.md
View File

@ -35,29 +35,29 @@ Here's an example of the CSS rules that accomplish this:
# --instructions--
Camper Cat created a really cool stacked bar chart for his training page, and put the data into a table for his visually impaired users. The table already has an `sr-only` class, but the CSS rules aren't filled in yet. Give the `position` an absolute value, the `left` a -10000px value, and the `width` and `height` both 1px values.
Camper Cat created a really cool stacked bar chart for his training page, and put the data into a table for his visually impaired users. The table already has an `sr-only` class, but the CSS rules aren't filled in yet. Give the `position` an `absolute` value, the `left` a `-10000px` value, and the `width` and `height` both `1px` values.
# --hints--
Your code should set the `position` property of the `sr-only` class to a value of absolute.
Your code should set the `position` property of the `sr-only` class to a value of `absolute`.
```js
assert($('.sr-only').css('position') == 'absolute');
```
Your code should set the `left` property of the `sr-only` class to a value of -10000px.
Your code should set the `left` property of the `sr-only` class to a value of `-10000px`.
```js
assert($('.sr-only').css('left') == '-10000px');
```
Your code should set the `width` property of the `sr-only` class to a value of 1 pixel.
Your code should set the `width` property of the `sr-only` class to a value of `1` pixel.
```js
assert(code.match(/width:\s*?1px/gi));
```
Your code should set the `height` property of the `sr-only` class to a value of 1 pixel.
Your code should set the `height` property of the `sr-only` class to a value of `1` pixel.
```js
assert(code.match(/height:\s*?1px/gi));

10
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-links-navigable-with-html-access-keys.md
View File

@ -19,29 +19,29 @@ Here's an example:
# --instructions--
Camper Cat wants the links around the two blog article titles to have keyboard shortcuts so his site's users can quickly navigate to the full story. Add an `accesskey` attribute to both links and set the first one to "g" (for Garfield) and the second one to "c" (for Chuck Norris).
Camper Cat wants the links around the two blog article titles to have keyboard shortcuts so his site's users can quickly navigate to the full story. Add an `accesskey` attribute to both links and set the first one to `g` (for Garfield) and the second one to `c` (for Chuck Norris).
# --hints--
Your code should add an `accesskey` attribute to the `a` tag with the `id` of "first".
Your code should add an `accesskey` attribute to the `a` tag with the `id` of `first`.
```js
assert($('#first').attr('accesskey'));
```
Your code should add an `accesskey` attribute to the `a` tag with the `id` of "second".
Your code should add an `accesskey` attribute to the `a` tag with the `id` of `second`.
```js
assert($('#second').attr('accesskey'));
```
Your code should set the `accesskey` attribute on the `a` tag with the `id` of "first" to "g". Note that case matters.
Your code should set the `accesskey` attribute on the `a` tag with the `id` of `first` to `g`. Note that case matters.
```js
assert($('#first').attr('accesskey') == 'g');
```
Your code should set the `accesskey` attribute on the `a` tag with the `id` of "second" to "c". Note that case matters.
Your code should set the `accesskey` attribute on the `a` tag with the `id` of `second` to `c`. Note that case matters.
```js
assert($('#second').attr('accesskey') == 'c');

2
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.md
View File

@ -17,7 +17,7 @@ Here's an example:
# --instructions--
Camper Cat's Mortal Kombat survey results are in! Wrap a `time` tag around the text "Thursday, September 15&lt;sup>th&lt;/sup>" and add a `datetime` attribute to it set to "2016-09-15".
Camper Cat's Mortal Kombat survey results are in! Wrap a `time` tag around the text `Thursday, September 15<sup>th<sup>` and add a `datetime` attribute to it set to `2016-09-15`.
# --hints--

2
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/use-tabindex-to-add-keyboard-focus-to-an-element.md
View File

@ -19,7 +19,7 @@ Certain elements, such as links and form controls, automatically receive keyboar
# --instructions--
Camper Cat created a new survey to collect information about his users. He knows input fields automatically get keyboard focus, but he wants to make sure his keyboard users pause at the instructions while tabbing through the items. Add a `tabindex` attribute to the `p` tag and set its value to `"0"`. Bonus - using `tabindex` also enables the CSS pseudo-class `:focus` to work on the `p` tag.
Camper Cat created a new survey to collect information about his users. He knows input fields automatically get keyboard focus, but he wants to make sure his keyboard users pause at the instructions while tabbing through the items. Add a `tabindex` attribute to the `p` tag and set its value to `0`. Bonus - using `tabindex` also enables the CSS pseudo-class `:focus` to work on the `p` tag.
# --hints--

10
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements.md
View File

@ -23,29 +23,29 @@ Here's an example:
# --instructions--
Camper Cat has a search field on his Inspirational Quotes page that he plans to position in the upper right corner with CSS. He wants the search `input` and submit `input` form controls to be the first two items in the tab order. Add a `tabindex` attribute set to `"1"` to the search `input`, and a `tabindex` attribute set to `"2"` to the submit `input`.
Camper Cat has a search field on his Inspirational Quotes page that he plans to position in the upper right corner with CSS. He wants the search `input` and submit `input` form controls to be the first two items in the tab order. Add a `tabindex` attribute set to `1` to the `search` `input`, and a `tabindex` attribute set to `2` to the `submit` `input`.
# --hints--
Your code should add a `tabindex` attribute to the search `input` tag.
Your code should add a `tabindex` attribute to the `search` `input` tag.
```js
assert($('#search').attr('tabindex'));
```
Your code should add a `tabindex` attribute to the submit `input` tag.
Your code should add a `tabindex` attribute to the `submit` `input` tag.
```js
assert($('#submit').attr('tabindex'));
```
Your code should set the `tabindex` attribute on the search `input` tag to a value of 1.
Your code should set the `tabindex` attribute on the `search` `input` tag to a value of 1.
```js
assert($('#search').attr('tabindex') == '1');
```
Your code should set the `tabindex` attribute on the submit `input` tag to a value of 2.
Your code should set the `tabindex` attribute on the `submit` `input` tag to a value of 2.
```js
assert($('#submit').attr('tabindex') == '2');

11
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/wrap-content-in-the-article-element.md
View File

@ -15,14 +15,11 @@ Determining whether content can stand alone is usually a judgement call, but the
Remember that folks using assistive technologies rely on organized, semantically meaningful markup to better understand your work.
**Note about `section` and `div`**
The `section` element is also new with HTML5, and has a slightly different semantic meaning than `article`. An `article` is for standalone content, and a `section` is for grouping thematically related content. They can be used within each other, as needed. For example, if a book is the `article`, then each chapter is a `section`. When there's no relationship between groups of content, then use a `div`.
**Note:** The `section` element is also new with HTML5, and has a slightly different semantic meaning than `article`. An `article` is for standalone content, and a `section` is for grouping thematically related content. They can be used within each other, as needed. For example, if a book is the `article`, then each chapter is a `section`. When there's no relationship between groups of content, then use a `div`.
```html
<div> - groups content
<section> - groups related content
<article> - groups independent, self-contained content
```
`<div>` - groups content
`<section>` - groups related content
`<article>` - groups independent, self-contained content
# --instructions--

2
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility.md
View File

@ -33,7 +33,7 @@ Here's an example:
# --instructions--
Camper Cat wants information about the ninja level of his users when they sign up for his email list. He's added a set of radio buttons and learned from our last lesson to use label tags with `for` attributes for each choice. Go Camper Cat! However, his code still needs some help. Change the `div` tag surrounding the radio buttons to a `fieldset` tag, and change the `p` tag inside it to a `legend`.
Camper Cat wants information about the ninja level of his users when they sign up for his email list. He's added a set of radio buttons and learned from our last lesson to use `label` tags with `for` attributes for each choice. Go Camper Cat! However, his code still needs some help. Change the `div` tag surrounding the radio buttons to a `fieldset` tag, and change the `p` tag inside it to a `legend`.
# --hints--