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

Ignore GSC verification in pa11y, change btn type to submit for availability form #212

Closed
wants to merge 5 commits into from
Closed

Ignore GSC verification in pa11y, change btn type to submit for availability form #212

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
40a26b2
Ignore GSC verification in pa11y
rachidatecs Jan 29, 2024
60a31a7
Fix form JS
rachidatecs Jan 29, 2024
367d966
Remove GSC verification file, refactor scss for availability form, up…
rachidatecs Jan 29, 2024
f65c81d
Merge remote-tracking branch 'origin/main' into accessibility-fixes
rachidatecs Jan 29, 2024
651c35f
Change pra anchor to span
rachidatecs Jan 29, 2024
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
8 changes: 7 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,13 @@ For more about the template and it's functionality see [here](https://github.com

#### Run with 'clean' to force reset the assets

`npm run dev:clean`
If you are having issues with assets being locally cached/not updating:

`npm run clean && npm run dev`

### Run Pa11y

`npm run pa11y`

## Adding new content and front matter
You can create new pages by creating a new markdown file (.md) and adding “front matter” to the top of the markdown file. The front matter section starts and ends with three hyphens (---). It consists of key-value pairs that define some meta-data and options for the page.
Expand Down
5 changes: 2 additions & 3 deletions _data/assetPaths.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
"admin.map": "/assets/js/admin-77FHK54G.js.map",
"app.js": "/assets/js/app-XWR645AF.js",
"app.map": "/assets/js/app-XWR645AF.js.map",
"uswds.js": "/assets/js/uswds-init.js",
"styles.css": "/assets/styles/styles-AUS364VQ.css",
"styles.map": "/assets/styles/styles-AUS364VQ.css.map"
"styles.css": "/assets/styles/styles-VX3E4X7F.css",
"styles.map": "/assets/styles/styles-VX3E4X7F.css.map"
}
50 changes: 21 additions & 29 deletions _includes/domain-search.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@

<script>
function checkDomainAvailability() {
// Cancel the default action
event.preventDefault();

const baseUrl = "https://manage.get.gov/api/v1/available/?domain="

var requested_domain = document.getElementById('domain-input').value
Expand Down Expand Up @@ -54,28 +57,18 @@
}

function render_result(content, append = true){
document.getElementById('domain-available-message').innerHTML = (append == true) ? content : `<div></div>`;
document.getElementById('usa-search--domain_message').innerHTML = (append == true) ? content : `<div></div>`;
}

document.addEventListener("keypress", function(event) {
// If the user presses the "Enter" key on the keyboard
if (event.key === "Enter") {
// Cancel the default action
event.preventDefault();
// Click the "check availability" button
document.getElementById("check-domain-availability-button").click();
}
});

</script>

<section class="usa-section domain-section padding-bottom-5 bg-accent-cool-lighter">
<div class="grid-container">
<div class="domain-search-image">
<div class="usa-search--domain-image">
<h2>
Start your .gov domain search
</h2>
<h3 class="domain-search-subtitle
<h3 class="usa-search--domain-subtitle
line-height-heading-3
margin-top-0 margin-bottom-3
text-normal"
Expand All @@ -86,24 +79,23 @@ <h2>
Read more about choosing your .gov domain.
</a>
</h3>
<form class="usa-search domain-search domain-search-wrapper" role="search">
<form class="usa-search usa-search--domain" role="search">
<label class="usa-sr-only" for="domain-input">Search</label>
<div class="domain-search-input-wrapper">
<input
class="usa-input usagov-search-autocomplete"
id="domain-input"
type="search"
name="query"
autocomplete="off"
aria-label="Check Domain Name input"
title="Check Domain input"
>
<span class="usa-search__submit-text">.gov</span>
<div class="usa-search--domain__form-group">
<input
class="usa-input usagov-search-autocomplete"
id="domain-input"
type="search"
name="query"
autocomplete="off"
aria-label="Check Domain Name input"
title="Check Domain input"
>
<span class="usa-search__submit-text">.gov</span>
</div>
<button
id="check-domain-availability-button"
class="usa-button availability-button"
type="button"
class="usa-button usa-search--domain__submit"
type="submit"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When it was changed from button to submit, I think some of the padding and sizing got shifted as well.

What it's supposed to look like:
Screenshot 2024-01-29 at 8 17 12 AM

What it currently looks like (see left side of the button):
Screenshot 2024-01-29 at 8 15 30 AM

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Needs to be moved margin-left: 1 rem .. looking into why the button edge is overflowing

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Screenshot 2024-01-29 at 8 22 37 AM

These two border are culprit of the left edges being wonky

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool, on it

onclick="checkDomainAvailability()"
onsubmit="return false"
aria-label="Check availability of Domain Name"
Expand All @@ -112,7 +104,7 @@ <h2>
Check availability
</button>
</form>
<div class="domain-alert" id="domain-available-message"></div>
<div class="usa-search--domain_message" id="usa-search--domain_message"></div>
</div>
</div>
</section>
1 change: 0 additions & 1 deletion googlea7b9a2b812e0d81e.html
View file
Open in desktop

This file was deleted.

55 changes: 24 additions & 31 deletions styles/_uswds-theme-custom-styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -230,43 +230,38 @@ HOME
}

// ## DOMAIN SEARCH ---------------------------------------
.availability-button {
margin-right: 0;
.usa-search--domain {
flex-direction: column;
gap: 16px;
line-height: 1;
font-size: 1rem;
align-items: center;
@include at-media(mobile-lg) {
margin-left: units(2);
flex-direction: row;
}
padding-right: 1rem;
padding-left: 1rem;
height: 2.25rem;
line-height: 0.5;
}

.domain-search-input-wrapper {
.usa-search--domain__form-group {
width: 100%;
@include at-media(mobile-lg) {
width: auto;
}
}

.domain-search {
line-height: 1;
font-size: 1rem;
align-items: center;
}

.domain-search input {
.usa-search--domain input {
height: 2.125rem;
@include at-media(mobile-lg) {
width: 13.75rem;
}
}

.domain-search input:not([disabled]):focus {
.usa-search--domain input:not([disabled]):focus {
outline: 0rem;
border: 0.25rem solid #2491ff;
}

.domain-search span {
// .gov
.usa-search--domain span {
display: flex;
background-color: #AFD5E6;
padding-left: 1rem;
Expand All @@ -279,22 +274,20 @@ HOME
height: 2.125rem;
}

.domain-search-wrapper {
flex-direction: column;
gap: 16px;
@include at-media(mobile-lg) {
flex-direction: row;
}
}

.domain-search-heading {
.usa-search .usa-search--domain__submit {
margin-right: 0;
@include at-media(mobile-lg) {
max-width: 60%;
margin-left: units(2);
}
font-size: 1rem;
padding-right: 1rem;
padding-left: 1rem;
height: 2.25rem;
line-height: 0.5;
border-bottom-left-radius: units(0.5);
border-top-left-radius: units(0.5);
}

.domain-search-image {
.usa-search--domain-image {
@include at-media(mobile-lg) {
background-image: url('../_img/dotgov_availability.svg');
background-position: 100% 30%;
Expand All @@ -314,15 +307,15 @@ HOME
margin-bottom: 0.75rem;
}

.domain-search-subtitle {
.usa-search--domain-subtitle {
@include at-media(mobile-lg) {
max-width: 50%;
}
font-size: 1.06rem;
line-height: 1.59rem;
}

.domain-alert {
.usa-search--domain_message {
@include at-media(mobile-lg) {
max-width: 50%;
}
Expand Down
Loading