gitadmin/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-05-28 18:26:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(a11y): improve RWD challege grid accessibility (#45957)

Browse Source 
* fix: improve RWD challege grid accessibility

* fix: change wording from challenge to step

* fix: improve keyboard focus indicator on step links

* fix: style jump link as button

* fix: accessible background color for completed steps

* refactor: make steps a nav region

* refactor: remove duplicate selector

* fix: enhance focus indicator on jump link

* fix: TS type

* refactor: remove unneeded CSS

* chore: resolve conflict

* chore: translate accessible name on nav

* fix: remove h4 from button

* fix: add course name to toggle button

* fix: improve accessibility of course stats on toggle button

* fix: prefix step links with sr-only "Step"

* fix: add start project button

* refactor: remove unnecessary spaces

* fix: clean up styles

* Update client/src/templates/Introduction/intro.css

Co-authored-by: ahmad abdolsaheb <ahmad.abdolsaheb@gmail.com>
This commit is contained in:
Bruce Blaser
2022-06-17 05:45:40 -07:00
committed by GitHub
parent c72aa66056
commit bcb048a93b
4 changed files with 146 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/templates/Introduction/intro.css
+41 -3
View File
@@ -44,11 +44,23 @@ a.cert-tag:active {
}
.block-grid-title {
font-size: 1.2rem;
margin: 0;
overflow-wrap: break-word;
}
.block-grid .challenge-jump-link {
margin: 0 25px 25px;
}
.block-grid .challenge-jump-link a:focus {
outline: 3px solid var(--blue-mid);
outline-offset: 0;
}
.block-grid .challenge-jump-link a:focus:not(:focus-visible) {
outline: none;
}
.block-title-translation-cta {
white-space: nowrap;
padding: 0.2em 0.5em;
@@ -234,11 +246,30 @@ button.map-title {
.map-challenge-title a {
width: 100%;
padding: 10px 15px;
align-items: center;
}
.map-challenges-grid .map-challenge-title a {
width: 3.4rem;
height: 2.75rem;
min-width: 24px;
min-height: 24px;
padding: 0;
}
.map-challenges-grid .map-challenge-title a:focus {
outline: 3px solid var(--secondary-color);
outline-offset: -3px;
}
.map-challenges-grid .map-challenge-title a:focus:not(:focus-visible) {
outline: none;
}
.map-challenges-grid {
display: flex;
flex-wrap: wrap;
margin-top: 1rem;
}
.map-challenge-title-grid {
flex: 0 1 60px;
@@ -261,6 +292,13 @@ button.map-title {
.challenge-completed {
background: var(--highlight-background);
position: relative;
}
.challenge-completed span {
font-weight: 700;
font-size: 1.3rem;
margin-top: -0.05rem;
}
@media screen and (max-width: 500px) {
@@ -346,7 +384,7 @@ button.map-title {
}
.block-grid {
border-bottom: 3px solid var(--secondary-background);
border-bottom: 4px solid var(--secondary-background);
}
.block-grid .block-header {
@@ -366,7 +404,7 @@ button.map-title {
}
.block-grid .block-header[aria-expanded='true'] {
border-bottom: 3px solid var(--secondary-background);
border-bottom: 2px solid var(--secondary-background);
}
.block-header-button-text {