Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

HTML Compliance and Accessibility Improvements (1st Round) #1086

Open
wants to merge 11 commits into
base: main
Choose a base branch
from
Open

HTML Compliance and Accessibility Improvements (1st Round) #1086

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
6fa4fee
Remove redundant aria-hidden attribute from hidden inputs
AslanGM Oct 19, 2023
605225d
Add role attribute to dropdown div for improved accessibility
AslanGM Oct 19, 2023
12fc19f
Remove not allowed 'maxlength' from hidden inputs
AslanGM Oct 19, 2023
09129bc
Update aria-describedby attribute for modal dialog to point to existi…
AslanGM Oct 19, 2023
1971b99
Correct aspect-ratio value to 554 / 107 in CSS
AslanGM Oct 19, 2023
29e5da3
Correct img URL encoding and attribute values
AslanGM Oct 19, 2023
a34790d
Data bubble navigation (#1056)
carkod Oct 19, 2023
dcc9b0e
[WD-6482] add changes to the home page
Sep 29, 2023
a4b24b8
add alt description for vendor logo inmages on home page
Oct 4, 2023
3b13145
replace one word on home page
akbarkz Oct 11, 2023
94398a5
Add data bubble to sitemaps (#1082)
carkod Oct 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion .stylelintrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
],
"ignoreFiles": ["static/sass/_hljs.scss"],
"rules": {
"order/properties-alphabetical-order": true,
"no-invalid-position-at-import-rule": null,
"scss/at-mixin-pattern": null,
"declaration-empty-line-before": null,
Expand Down
4 changes: 3 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,11 @@
"watch-js": "watch -p 'static/js/**/!(*.test)*.{jsx,ts,tsx}' -c 'node build.js'",
"build": "yarn run build-css && yarn run build-js",
"build-css": "sass static/sass/styles.scss static/css/styles.css --load-path=node_modules --style=compressed && postcss --map false --use autoprefixer --replace 'static/css/**/*.css'",
"build-js": "node build.js && yarn run build-cookie-policy && yarn run build-fuse && yarn run build-latest-news",
"build-js": "node build.js && yarn run build-cookie-policy && yarn run build-fuse && yarn run build-latest-news && yarn run build-global-nav",
"build-cookie-policy": "mkdir -p static/js/modules/cookie-policy && cp node_modules/@canonical/cookie-policy/build/js/cookie-policy.js static/js/modules/cookie-policy",
"build-latest-news": "mkdir -p static/js/modules/latest-news && cp node_modules/@canonical/latest-news/dist/latest-news.js static/js/modules/latest-news",
"build-fuse": "mkdir -p static/js/modules/fuse && cp node_modules/fuse.js/dist/fuse.js static/js/modules/fuse",
"build-global-nav": "mkdir -p static/js/modules/global-nav && cp node_modules/@canonical/global-nav/dist/global-nav.js static/js/modules/global-nav",
"format-python": "black --line-length 79 webapp tests",
"format-prettier": "prettier -w 'static/js/*.{js,jsx,ts,tsx}' 'static/sass/*.scss'",
"lint-python": "flake8 --extend-ignore=E203 webapp tests && black --check --line-length 79 webapp tests",
Expand All @@ -25,6 +26,7 @@
"dependencies": {
"@canonical/cookie-policy": "3.5.0",
"@canonical/latest-news": "1.4.1",
"@canonical/global-nav": "3.6.1",
"@testing-library/cypress": "9.0.0",
"autoprefixer": "10.4.13",
"concurrently": "7.6.0",
Expand Down
115 changes: 115 additions & 0 deletions static/sass/_pattern_global-nav.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
@mixin canonical-p-global-nav {
.global-nav__row {
max-width: $grid-max-width;
}

// Using id to override inherited styles from Vanilla and project
#g-navigation {
background-color: $color-dark;
height: 2rem;
line-height: 1rem;

@media screen and (max-width: $breakpoint-large - 1) {
.p-navigation__nav {
height: 100vh;
left: 0;
padding-top: 0.5rem;
position: relative;
top: -1rem;
width: 100%;
}
}

.p-global-nav-anchors {
@extend %small-text;

color: $color-mid-light;
font-weight: $font-weight-thin;
padding-top: 0.3rem;
padding-bottom: 0;
text-decoration: none;
}

.p-navigation__nav {
background-color: $color-dark;
}

#all-canonical-link {
@extend .p-global-nav-anchors;
}

@media screen and (min-width: $breakpoint-large - 1) {
padding-left: 0;
}

.p-navigation__banner {
@media screen and (max-width: $breakpoint-small) {
padding-left: 1rem;
}
}

.global-nav__header-link-anchor {
padding: 0.5rem auto 0.5rem 1.5rem;

&::after {
color: $color-mid-light;
top: 0.5rem;
}

@media screen and (max-width: $breakpoint-large - 1) {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 1.5rem;
}
}

.p-navigation__dropdown {
background-color: $color-dark;
}
}

#all-canonical-mobile {
.p-navigation__dropdown-item {
padding-left: 1.5rem;
}

.global-nav__header-link-anchor::after {
color: $color-mid-light;
top: 0.8rem;
}
}

.global-nav {
@media screen and (max-width: $breakpoint-large - 1) {
position: relative;

}
}

.global-nav-dropdown {
top: 1.5rem;
}

.p-navigation__toggle--open, .p-navigation__toggle--close {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}

.data-fabric-menu {
padding-left: 0;
padding-right: 0;

.p-navigation__toggle--open {
margin-top: 0;
padding-top: 0.5rem;
}
}

.global-nav-dropdown.show-content {
top: 1.9rem;
}

#all-canonical-desktop {
background-color: $color-dark;
}
}
12 changes: 10 additions & 2 deletions static/sass/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
@import "@canonical/cookie-policy/build/css/cookie-policy";

