9a1687b6341af06ee8e0746a9a502ba09cee8284 lrnassar Tue Apr 7 16:11:57 2026 -0700 Add missing form labels and aria-labels across hgTables pages and main site search. refs #37343 Main page search bar (index.html): aria-label on search input. hgTables main page (mainPage.c): aria-label on Galaxy/GREAT checkboxes, fix Position label to target radio button instead of text input, aria-label on position text input. hgTables user regions (userRegions.c): aria-label on paste textarea and file upload input. hgTables filter page (filterFields.c): aria-label on all per-field filter dropdowns and text inputs across string, numeric, integer, and enum field types. hgTables intersect page (intersect.c): label elements on all 6 radio buttons and 2 complement checkboxes, aria-label on threshold text inputs. diff --git src/hg/htdocs/index.html src/hg/htdocs/index.html index e06beef7463..f8750692117 100755 --- src/hg/htdocs/index.html +++ src/hg/htdocs/index.html @@ -1,185 +1,186 @@ <!DOCTYPE html> <!--#set var="TITLE" value="UCSC Genome Browser Home" --> <!--#set var="ROOT" value="." --> <head> <meta name="description" content="UCSC Genome Browser"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content="genome, genome browser, human genome, genome assembly, Blat, UCSC, bioinformatics, gene prediction, SNP, SNPs, EST, mRNA, mouse genome, rat genome, chicken genome, chimp genome, dog genome, fruitfly genome, zebrafish genome, xenopus, frog genome, rhesus, opossum, danio rerio genome, drosophila, fugu, yeast, ciona, comparative genomics, human variation, hapMap"> <link rel="stylesheet" href="../style/jWest.css"> </head> <!-- Banner --> <div id="banner" class="jwBanner"> <a class="jwAnchor" href="http://www.ucsc.edu/"> <div class="jwUcscLogoWrapper"> <img alt="University of California Santa Cruz Genomics Institute logo" src="../images/GIlogo.png" class="jwUcscLogoWrapper"> </div> </a> <img alt="UCSC DNA helix arch logo" src="../images/ucscHelixLogo.png" class="jwBannerHelixLogo"> <div class="jwBannerTitle"> Genome Browser </div> </div> <!--#include virtual="$ROOT/inc/gbPageStart.html"--> <div class="row" style="background:#275172;"> <div class="col-md-12"> <p class="text-center"> <a href="cgi-bin/hgTracks"><img class='text-center' src="images/genomeBrowserBanner.jpg" width="100%" height="100%" style="margin-left:0; margin-top:0;" alt="Welcome to the UCSC Genome Browser."></a> <br> <br> </p> </div> </div> <!-- hgwdev warning (if applicable) --> <!--#if expr='("$SERVER_NAME" = /hgwdev.*.ucsc.edu/ || "$SERVER_NAME" = /genome-test.*.ucsc.edu/) && "$SERVER_NAME" != /hgwdev-demo6/'--> <div id="devWarningRow" class="jwRow"> <div id="devWarningBox" class="jwWarningBox jwWarningBoxStatic" style="width: auto;"> WARNING: This is the UCSC Genome Browser development site. This website is used for testing purposes only and is not intended for general public use. Data and tools on this site are under development, have not been reviewed for quality, and are subject to change at any time. The high-quality, reviewed public site of the UCSC Genome Browser is available for use at <a href="http://genome.ucsc.edu/">http://genome.ucsc.edu/</a>. </div> </div> <!--#endif --> <!-- genome-preview warning (if applicable) --> <!--#if expr='"$SERVER_NAME" = /genome-preview.*.ucsc.edu/' --> <div id="previewWarningRow" class="jwRow"> <div id="previewWarningBox" class="jwWarningBox jwWarningBoxStatic" style="width: auto;"> WARNING: This is the UCSC Genome Browser preview site. This website is a weekly mirror of our internal development server for public access. Data and tools on this site are under development, have not been reviewed for quality, and are subject to change at any time. We provide this site for early access, with the warning that it is less available and stable than our public site. The high-quality, reviewed public site of the UCSC Genome Browser is available for use at <a href="http://genome.ucsc.edu/">http://genome.ucsc.edu/</a>. </div> <!-- previewWarningBox --> </div> <!-- previewWarningRow --> <!--#endif --> <!-- warning for mirrors (if applicable) --> <!--#if expr='"$SERVER_NAME" != /.*.ucsc.edu/ && "$SERVER_NAME" != /.*.sdsc.edu/ && "$SERVER_NAME" != /browser/'--> <!-- 'browser' = GBiB --> <p style="text-align: center;"> <strong>This website <em><!--#echo var="HTTP_HOST" --></em> is a "mirror" not run by UCSC.</strong> If you have questions, please try to contact the person who manages this mirror. <br><br> <strong>If you write the UCSC mailing list, please include this mirror's address <em>http://<!--#echo var="HTTP_HOST" --></em> with any questions.</strong></p> <!--#endif --> <div style="display: flex; align-items: center; justify-content: center; text-align: center;margin-top: 10px;"> <a href="/docs/" style="margin-right: 20px; text-align: center;" title="Genome browser tutorials including annotated images, walkthroughs, and interactive tutorials."> <div style="border: 2px solid red; padding: 5px; display: flex; align-items: center;"> <p style="margin: 0; padding-right: 0px;">See our new<br>tutorials page!</p> <img alt="Training tutorials icon" src="/images/trainingIcon.png" style="height: 47px; width: 47px; margin-top: 0px; margin-left: 5px; border: none"> </div> </a> <!-- <span>right text</span> </div> --> <input size=50 name="searchString" id="searchBarSearchString" type="text" + aria-label="Search genes, data, help docs and more" placeholder="Search genes, data, help docs and more..."></input> <input name="searchButton" id="searchBarSearchButton" type="submit" value="Search"></input> <script> function searchBarClick() { searchStr = document.getElementById('searchBarSearchString').value; if (searchStr.length > 0) { // helper functions for checking whether a plain chrom name was searched for term = encodeURIComponent(searchStr.replace(/^[\s]*/,'').replace(/[\s]*$/,'')); function onSuccess(jqXHR, textStatus) { if (jqXHR.chromName !== null) { window.location.assign("../cgi-bin/hgTracks?position=" + term ); } else { window.location.assign("../cgi-bin/hgSearch?search=" + term); } } function onFail(jqXHR, textStatus) { window.location.assign("../cgi-bin/hgSearch?search=" + term); } // redirect to search disambiguation page if it looks like we didn't enter a regular position: var canonMatch = searchStr.match(canonicalRangeExp) var gbrowserMatch = searchStr.match(gbrowserRangeExp); var lengthMatch = searchStr.match(lengthRangeExp); var bedMatch = searchStr.match(bedRangeExp); var sqlMatch = searchStr.match(sqlRangeExp); var singleMatch = searchStr.match(singleBaseExp); var positionMatch = canonMatch || gbrowserMatch || lengthMatch || bedMatch || sqlMatch || singleMatch; // the following encodes the cartJson cmd as a query string, skipping reliance // on hgTracks.js:cart:varsToUrlData() const url = new URL(window.location.href); const params = new URLSearchParams(url.search); params.append("cjCmd", '{"getChromName": {"searchTerm": "' + term + '"}}'); if (positionMatch === null) { // user may have entered a full chromosome name, check for that asynchronosly: $.ajax({ type: "GET", url: "../cgi-bin/hgSearch", data: params.toString(), dataType: "json", trueSuccess: onSuccess, success: onSuccess, error: onFail, cache: true }); return false; } } } document.getElementById('searchBarSearchButton').addEventListener('click', searchBarClick); $('#searchBarSearchString').bind('keypress', function(e) { // binds listener to url field if (e.which === 13) { // listens for return key e.preventDefault(); // prevents return from also submitting whole form searchBarClick(); } }); </script> </span></div> <!-- Add tips message only for .ucsc Browser instances. To add a new tip, add a line to allTipsRaw.html in htdocs --> <!--#if expr='$SERVER_NAME = /\.ucsc\.edu$/' --> <div style="background-color: #f0f8ff; border-left: 4px solid #4a90e2; padding: 12px 15px; margin-top: 15px; margin-left: auto; margin-right: auto; max-width: 70%; border-radius: 4px; display: flex; align-items: center; gap: 12px;"> <img src="/images/didYouKnow.png" alt="Did you know?" style="height: 50px; width: auto; flex-shrink: 0;"> <p style="margin: 0; font-size: 14px; line-height: 1.5; color: #333;"> <!--#include virtual="tipOfDay.html"--> </p> </div> <!--#endif --> <div class="row"> <!-- Tools --> <!--#include virtual="ourTools.html"--> <!-- Latest Releases --> <!--#include virtual="indexReleases.html"--> </div> <!-- Meetings and Workshops --> <!--#include virtual="indexMeetings.html"--> <div class="row"> <!-- Sharing --> <!--#include virtual="indexSharing.html"--> <!-- Training --> <!--#include virtual="indexTraining.html"--> </div> <!--#include virtual="$ROOT/inc/gbPageEnd.html"-->