a0b1ff8293644fb7d8cf5fa860312c29f31c2c67 Merge parents 5709a7858d5 651f959d755 lrnassar Tue Mar 17 08:52:21 2026 -0700 Merge branch 'lrnassar-accessibility-form-labels' diff --cc src/hg/hgGateway/hgGateway.html index 5231cb6a3bf,335dc42a355..f9c3ebe12fd --- src/hg/hgGateway/hgGateway.html +++ src/hg/hgGateway/hgGateway.html @@@ -1,317 -1,317 +1,317 @@@ <!-- For determining width of scrollbar (if there is one) --> <div id="sbTestContainer"> <div id="sbTestContainerDPlain"></div> <div id="sbTestContainerDScroll" style="overflow: scroll;"> <div id="sbTestContainerDInsideScroll"></div> </div> </div> <div id="pageContent"> <div id="selectSpeciesSection" class="jwColumn" style="width: 450px;"> <div class="jwSectionTitle"> Browse/Select Species </div> <div class="jwSectionContents"> <div id="popSpeciesTitle" class="jwSubsectionTitle"> Popular Species </div> <div class="jwSubsectionContents"> <div class="jwIconWrapper"> <div class="jwIconSprite jwIconSpriteHuman"></div> <div class="jwIconSpriteLabel">Human</div> </div> <div class="jwIconWrapper"> <div class="jwIconSprite jwIconSpriteMouse"></div> <div class="jwIconSpriteLabel">Mouse</div> </div> <div class="jwIconWrapper"> <div class="jwIconSprite jwIconSpriteRat"></div> <div class="jwIconSpriteLabel">Rat</div> </div> <div class="jwIconWrapper"> <div class="jwIconSprite jwIconSpriteZebrafish"></div> <div class="jwIconSpriteLabel">Zebrafish</div> </div> <div class="jwIconWrapper"> <div class="jwIconSprite jwIconSpriteFly"></div> <div class="jwIconSpriteLabel">Fruitfly</div> </div> <div class="jwIconWrapper"> <div class="jwIconSprite jwIconSpriteWorm"></div> <div class="jwIconSpriteLabel">Worm</div> </div> <div class="jwIconWrapper"> <div class="jwIconSprite jwIconSpriteYeast"></div> <div class="jwIconSpriteLabel">Yeast</div> </div> <br>Search through thousands of genome assemblies <span id="speciesSearchInfo"> <svg style="height:1.1em; vertical-align:top" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="12" cy="12" r="10" stroke="#1C274C" stroke-width="1.5"/> <path d="M12 17V11" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/> <circle cx="1" cy="1" r="1" transform="matrix(1 0 0 -1 11 9)" fill="#1C274C"/> </svg> </span> <div> - <input id="speciesSearch" value="" size=42> + <input id="speciesSearch" value="" size=42 aria-label="Search species, common name or assembly ID"> </div> <a href="/assemblySearch.html" id="assemblySearchLink" style="text-decoration: none;"> <div style="padding: 0px; display: flex; align-items: center; margin-top: 12px;"> <p style="margin: 0; padding-right: 0px; color: blue; text-decoration: underline;" title="Not finding your assembly on the Gateway page? Visit the Genome assembly search and request page to request it. Ensure you have a GCA_ or GCF_ identifier from NCBI.">Unable to find a genome? Send us a request.</p> - <img src="/images/magnify.png" + <img alt="" src="/images/magnify.png" style="height: 16px; width: 16px; margin-top: 0px; margin-left: 5px;" title="Not finding your assembly on the Gateway page? Visit the Genome assembly search and request page to request it. Ensure you have a GCA_ or GCF_ identifier from NCBI."> </div> </a> </div> <!-- Recent Genomes Panel (replaces species tree) --> <div id="recentGenomesTitle" class="jwSubsectionTitle" style="display: none;"> Recent Genomes <span id="recentGenomesInfo"> <svg style="height:1.1em; vertical-align:top" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="12" cy="12" r="10" stroke="#1C274C" stroke-width="1.5"/> <path d="M12 17V11" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/> <circle cx="1" cy="1" r="1" transform="matrix(1 0 0 -1 11 9)" fill="#1C274C"/> </svg> </span> </div> <div id="recentGenomesSection" class="jwSubsectionContents" style="display: none;"> <div id="recentGenomesPanel" class="recentGenomesPanel"> <div id="recentGenomesList" class="recentGenomesList"> <!-- Recent genomes will be populated by JavaScript --> </div> </div> </div> <div id="connectedHubsTitle" class="jwSubsectionTitle" style="display: none;"> Connected Hub Assemblies <span id="connectedHubsInfo"> <svg style="height:1.1em; vertical-align:top" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="12" cy="12" r="10" stroke="#1C274C" stroke-width="1.5"/> <path d="M12 17V11" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/> <circle cx="1" cy="1" r="1" transform="matrix(1 0 0 -1 11 9)" fill="#1C274C"/> </svg> </span> </div> <div id="connectedHubsSection" class="jwSubsectionContents" style="display: none;"> <div id="connectedHubsPanel" class="recentGenomesPanel"> <div id="connectedHubsList" class="recentGenomesList"> <!-- Connected hubs will be populated by JavaScript --> </div> </div> </div> <a href="#showSpeciesTree" id="speciesTreeLink">Show species tree</a> <!-- Species tree underneath the recent genomes section --> <div id="representedSpeciesTitle" class="jwSubsectionTitle" style="display: none;"> Commonly used assemblies </div> <div id="speciesGraphic" class="jwSubsectionContents" style="display: none;"> <div id="sliderWidgetContainer" class="jwSliderWidget"> <div id="sliderSvgContainer" class="jwSliderIcon"> <svg id="sliderSvg" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" height="53" width="30"> <rect id="sliderRectangle" ry="3" y="1.5" x="1.5" height="50" width="24" style="fill: none; stroke: #222222; stroke-width: 3;"></rect> <path id="sliderTriangle" d="m 2.5,24 0,6 4,-3 z" style="fill: #222222; stroke: #222222; stroke-width: 3"></path> </svg> </div> <!-- sliderSvgContainer --> <div class="jwRainbowSlider" id="rainbowSlider"> <!-- JS will populate this --> </div> </div> <!-- sliderWidgetContainer --> <div class="jwSpeciesPicker" id="speciesPicker"> <div id="speciesTreeContainer" class="jwColumn" style="overflow: visible;"> <svg id="speciesTree" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <!-- The y coordinates of these will be overwritten by JS. --> <!-- I tried creating them in JS, but then the image style url('#clipWhatever') didn't work. --> <clipPath id="clipHuman"> <rect x="2" y="0" width="65" height="65"></rect> </clipPath> <clipPath id="clipMouse"> <rect x="2" y="0" width="65" height="65"></rect> </clipPath> <clipPath id="clipFly"> <rect x="2" y="0" width="65" height="65"></rect> </clipPath> <clipPath id="clipWorm"> <rect x="2" y="0" width="65" height="65"></rect> </clipPath> <clipPath id="clipYeast"> <rect x="2" y="0" width="65" height="65"></rect> </clipPath> <clipPath id="clipMonkey"> <rect x="2" y="0" width="65" height="65"></rect> </clipPath> <clipPath id="clipHedgehog"> <rect x="2" y="0" width="65" height="65"></rect> </clipPath> <clipPath id="clipPig"> <rect x="2" y="0" width="65" height="65"></rect> </clipPath> <clipPath id="clipCow"> <rect x="2" y="0" width="65" height="65"></rect> </clipPath> <clipPath id="clipOrca"> <rect x="2" y="0" width="65" height="65"></rect> </clipPath> <clipPath id="clipHorse"> <rect x="2" y="0" width="65" height="65"></rect> </clipPath> <clipPath id="clipDog"> <rect x="2" y="0" width="65" height="65"></rect> </clipPath> <clipPath id="clipWalrus"> <rect x="2" y="0" width="65" height="65"></rect> </clipPath> <clipPath id="clipBat"> <rect x="2" y="0" width="65" height="65"></rect> </clipPath> <clipPath id="clipElephant"> <rect x="2" y="0" width="65" height="65"></rect> </clipPath> <clipPath id="clipManatee"> <rect x="2" y="0" width="65" height="65"></rect> </clipPath> <clipPath id="clipArmadillo"> <rect x="2" y="0" width="65" height="65"></rect> </clipPath> <clipPath id="clipKangaroo"> <rect x="2" y="0" width="65" height="65"></rect> </clipPath> <clipPath id="clipBird"> <rect x="2" y="0" width="65" height="65"></rect> </clipPath> <clipPath id="clipLizard"> <rect x="2" y="0" width="65" height="65"></rect> </clipPath> <clipPath id="clipFrog"> <rect x="2" y="0" width="65" height="65"></rect> </clipPath> <clipPath id="clipFish"> <rect x="2" y="0" width="65" height="65"></rect> </clipPath> <clipPath id="clipEbola"> <rect x="2" y="0" width="65" height="65"></rect> </clipPath> </defs> <style> text { stroke:none; fill: black; font-size: 12px; text-anchor: end; letter-spacing: 0.025em; cursor: pointer; } text:hover, text.selected { fill: #31469A; /* rainbow dark blue: */ font-weight: bold; } text.trackHubsLink { text-anchor: start; } line { stroke: #4b759d; stroke-width: 1; } line:hover { stroke-width: 2; } </style> <!-- Tree inserted here by JS --> </svg> </div> <!-- speciesTreeContainer --> </div> <!-- speciesPicker --> </div> <!-- speciesGraphic --> </div> <!-- jwSectionContents --> </div> <!-- selectSpeciesSection --> <div id="findPositionSection" class ="jwColumn"> <div id="findPositionTitle" class="jwSectionTitle"> Find Position </div> <div id="findPositionContents" class="jwSectionContents" style="display: none;"> <!-- To avoid empty containers jumping around, hide first. --> <div id="findPosInputContainer" style="display: inline-block;"> - <div id="selectAssemblyLabel" class="jwInputLabel">Assembly</div> + <label for="selectAssembly" id="selectAssemblyLabel" class="jwInputLabel">Assembly</label> <select id="selectAssembly"> </select> <div class="vertSpacerAbovePosition"></div> - <div class="jwInputLabel"> + <label for="positionInput" class="jwInputLabel"> Position/Search Term <span style="font-size: smaller"> (<a href="../../goldenPath/help/query.html">Examples</a>) </span> - </div> + </label> <input id="positionInput" value="" size="40"> <div class="jwCurrentPos"> Current position: <span id="positionDisplay" class="jwPosDisplay"></span> <i id="copyPosition" class="fa fa-copy jwTextBlue" title="Copy the current position into the input above"></i> </div> </div> <div class="jwGoButtonContainer" title="Go to the Genome Browser"> <div class="jwGoButton"> GO </div> <i class="jwGoIcon fa fa-play fa-2x"></i> </div> <div id="surveyContainer" class="jwSurveyContainer"></div> <div class="vertSpacerBelowPosition jwClearBoth"></div> <div id="descriptionTitle" class="jwDescriptionTitle"> <div class="jwFloatLeft"> <b><span id="descriptionGenome"></span> Genome Browser</b> - <span id="descriptionDb"></span> assembly </div> <div class="jwFloatRight" style="margin-left: 5px;"> <a id="chromInfoLink" class="jwAnchor" href="hgTracks?chromInfoPage=&hgsid=$hgsid"> <div class="jwWhiteButton"> View sequences </div> </a> </div> <div class="jwClearBoth"></div> </div> <div id="descriptionText" class="jwDescriptionText"> </div> </div> </div> </div> <div style="clear: both;"></div>