$color-brand: #7c355d;
$color-dark: $colors--dark-theme--background-default;
$color-tabs-active-bar: $colors--light-theme--text-default;
$nudge--small: 0.55rem;
$p-small-lh-diff: map-get($line-heights, default-text) -
Expand All @@ -22,6 +21,7 @@ $p-small-lh-diff: map-get($line-heights, default-text) -
@import "pattern_navigation";
@import "pattern_search-panel";
@import "pattern_careers-progression";
@import "pattern_global-nav";

@include vanilla;
@include vf-p-icon-status-waiting;
Expand All @@ -42,6 +42,7 @@ $p-small-lh-diff: map-get($line-heights, default-text) -
@include canonical-p-search-panel;
@include canonical-u-footer-align-bottom;
@include canonical-p-careers-progression;
@include canonical-p-global-nav;

.js-find-a-partner__partner {
// find-a-partner search
Expand Down Expand Up @@ -786,4 +787,11 @@ $p-small-lh-diff: map-get($line-heights, default-text) -
float: right;
position: sticky;
}
}
}

// /data UX requirement align to the left for smaller devices
.p-data-logos {
@media screen and (min-width: $breakpoint-large - 1) {
text-align: right;
}
}
16 changes: 8 additions & 8 deletions templates/blog/article.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,14 +180,14 @@ <h2 class="p-muted-heading">Newsletter signup</h2>
<button type="submit" class="u-no-margin--bottom">Subscribe now</button>
<input value="1212" name="formid" type="hidden">
<input type="hidden" name="Consent_to_Processing__c" value="yes" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="returnURL" value="https://canonical.com/blog#success" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="utm_campaign" id="utm_campaign" value="" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="utm_medium" id="utm_medium" value="" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="utm_source" id="utm_source" value="" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="utm_content" id="utm_content" value="" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="utm_term" id="utm_term" value="" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="GCLID__c" id="GCLID__c" value="" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="Facebook_Click_ID__c" id="Facebook_Click_ID__c" value="" />
<input type="hidden" name="returnURL" value="https://canonical.com/blog#success" />
<input type="hidden" name="utm_campaign" id="utm_campaign" value="" />
<input type="hidden" name="utm_medium" id="utm_medium" value="" />
<input type="hidden" name="utm_source" id="utm_source" value="" />
<input type="hidden" name="utm_content" id="utm_content" value="" />
<input type="hidden" name="utm_term" id="utm_term" value="" />
<input type="hidden" name="GCLID__c" id="GCLID__c" value="" />
<input type="hidden" name="Facebook_Click_ID__c" id="Facebook_Click_ID__c" value="" />
<input type="hidden" name="thankyoumessage" value="Thank you for subscribing!<br />You will begin receiving emails as new content is posted. You may unsubscribe any time by clicking the link in the email.">
</form>
</div>
Expand Down
16 changes: 8 additions & 8 deletions templates/blog/newsletter-form.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,14 +70,14 @@ <h2>Newsletter <br>signup</h2>

