search

GSA / openacr

OpenACR is a digital native Accessibility Conformance Report (ACR). The initial development is based on Section 508 requirements. The main goal is to be able to compare the accessibility claims of digital products and services. A structured, self-validated, machine-readable documentation will provide for this.
https://gsa.github.io/openacr/
Other
83 stars 18 forks source link

Fix search button so that the icon shows #303

Closed mgifford closed 2 years ago

mgifford commented 2 years ago

The search icon isn't showing up here: <button class="usa-button" type="submit"><span class="usa-sr-only">Search</span></button>

Screen Shot of header with broken image

This I think should be delivered with:

@media (min-width: 480px)
.usa-search--small [type="submit"], .usa-search--small .usa-search__submit {
    background-image: url(../uswds/img/usa-icons-bg/search--white.svg), linear-gradient(transparent, transparent);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 1.3333333333rem;
    width: 2.6666666667rem;

When looking at https://18f.gsa.gov/

Screen Shot from 18F's home page
bruce-usab commented 2 years ago

May be related to https://github.com/uswds/uswds/issues/4478 which we recently resolved at USAB. Also ping to @michaelhortongsa since Section508.gov is doing the same thing with the How You Know drop-down.

mgifford commented 2 years ago

Thanks for the heads-up @bruce-usab

I wonder if this was broken as part of the upgrade we did at the start of the year.

Looks like we'll need to install this: https://github.com/uswds/uswds-compile#installation

Demo site can be found here.

dmundra commented 2 years ago

Installing all those assets seems like a waste right now. I went ahead and just fixed the code and CSS.