Merge pull request #60 from IUBLibTech/a11y_fixes

Accessibility fixes
IUBLibTech · Feb 16, 2024 · 743fa86 · 743fa86
2 parents 9723152 + 8d5a8d1
commit 743fa86
Show file tree

Hide file tree

Showing 8 changed files with 75 additions and 16 deletions.
diff --git a/overrides/dist/app/index.html b/overrides/dist/app/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>IIIF Timeliner</title>
+      <link rel="stylesheet" href="/assets/app.css">
+</head>
+<body class="">
+
+
+
+   <div id="app"></div>
+
+
+
+    <script type="text/javascript" src="/assets/app.js"></script>
+</body>
+</html>
diff --git a/overrides/dist/index.html b/overrides/dist/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>IIIF Timeliner - Home</title>
+      <link rel="stylesheet" href="/assets/app.css">
+</head>
+<body class="">
+
+
+
+   <div class="homepage container">
+    <h1>IIIF Timeliner</h1>
+    <div class="panel">
+        <p>
+            Timeliner is a reimplementation of Variations Audio Timeliner as a web
+            application, using the IIIF Presentation API 3.0. As with the original
+            version, developed as a part of the Variations Digital Music Library
+            System, it is an audio annotation and analysis tool for creating and
+            labeling bubble diagrams. These diagrams can be used to navigate music
+            or other audio for detailed study.
+        </p>
+        <p>
+            In addition to its use as a standalone application, the Timeliner is
+            available as integrated feature within the successor to Variations,
+            Avalon Media System. Avalon users can create new bubble diagrams
+            directly from item pages within their Avalon instance and edit, share
+            and copy timelines across all items in the repository.
+        </p>
+        <p>
+            Please note that due to standard browser security, audio resources used
+            with Timeliner must be set up for Cross-origin resource sharing (CORS).
+            This is not necessarily the case for many resources on the web, and not
+            all URLs for media files may work.
+        </p>
+    </div>
+    <a href="/app/index.html" class="button">Go to Timeliner</a>
+</div>
+
+
+
+    <script type="text/javascript" src="/assets/app.js"></script>
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
   "license": "MIT",
   "scripts": {
     "start": "fesk-start",
-    "build": "fesk-build && docz build",
+    "build": "fesk-build && docz build && cp -R overrides/dist/* dist/",
     "test": "jest --coverage",
     "docz:dev": "docz dev",
     "docz:build": "docz build",

diff --git a/src/components/AudioTransportBar/AudioTransportBar.js b/src/components/AudioTransportBar/AudioTransportBar.js
@@ -116,11 +116,11 @@ class AudioTransportBar extends Component {
                 root: 'audio-transport-bar__button-text',
                 label: 'audio-transport-bar__button-text',
               }}
+              aria-label="Split the current bubble at the current time"
             >
               <Tooltip
                 classes={{ tooltip: 'audio-transport-bar__tooltip' }}
                 title="Split the current bubble at the current time"
-                aria-label="Split the current bubble at the current time"
               >
                 <Add />
               </Tooltip>
@@ -134,11 +134,11 @@ class AudioTransportBar extends Component {
                 root: 'audio-transport-bar__button-text',
                 label: 'audio-transport-bar__button-text',
               }}
+              aria-label="Add new marker at current time"
             >
               <Tooltip
                 classes={{ tooltip: 'audio-transport-bar__tooltip' }}
                 title="Add new marker at current time"
-                aria-label="Add new marker at current time"
               >
                 <ArrowDropUp />
               </Tooltip>
@@ -153,11 +153,11 @@ class AudioTransportBar extends Component {
                 root: 'audio-transport-bar__button-text',
                 label: 'audio-transport-bar__button-text',
               }}
+              aria-label="Group bubbles together"
             >
               <Tooltip
                 classes={{ tooltip: 'audio-transport-bar__tooltip' }}
                 title="Group bubbles together"
-                aria-label="Group bubbles together"
               >
                 <GroupWork />
               </Tooltip>
@@ -171,11 +171,11 @@ class AudioTransportBar extends Component {
                 root: 'audio-transport-bar__button-text',
                 label: 'audio-transport-bar__button-text',
               }}
+              aria-label="Delete bubbles"
             >
               <Tooltip
                 classes={{ tooltip: 'audio-transport-bar__tooltip' }}
                 title="Delete bubbles"
-                aria-label="Delete bubbles"
               >
                 <Delete />
               </Tooltip>

diff --git a/src/components/CurrentTimeIndicator/CurrentTimeIndicator.scss b/src/components/CurrentTimeIndicator/CurrentTimeIndicator.scss
@@ -1,15 +1,6 @@
 .current-time-indicator {
-  color: #777;
   margin-right: 30px;
   &--error {
     color: darkred;
   }
-
-  &__current-time {
-    color: #000;
-  }
-
-  &__runtime {
-    font-size: .85em;
-  }
 }
diff --git a/src/components/MetadataDisplay/MetadataDisplay.js b/src/components/MetadataDisplay/MetadataDisplay.js
@@ -29,7 +29,7 @@ const MetadataDisplay = props => (
           </Typography>
         </Grid>
         <Grid>
-          <IconButton onClick={props.onEditClick} style={{ padding: 5 }}>
+          <IconButton onClick={props.onEditClick} aria-label="Edit annotation" style={{ padding: 5 }}>
             <Edit fontSize="small" />
           </IconButton>
         </Grid>

diff --git a/src/components/VolumeSliderCompact/VolumeSliderCompact.js b/src/components/VolumeSliderCompact/VolumeSliderCompact.js
@@ -61,6 +61,7 @@ class VolumeSliderCompact extends Component {
           max={100}
           value={volume}
           onChange={this.onVolumeInputChange}
+          aria-label="Volume"
         />
         <div className={$style.element('muter')} onClick={this.onToggle}>
           {volume === 0 ? (

diff --git a/src/main.scss b/src/main.scss
@@ -11,7 +11,6 @@ html {
   font-family: 'Roboto', sans-serif;
   margin: 0;
   padding: 0;
-  overflow: hidden;
   background: #eee;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;