<input value="1212" name="formid" type="hidden">
<input type="hidden" name="Consent_to_Processing__c" value="yes" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="returnURL" value="https://canonical.com/blog#success" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="utm_campaign" id="utm_campaign" value="" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="utm_medium" id="utm_medium" value="" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="utm_source" id="utm_source" value="" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="utm_content" id="utm_content" value="" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="utm_term" id="utm_term" value="" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="GCLID__c" id="GCLID__c" value="" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="Facebook_Click_ID__c" id="Facebook_Click_ID__c" value="" />
<input type="hidden" name="returnURL" value="https://canonical.com/blog#success" />
<input type="hidden" name="utm_campaign" id="utm_campaign" value="" />
<input type="hidden" name="utm_medium" id="utm_medium" value="" />
<input type="hidden" name="utm_source" id="utm_source" value="" />
<input type="hidden" name="utm_content" id="utm_content" value="" />
<input type="hidden" name="utm_term" id="utm_term" value="" />
<input type="hidden" name="GCLID__c" id="GCLID__c" value="" />
<input type="hidden" name="Facebook_Click_ID__c" id="Facebook_Click_ID__c" value="" />
<input type="hidden" name="thankyoumessage" value="Thank you for subscribing!<br />You will begin receiving emails as new content is posted. You may unsubscribe any time by clicking the link in the email.">
</div>
</form>
Expand Down
2 changes: 1 addition & 1 deletion templates/careers/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ <h2 class="u-no-margin--bottom"><strong>Passionate about open source? So are we.
</div>
</div>
<div class="u-fixed-width u-no-padding u-hide--medium u-hide--small">
<img src="https://assets.ubuntu.com/v1/7f34ade9-website_suru_25.jpg" alt="" style="aspect-ratio: 5.1775700934579; width: 100%;"/>
<img src="https://assets.ubuntu.com/v1/7f34ade9-website_suru_25.jpg" alt="" style="aspect-ratio: 554 / 107; width: 100%;"/>
</div>
</section>

