Skip to content

Commit

Permalink
-refactor/accessibility: add alt text for images
Browse files Browse the repository at this point in the history 
-refactor/accessibility: order tabIndex
-fix: gosling panel padding bug
  • Loading branch information
@crfmc
crfmc committed Jul 18, 2024
1 parent 94826ce commit 15262c7
Show file tree
Hide file tree
Showing 6 changed files with 90 additions and 46 deletions.
9 changes: 9 additions & 0 deletions src/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -492,12 +492,17 @@ a:hover {
cursor: pointer;
z-index: 998;
opacity: 0.5;
border: none;
}

.move-to-top-btn:hover {
opacity: 1;
}

.move-to-top-btn:focus-visible {
outline-offset: 2px;
}

.interaction-toggle-button {
z-index: 999;
cursor: pointer;
Expand Down Expand Up @@ -905,6 +910,10 @@ a:hover {
border: 1px solid #d3d3d3;
}

.navigation-button:focus-visible {
outline-offset: -1px;
}

.navigation-button:hover:not(:disabled) {
background-color: #ebebeb;
}
Expand Down
28 changes: 21 additions & 7 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -319,7 +319,7 @@ function App(props: RouteComponentProps) {
window.addEventListener(
'resize',
debounce(() => {
setVisPanelWidth(window.innerWidth - VIS_PADDING.left * 2);
setVisPanelWidth(window.innerWidth - (isMinimalMode ? 10 : VIS_PADDING.left * 2));
}, 500)
);

Expand Down Expand Up @@ -553,10 +553,12 @@ function App(props: RouteComponentProps) {
const offset = genomeViewHeight + (isMinimalMode ? 100 : 40) - 2;

// Infer the tracks shown
const tracksShown: Track[] = ['driver', 'ideogram', 'gene', 'sv'];
if (demo.cnv) tracksShown.push('cnv', 'gain', 'loh');
const tracksShown: Track[] = ['ideogram', 'driver', 'gene'];
if (demo.vcf && demo.vcfIndex) tracksShown.push('mutation');
if (demo.vcf2 && demo.vcf2Index) tracksShown.push('indel');
if (demo.cnv) tracksShown.push('cnv', 'gain', 'loh');
// Pushing this after the others to match order of tracks in UI
tracksShown.push('sv');
if (selectedSvId !== '') tracksShown.push('sequence');
if (demo.bam && demo.bai && selectedSvId !== '') tracksShown.push('coverage', 'alignment');
const HEIGHTS_OF_TRACKS_SHOWN = TRACK_DATA.filter(d => tracksShown.includes(d.type));
Expand Down Expand Up @@ -584,7 +586,7 @@ function App(props: RouteComponentProps) {
return (
<a
key={i}
tabIndex={0}
tabIndex={4}
role="button"
className="track-tooltip btn btn-sm"
data-bs-trigger="focus"
Expand Down Expand Up @@ -1141,6 +1143,7 @@ function App(props: RouteComponentProps) {
<div className="navigation-button-container split navigation-button-genome">
<button
className="navigation-button split-left"
tabIndex={1}
onClick={() => {
setTimeout(
() =>
Expand All @@ -1155,6 +1158,7 @@ function App(props: RouteComponentProps) {
</button>
<button
className="navigation-button split-right"
tabIndex={1}
data-bs-toggle="modal"
data-bs-target="#genome-view-modal"
>
Expand All @@ -1172,6 +1176,7 @@ function App(props: RouteComponentProps) {
<div className="navigation-button-container split navigation-button-variant">
<button
className="navigation-button split-left"
tabIndex={1}
onClick={() => {
setTimeout(() => {
document.getElementById('variant-view')?.scrollIntoView({
Expand All @@ -1187,6 +1192,7 @@ function App(props: RouteComponentProps) {
</button>
<button
className="navigation-button split-right"
tabIndex={1}
data-bs-toggle="modal"
data-bs-target="#variant-view-modal"
>
Expand All @@ -1210,7 +1216,7 @@ function App(props: RouteComponentProps) {
<nav className="external-links-nav">
<button
className="open-in-chromoscope-link"
tabIndex={0}
tabIndex={2}
onClick={e => {
e.preventDefault();
const { xDomain } = gosRef.current.hgApi.api.getLocation(
Expand Down Expand Up @@ -1283,6 +1289,7 @@ function App(props: RouteComponentProps) {
>
<select
id="variant-view"
tabIndex={3}
style={{
pointerEvents: 'auto'
// !! This should be identical to how the height of circos determined.
Expand Down Expand Up @@ -1323,6 +1330,7 @@ function App(props: RouteComponentProps) {
</svg>
<input
type="text"
tabIndex={3}
className="gene-search"
placeholder="Search Gene (e.g., MYC)"
// alt={demo.assembly === 'hg38' ? 'Search Gene' : 'Not currently available for this assembly.'}
Expand Down Expand Up @@ -1379,6 +1387,7 @@ function App(props: RouteComponentProps) {
// !! This should be identical to how the height of circos determined.
// top: `${Math.min(visPanelWidth, 600)}px`
}}
tabIndex={3}
className="zoom-in-button control"
onClick={e => {
const trackId = `${demo.id}-mid-ideogram`;
Expand All @@ -1402,6 +1411,7 @@ function App(props: RouteComponentProps) {
// !! This should be identical to how the height of circos determined.
// top: `${Math.min(visPanelWidth, 600)}px`
}}
tabIndex={3}
className="zoom-out-button control"
onClick={e => {
const trackId = `${demo.id}-mid-ideogram`;
Expand All @@ -1426,6 +1436,7 @@ function App(props: RouteComponentProps) {
// !! This should be identical to how the height of circos determined.
// top: `${Math.min(visPanelWidth, 600)}px`
}}
tabIndex={3}
className="zoom-left-button control"
onClick={e => {
const trackId = `${demo.id}-mid-ideogram`;
Expand All @@ -1449,6 +1460,7 @@ function App(props: RouteComponentProps) {
// !! This should be identical to how the height of circos determined.
// top: `${Math.min(visPanelWidth, 600)}px`
}}
tabIndex={3}
className="zoom-right-button control"
onClick={e => {
const trackId = `${demo.id}-mid-ideogram`;
Expand Down Expand Up @@ -1636,8 +1648,10 @@ function App(props: RouteComponentProps) {
</div>
</div>
)}
<div
<button
className="move-to-top-btn"
tabIndex={5}
aria-label="Scroll to top."
onClick={() => {
setTimeout(
() => document.getElementById('gosling-panel')?.scrollTo({ top: 0, behavior: 'smooth' }),
Expand All @@ -1649,7 +1663,7 @@ function App(props: RouteComponentProps) {
<title>Scroll To Top</title>
<path fill="currentColor" d={ICONS.ARROW_UP.path[0]} />
</svg>
</div>
</button>
<div id="hidden-gosling" style={{ visibility: 'collapse', position: 'fixed' }} />

{isMinimalMode && (
Expand Down
4 changes: 2 additions & 2 deletions src/ui/ExportDropdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ type ExportButtonProps = {

const ExportButton = ({ title, icon }: ExportButtonProps) => {
return (
<svg className="button" viewBox="0 0 16 16">
<svg className="button" viewBox="0 0 16 16" tabIndex={2}>
<title>{title}</title>
{ICONS[icon].path.map(p => (
<path fill="currentColor" key={p} d={p} />
Expand All @@ -32,7 +32,7 @@ export const ExportDropdown = ({ gosRef, currentSpec }: ExportDropdownProps) =>
onClick={() => setIsOpen(!isOpen)}
aria-expanded={isOpen}
>
<button className="export-button">
<button className="export-button" tabIndex={2}>
<span className="export-title">Export</span>
<svg className="button triangle-down" viewBox={ICONS.TRIANGLE_DOWN.viewBox}>
<title>Triangle Down</title>
Expand Down
20 changes: 16 additions & 4 deletions src/ui/GenomeViewModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,10 @@ export const GenomeViewModal = () => {
<hr className="header" />
<div className="section-content">
<div className="block with-image">
<img src={genome_interactions_1} alt="" />
<img
src={genome_interactions_1}
alt="Grab cursor over blue, selected region in Genome View."
/>
<div className="text">
<p>
<b>Click and drag</b> - the blue selection brush to highlight regions of
Expand All @@ -38,7 +41,10 @@ export const GenomeViewModal = () => {
</div>
<hr />
<div className="block with-image">
<img src={genome_interactions_2} alt="" />
<img
src={genome_interactions_2}
alt="Move cursor over edge of blue, selected region in Genome View."
/>
<div className="text">
<p>
<b>Click and drag</b> - the edges of the selection brush to resize it.
Expand All @@ -47,7 +53,10 @@ export const GenomeViewModal = () => {
</div>
<hr />
<div className="block with-image">
<img src={genome_interactions_3} alt="" />
<img
src={genome_interactions_3}
alt="Structural Variant detail pop up in Genome View."
/>
<div className="text">
<p>
<b>Hover</b> - over a structural variant to see detailed information.
Expand All @@ -56,7 +65,10 @@ export const GenomeViewModal = () => {
</div>
<hr />
<div className="block with-image">
<img src={genome_interactions_4} alt="" />
<img
src={genome_interactions_4}
alt="Highlighted structural variant strand in Genome View."
/>
<div className="text">
<p>
<b>Click</b> - on a structural variant to inspect breakpoints in other
Expand Down
21 changes: 15 additions & 6 deletions src/ui/VariantViewModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export const VariantViewModal = () => {
<hr className="header" />
<div className="section-content">
<div className="block with-image">
<img src={variant_interpretation_1} alt="" />
<img src={variant_interpretation_1} alt="Variant View tracks." />
<div className="text">
<p>
A structural variant &#40;SV&#41; may leave a footprint on the copy
Expand All @@ -46,7 +46,10 @@ export const VariantViewModal = () => {
<hr className="header" />
<div className="section-content">
<div className="block with-image">
<img src={variant_interactions_1} alt="" />
<img
src={variant_interactions_1}
alt="Black vertical line above Variant View tracks."
/>
<div className="text">
<p>
<b>The black vertical line</b> indicates region in focus.
Expand All @@ -55,7 +58,10 @@ export const VariantViewModal = () => {
</div>
<hr />
<div className="block with-image">
<img src={variant_interactions_2} alt="" />
<img
src={variant_interactions_2}
alt="Structural Variant detail pop up in Structural Variant track."
/>
<div className="text">
<p>
<b>Hover</b> - over a structural variant to see detailed information.
Expand All @@ -64,7 +70,10 @@ export const VariantViewModal = () => {
</div>
<hr />
<div className="block with-image">
<img src={variant_interactions_3} alt="" />
<img
src={variant_interactions_3}
alt="Structural Variant highlighted in Structural Variant track."
/>
<div className="text">
<p>
<b>Click</b> - on a structural variant to show its breakpoints in the
Expand All @@ -77,7 +86,7 @@ export const VariantViewModal = () => {
</div>
<hr />
<div className="block with-image">
<img src={variant_interactions_4} alt="" />
<img src={variant_interactions_4} alt="Zoom in and out buttons." />
<div className="text">
<p>
<b>Zoom in and out</b> - on chromosomal regions by clicking the{' '}
Expand All @@ -94,7 +103,7 @@ export const VariantViewModal = () => {
</div>
<hr />
<div className="block with-image">
<img src={variant_interactions_5} alt="" />
<img src={variant_interactions_5} alt="Pan left and right buttons." />
<div className="text">
<p>
<b>Pan left and right</b> - around the current region by clicking the{' '}
Expand Down
Loading

0 comments on commit 15262c7

Please sign in to comment.