Skip to content

Commit

Permalink
Fix accessibility issues with signup page and contact page + make lig…
Browse files Browse the repository at this point in the history 
…hthouse score 1 (oppia#18815)

* fixed navigation in signup and contact page

* fixed lint

* changes to use data interpolation for variables

* removed "click here"

* removed color + added underline

* fix test

* fix test

* added  :::ng-deep

* changes fix ng-deep lint check fail

* added comment

* added disable lint for line
  • Loading branch information
@Patel-Muhammad
Patel-Muhammad authored Nov 7, 2023
1 parent 4522db3 commit 9f1ae04
Show file tree
Hide file tree
Showing 9 changed files with 39 additions and 31 deletions.
2 changes: 1 addition & 1 deletion .lighthouserc-accessibility-1.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ module.exports = {
{
'matchingUrlPattern': '^http://localhost:8181/contact$',
'assertions': {
'categories:accessibility': ['error', {'minScore': 0.98}]
'categories:accessibility': ['error', {'minScore': 1}]
}
},
{
Expand Down
8 changes: 4 additions & 4 deletions assets/i18n/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -245,8 +245,8 @@
"I18N_CONTACT_PAGE_GREETING_HEADING": "We would love to hear from you!",
"I18N_CONTACT_PAGE_HEADING": "Contact Us",
"I18N_CONTACT_PAGE_OTHER_INQUIRIES_HEADING": "Other Inquiries",
"I18N_CONTACT_PAGE_OTHER_INQUIRIES_PARAGRAPH_1": "For general questions, please reach out to <a href=\"mailto:[email protected]\">[email protected]</a>.",
"I18N_CONTACT_PAGE_OTHER_INQUIRIES_PARAGRAPH_2": "If you have a media inquiry, please send it to <a href=\"mailto:[email protected]\">[email protected]</a>.",
"I18N_CONTACT_PAGE_OTHER_INQUIRIES_PARAGRAPH_1": "For general questions, please reach out to <a class=\"oppia-contact-mail\" href=\"mailto:[email protected]\">[email protected]</a>.",
"I18N_CONTACT_PAGE_OTHER_INQUIRIES_PARAGRAPH_2": "If you have a media inquiry, please send it to <a class=\"oppia-contact-mail\" href=\"mailto:[email protected]\">[email protected]</a>.",
"I18N_CONTACT_PAGE_PARTNER_HEADING": "Partner",
"I18N_CONTACT_PAGE_PARTNER_PARAGRAPH": "Partner with us to receive educational support for your organization or community.",
"I18N_CONTACT_PAGE_TITLE": "Contact | Oppia",
Expand Down Expand Up @@ -1245,7 +1245,7 @@
"I18N_SIDEBAR_VOLUNTEER_DESCRIPTION": "Join our global team to create and improve lessons.",
"I18N_SIGNIN_LOADING": "Signing in",
"I18N_SIGNIN_PAGE_TITLE": "Sign in",
"I18N_SIGNUP_AGREE_LICENSE_DESCRIPTION": "By checking the box to the left of this text, you acknowledge, agree, and accept to be bound by the <[sitename]> Terms of Use, found <a href=\"/terms\" target=\"_blank\">here</a>.",
"I18N_SIGNUP_AGREE_LICENSE_DESCRIPTION": "By checking the box to the left of this text, you acknowledge, agree, and accept to be bound by the <[sitename]> <a href=\"/terms\" target=\"_blank\">Terms of Use</a>.",
"I18N_SIGNUP_BUTTON_SUBMIT": "Submit and start contributing",
"I18N_SIGNUP_CC_TITLE": "Creative Commons License",
"I18N_SIGNUP_CLOSE_BUTTON": "Close",
Expand All @@ -1263,7 +1263,7 @@
"I18N_SIGNUP_ERROR_USERNAME_WITH_ADMIN": "User names with 'admin' are reserved.",
"I18N_SIGNUP_ERROR_USERNAME_WITH_SPACES": "Please ensure that your username has no spaces.",
"I18N_SIGNUP_FIELD_REQUIRED": "This field is required.",
"I18N_SIGNUP_LICENSE_NOTE": "Please note that, by agreeing to our Terms of Use, you agree that any content or contributions you make on our Site are and will be licensed under CC-BY-SA v.4.0. Please review our <a href=\"/terms\">Terms of Use</a> for more information about the license grant. For more information about CC-BY-SA, click <a href=\"#\">here</a>.",
"I18N_SIGNUP_LICENSE_NOTE": "Please note that, by agreeing to our Terms of Use, you agree that any content or contributions you make on our Site are and will be licensed under <a href=\"#\">CC-BY-SA</a> v.4.0. Please review our <a href=\"/terms\">Terms of Use</a> for more information about the license grant.",
"I18N_SIGNUP_LICENSE_OBJECTIVE": "Using a <[licenselink]> license allows the content of explorations to be freely copied, reused, remixed and redistributed. The main condition is that if someone remixes, transforms or builds upon the material, they must also distribute their work under the same free license.",
"I18N_SIGNUP_LOADING": "Loading",
"I18N_SIGNUP_PAGE_TITLE": "Join the community - Oppia",
Expand Down
4 changes: 2 additions & 2 deletions assets/i18n/fr.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -229,8 +229,8 @@
"I18N_CONTACT_PAGE_GREETING_HEADING": "Nous aimerions vous entendre !",
"I18N_CONTACT_PAGE_HEADING": "Nous contacter",
"I18N_CONTACT_PAGE_OTHER_INQUIRIES_HEADING": "Autres enquêtes",
"I18N_CONTACT_PAGE_OTHER_INQUIRIES_PARAGRAPH_1": "Pour des questions générales, veuillez contacter <a href=\"mailto:[email protected]\">[email protected]</a>.",
"I18N_CONTACT_PAGE_OTHER_INQUIRIES_PARAGRAPH_2": "Si vous avez une demande de média, veuillez l’envoyer à <a href=\"mailto:[email protected]\">[email protected]</a>.",
"I18N_CONTACT_PAGE_OTHER_INQUIRIES_PARAGRAPH_1": "Pour des questions générales, veuillez contacter <a class=\"oppia-contact-mail\" href=\"mailto:[email protected]\">[email protected]</a>.",
"I18N_CONTACT_PAGE_OTHER_INQUIRIES_PARAGRAPH_2": "Si vous avez une demande de média, veuillez l’envoyer à <a class=\"oppia-contact-mail\" href=\"mailto:[email protected]\">[email protected]</a>.",
"I18N_CONTACT_PAGE_PARTNER_HEADING": "Partenaire",
"I18N_CONTACT_PAGE_PARTNER_PARAGRAPH": "Faire un partenariat avec nous pour recevoir un soutien éducatif pour votre organisation ou votre communauté.",
"I18N_CONTACT_PAGE_TITLE": "Contact | Oppia",
Expand Down
2 changes: 1 addition & 1 deletion assets/i18n/lt.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
"I18N_CONTACT_PAGE_GREETING_HEADING": "Mes norėtume jus išgirsti!",
"I18N_CONTACT_PAGE_HEADING": "Susisiekite su mumis",
"I18N_CONTACT_PAGE_OTHER_INQUIRIES_HEADING": "Kitos užklausos",
"I18N_CONTACT_PAGE_OTHER_INQUIRIES_PARAGRAPH_2": "Jei turite žiniasklaidos užklausą, siųskite ją adresu <a href=\"mailto:[email protected]\">[email protected]</a>.",
"I18N_CONTACT_PAGE_OTHER_INQUIRIES_PARAGRAPH_2": "Jei turite žiniasklaidos užklausą, siųskite ją adresu <a class=\"oppia-contact-mail\" href=\"mailto:[email protected]\">[email protected]</a>.",
"I18N_CONTACT_PAGE_PARTNER_HEADING": "Partneris",
"I18N_CONTACT_PAGE_PARTNER_PARAGRAPH": "Bendradarbiaukite su mumis, kad gautumėte švietimo pagalbą savo organizacijai ar bendruomenei.",
"I18N_CONTACT_PAGE_VOLUNTEER_HEADING": "Savanorystė",
Expand Down
2 changes: 1 addition & 1 deletion assets/i18n/nb.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
"I18N_ABOUT_PAGE_TEACH_BUTTON": "Jeg ønsker å undervise",
"I18N_ABOUT_PAGE_TITLE": "Om oss – Oppia",
"I18N_CONTACT_PAGE_HEADING": "Involver deg!",
"I18N_CONTACT_PAGE_OTHER_INQUIRIES_PARAGRAPH_2": "Hvis du har en medieforespørsel, send den til <a href=\"mailto:[email protected]\">[email protected]</a>.",
"I18N_CONTACT_PAGE_OTHER_INQUIRIES_PARAGRAPH_2": "Hvis du har en medieforespørsel, send den til <a class=\"oppia-contact-mail\" href=\"mailto:[email protected]\">[email protected]</a>.",
"I18N_CONTINUE_REGISTRATION": "Fortsett registrering",
"I18N_CREATE_ACTIVITY_QUESTION": "Hva ønsker du å skape?",
"I18N_CREATE_ACTIVITY_TITLE": "Opprett en aktivitet",
Expand Down
4 changes: 2 additions & 2 deletions assets/i18n/pt-br.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -229,8 +229,8 @@
"I18N_CONTACT_PAGE_GREETING_HEADING": "Gostaríamos muito de ouvir de você!",
"I18N_CONTACT_PAGE_HEADING": "Contate-nos",
"I18N_CONTACT_PAGE_OTHER_INQUIRIES_HEADING": "Outras consultas",
"I18N_CONTACT_PAGE_OTHER_INQUIRIES_PARAGRAPH_1": "Para perguntas gerais, entre em contato com <a href=\"mailto:[email protected]\">[email protected].</a>",
"I18N_CONTACT_PAGE_OTHER_INQUIRIES_PARAGRAPH_2": "Se tiver uma consulta de mídia, envie-a para <a href=\"mailto:[email protected]\">[email protected].</a>",
"I18N_CONTACT_PAGE_OTHER_INQUIRIES_PARAGRAPH_1": "Para perguntas gerais, entre em contato com <a class=\"oppia-contact-mail\" href=\"mailto:[email protected]\">[email protected].</a>",
"I18N_CONTACT_PAGE_OTHER_INQUIRIES_PARAGRAPH_2": "Se tiver uma consulta de mídia, envie-a para <a class=\"oppia-contact-mail\" href=\"mailto:[email protected]\">[email protected].</a>",
"I18N_CONTACT_PAGE_PARTNER_HEADING": "Parceiro",
"I18N_CONTACT_PAGE_PARTNER_PARAGRAPH": "Seja nosso parceiro para receber apoio educacional para sua organização ou comunidade.",
"I18N_CONTACT_PAGE_TITLE": "Contato | Oppia",
Expand Down
4 changes: 2 additions & 2 deletions assets/i18n/zh-hant.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -229,8 +229,8 @@
"I18N_CONTACT_PAGE_GREETING_HEADING": "我們願意傾聽來自您的想法！",
"I18N_CONTACT_PAGE_HEADING": "聯絡我們",
"I18N_CONTACT_PAGE_OTHER_INQUIRIES_HEADING": "其他詢問",
"I18N_CONTACT_PAGE_OTHER_INQUIRIES_PARAGRAPH_1": "一般問題請寄到 <a href=\"mailto:[email protected]\">[email protected]</a>。",
"I18N_CONTACT_PAGE_OTHER_INQUIRIES_PARAGRAPH_2": "如果您有媒體上的詢問，請發送到 <a href=\"mailto:[email protected]\">[email protected]</a>。",
"I18N_CONTACT_PAGE_OTHER_INQUIRIES_PARAGRAPH_1": "一般問題請寄到 <a class=\"oppia-contact-mail\" href=\"mailto:[email protected]\">[email protected]</a>。",
"I18N_CONTACT_PAGE_OTHER_INQUIRIES_PARAGRAPH_2": "如果您有媒體上的詢問，請發送到 <a class=\"oppia-contact-mail\" href=\"mailto:[email protected]\">[email protected]</a>。",
"I18N_CONTACT_PAGE_PARTNER_HEADING": "夥伴",
"I18N_CONTACT_PAGE_PARTNER_PARAGRAPH": "與我們一起為您的組織、社區獲得教育上的支援。",
"I18N_CONTACT_PAGE_TITLE": "聯絡 | Oppia",
Expand Down
31 changes: 19 additions & 12 deletions core/templates/pages/contact-page/contact-page.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,35 +4,35 @@ <h1 tabindex="0" [innerHTML]="'I18N_CONTACT_PAGE_HEADING' | translate"></h1>
<background-banner></background-banner>
<div class="oppia-page-card oppia-static-full-content oppia-static-content-contact-page-below-banner">
<div class="oppia-static-card-full-content oppia-static-card-content-full-wide e2e-test-contact-page">
<h2 [innerHTML]="'I18N_CONTACT_PAGE_GREETING_HEADING' | translate"></h2>
<h2 [innerHTML]="'I18N_CONTACT_PAGE_GREETING_HEADING' | translate" tabindex="0"></h2>

<div class="oppia-contact-page flex">
<div class="oppia-contact-page-content">
<img id="donate" src="assets/images/contact_page/Donate img.svg" alt="Donate">
<div class="oppia-contact-page-content" tabindex="0">
<img id="donate" src="assets/images/contact_page/Donate img.svg" alt="">
<h2 [innerHTML]="'I18N_CONTACT_PAGE_DONATE_HEADING' | translate"></h2>
<p [innerHTML]="'I18N_CONTACT_PAGE_DONATE_PARAGRAPH' | translate"></p>
<a href="https://www.oppia.org/donate">
<button class="hover-button" [innerHTML]="'I18N_CONTACT_PAGE_DONATE_TODAY_BUTTON' | translate"></button>
<button tabindex="-1" class="hover-button">{{ 'I18N_CONTACT_PAGE_DONATE_TODAY_BUTTON' | translate }}</button>
</a>
</div>
<div class="oppia-contact-page-content">
<img id="Partner" src="assets/images/contact_page/Partner img.svg" alt="Partner">
<div class="oppia-contact-page-content" tabindex="0">
<img id="Partner" src="assets/images/contact_page/Partner img.svg" alt="">
<h2 [innerHTML]="'I18N_CONTACT_PAGE_PARTNER_HEADING' | translate"></h2>
<p [innerHTML]="'I18N_CONTACT_PAGE_PARTNER_PARAGRAPH' | translate"></p>
<a href="https://www.oppia.org/partnership">
<button class="hover-button" [innerHTML]="'I18N_CONTACT_PAGE_BECOME_A_PARTNER_BUTTON' | translate"></button>
<button class="hover-button" tabindex="-1">{{ 'I18N_CONTACT_PAGE_BECOME_A_PARTNER_BUTTON' | translate }}</button>
</a>
</div>
<div class="oppia-contact-page-content">
<img id="volunteer" src="assets/images/contact_page/Volunteer img.svg" alt="Volunteer">
<div class="oppia-contact-page-content" tabindex="0">
<img id="volunteer" src="assets/images/contact_page/Volunteer img.svg" alt="">
<h2 [innerHTML]="'I18N_CONTACT_PAGE_VOLUNTEER_HEADING' | translate"></h2>
<p [innerHTML]="'I18N_CONTACT_PAGE_VOLUNTEER_PARAGRAPH' | translate"></p>
<a href="https://www.oppia.org/volunteer">
<button class="hover-button" [innerHTML]="'I18N_CONTACT_PAGE_BECOME_A_VOLUNTEER_BUTTON' | translate"></button>
<button class="hover-button" tabindex="-1">{{ 'I18N_CONTACT_PAGE_BECOME_A_VOLUNTEER_BUTTON' | translate }}</button>
</a>
</div>
<div class="oppia-contact-page-content">
<img id="other_inquiries" src="assets/images/contact_page/Other inquiries img.svg" alt="Other inquiries">
<div class="oppia-contact-page-content" tabindex="0">
<img id="other_inquiries" src="assets/images/contact_page/Other inquiries img.svg" alt="">
<h2 [innerHTML]="'I18N_CONTACT_PAGE_OTHER_INQUIRIES_HEADING' | translate"></h2>
<p [innerHTML]="'I18N_CONTACT_PAGE_OTHER_INQUIRIES_PARAGRAPH_1' | translate"></p>
<p [innerHTML]="'I18N_CONTACT_PAGE_OTHER_INQUIRIES_PARAGRAPH_2' | translate"></p>
Expand All @@ -48,6 +48,13 @@ <h2 [innerHTML]="'I18N_CONTACT_PAGE_OTHER_INQUIRIES_HEADING' | translate"></h2>
width: 100px;
}

/* :ng-deep is used to make the style class work for the class that is given to innerHTML
See this for context: stackoverflow.com/questions/44210786/style-not-working-for-innerhtml-in-angular/44215795#44215795 */
/* stylelint-disable selector-pseudo-element-no-unknown */
::ng-deep .oppia-contact-mail {
text-decoration: underline;
}

.oppia-static-full-content {
margin-bottom: 0;
margin-top: 0;
Expand Down
13 changes: 7 additions & 6 deletions core/templates/pages/signup-page/signup-page.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
<div class="oppia-page-cards-container oppia-signup-page-container">
<mat-card class="oppia-page-card">
<h2 class="oppia-signup-page-title"
tabindex="0"
translate="I18N_SIGNUP_COMPLETE_REGISTRATION">
</h2>

Expand All @@ -21,17 +22,17 @@
[(ngModel)]="username"
[ngModelOptions]="{ standalone: true }"
id="username"
[attr.aria-label]="('I18N_SIGNUP_USERNAME' | translate) + '. ' + ('I18N_SIGNUP_USERNAME_EXPLANATION' | translate)"
class="form-control oppia-username-input e2e-test-username-input"
(blur)="onUsernameInputFormBlur(username)"
(change)="updateWarningText(username)"
oppiaFocusOn="usernameInputField"
autofocus="true">
(ngModelChange)="updateWarningText(username)"
(blur)="onUsernameInputFormBlur(username)">
<span class="form-text oppia-username-explanation-text"
translate="I18N_SIGNUP_USERNAME_EXPLANATION">
</span>
<div class="oppia-warning-text-container">
<p class="oppia-warning-text"
aria-live="assertive"
tabindex="0"
*ngIf="warningI18nCode"
[translate]="warningI18nCode"
[translateParams]="{maxUsernameLength: MAX_USERNAME_LENGTH}">
Expand Down Expand Up @@ -97,14 +98,14 @@
<em translate="I18N_SIGNUP_UPDATE_WARNING"></em>
</p>
</div>
<div class="oppia-long-text" *ngIf="!hasEverRegistered">
<div class="oppia-long-text" *ngIf="!hasEverRegistered" tabindex="0">
<p class="oppia-signup-site-description-text"
translate="I18N_SIGNUP_SITE_DESCRIPTION"
[translateParams]="{sitename: siteName}">
</p>
</div>

<div>
<div tabindex="0">
<strong translate="I18N_SIGNUP_CC_TITLE"></strong>
<br>
<span innerHTML="{{ 'I18N_SIGNUP_LICENSE_NOTE' | translate }}"
Expand Down

0 comments on commit 9f1ae04

Please sign in to comment.