Expand Down
20 changes: 10 additions & 10 deletions templates/data/_data-form.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,16 +62,16 @@ <h3 class="p-heading--5">How should we get in touch</h3>
{# End of honey pots #}

<div class="u-hide">
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="returnURL" value="{{returnURL}}" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="formid" value="5037" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="Consent_to_Processing__c" value="yes" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="acquisition_url" id="acquisition_url" value="{{ request.url }}" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="utm_campaign" id="utm_campaign" value="" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="utm_medium" id="utm_medium" value="" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="utm_source" id="utm_source" value="" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="utm_content" id="utm_content" value="" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="utm_term" id="utm_term" value="" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" id="preferredLanguage" name="preferredLanguage" maxlength="255" value="" />
<input type="hidden" name="returnURL" value="{{returnURL}}" />
<input type="hidden" name="formid" value="5037" />
<input type="hidden" name="Consent_to_Processing__c" value="yes" />
<input type="hidden" name="acquisition_url" id="acquisition_url" value="{{ request.url }}" />
<input type="hidden" name="utm_campaign" id="utm_campaign" value="" />
<input type="hidden" name="utm_medium" id="utm_medium" value="" />
<input type="hidden" name="utm_source" id="utm_source" value="" />
<input type="hidden" name="utm_content" id="utm_content" value="" />
<input type="hidden" name="utm_term" id="utm_term" value="" />
<input type="hidden" id="preferredLanguage" name="preferredLanguage" value="" />
</div>

<div class="pagination">
Expand Down
24 changes: 12 additions & 12 deletions templates/data/_form-data-kafka.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ <h2 class="p-heading--4 u-sv1" id="modal-title"><strong>Talk to our Apache Kafka
</div>
<div class="col">
<div class="js-pagination js-pagination--1">
<form action="https://ubuntu.com/marketo/submit" method="post" id="mktoForm_5505" class="modal-form p-form p-form--stacked">
<form action="https://ubuntu.com/marketo/submit" method="post" id="mktoForm_5522" class="modal-form p-form p-form--stacked">
<div class="u-sv2">
<h3 class="p-heading--5">Tell us more about your Kafka use case</h3>
<textarea id="Comments_from_lead__c" name="Comments_from_lead__c" aria-label="Anything you'd like to communicate about your needs or interests?" rows="3" placeholder="Anything you'd like to communicate about your needs or interests?"></textarea>
Expand Down Expand Up @@ -64,17 +64,17 @@ <h3 class="p-heading--5">How should we get in touch?</h3>
</ul>

<div class="u-hide">
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="returnURL" value="{{ returnURL }}" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="formid" value="5505" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="Consent_to_Processing__c" value="yes" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="acquisition_url" id="acquisition_url" value="{{ request.url }}" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="utm_campaign" id="utm_campaign" value="" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="utm_medium" id="utm_medium" value="" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="utm_source" id="utm_source" value="" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="utm_content" id="utm_content" value="" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="utm_term" id="utm_term" value="" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" id="preferredLanguage" name="preferredLanguage" maxlength="255" value="" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="productContext" id="product-context" value="{{ product }}" />
<input type="hidden" name="returnURL" value="{{ returnURL }}" />
<input type="hidden" name="formid" value="5522" />
<input type="hidden" name="Consent_to_Processing__c" value="yes" />
<input type="hidden" name="acquisition_url" id="acquisition_url" value="{{ request.url }}" />
<input type="hidden" name="utm_campaign" id="utm_campaign" value="" />
<input type="hidden" name="utm_medium" id="utm_medium" value="" />
<input type="hidden" name="utm_source" id="utm_source" value="" />
<input type="hidden" name="utm_content" id="utm_content" value="" />
<input type="hidden" name="utm_term" id="utm_term" value="" />
<input type="hidden" id="preferredLanguage" name="preferredLanguage" value="" />
<input type="hidden" name="productContext" id="product-context" value="{{ product }}" />
</div>

<div class="pagination">
Expand Down
20 changes: 10 additions & 10 deletions templates/data/_form-data-mongodb.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,16 +49,16 @@ <h3 class="p-heading--5">How should we get in touch?</h3>


<div class="u-hide">
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="returnURL" value="{{ returnURL }}" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="formid" value="4903" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="acquisition_url" id="acquisition_url" value="{{ request.url }}" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="Consent_to_Processing__c" value="yes" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="utm_campaign" id="utm_campaign" value="" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="utm_medium" id="utm_medium" value="" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="utm_source" id="utm_source" value="" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="utm_content" id="utm_content" value="" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="utm_term" id="utm_term" value="" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="productContext" id="product-context" value="{{ product }}" />
<input type="hidden" name="returnURL" value="{{ returnURL }}" />
<input type="hidden" name="formid" value="4903" />
<input type="hidden" name="acquisition_url" id="acquisition_url" value="{{ request.url }}" />
<input type="hidden" name="Consent_to_Processing__c" value="yes" />
<input type="hidden" name="utm_campaign" id="utm_campaign" value="" />
<input type="hidden" name="utm_medium" id="utm_medium" value="" />
<input type="hidden" name="utm_source" id="utm_source" value="" />
<input type="hidden" name="utm_content" id="utm_content" value="" />
<input type="hidden" name="utm_term" id="utm_term" value="" />
<input type="hidden" name="productContext" id="product-context" value="{{ product }}" />
</div>

<hr class="is-fixed-width">
Expand Down
Loading