Follow Apple design guide lines

templates/index.html

@@ -3,15 +3,17 @@
 
 <head>
   <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=no">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
   <title>{{ app_name }}</title>
 
   <!-- Added to the iOS home screen, this opens full-screen with no browser chrome. -->
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="mobile-web-app-capable" content="yes">
-  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <meta name="apple-mobile-web-app-status-bar-style" content="default">
   <meta name="apple-mobile-web-app-title" content="{{ app_name }}">
-  <meta name="theme-color" content="#0a0d14">
+  <meta name="color-scheme" content="light dark">
+  <meta name="theme-color" content="#e9eaf0" media="(prefers-color-scheme: light)">
+  <meta name="theme-color" content="#0a0d14" media="(prefers-color-scheme: dark)">
 
   <link rel="manifest" href="{{ url_for('manifest') }}">
   <link rel="apple-touch-icon" href="{{ url_for('static', filename='icon-180.png') }}">
@@ -75,7 +77,7 @@
     <div class="progress" data-role="progress">
       <div class="progress-line">
         <i data-role="progress-fill"></i>
-        <b class="progress-cursor" data-role="progress-cursor"></b>
+        <b class="progress-cursor" data-role="progress-cursor" role="slider" aria-label="Playback position" aria-valuemin="0"></b>
         <span class="progress-time elapsed" data-role="progress-elapsed"></span>
         <span class="progress-time remaining" data-role="progress-remaining"></span>
       </div>
@@ -87,7 +89,7 @@
     <button class="control-btn step" data-delta="-1" aria-label="{{ room.label }}: volume down">
       <svg viewBox="0 0 448 512" aria-hidden="true"><path d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"/></svg>
     </button>
-    <div class="meter" data-role="meter"><i></i><b class="knob" data-role="level">—</b></div>
+    <div class="meter" data-role="meter"><i></i><b class="knob" data-role="level" role="slider" tabindex="0" aria-label="{{ room.label }}: volume" aria-valuemin="0" aria-valuemax="100">—</b></div>
     <button class="control-btn step" data-delta="1" aria-label="{{ room.label }}: volume up">
       <svg viewBox="0 0 448 512" aria-hidden="true"><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z"/></svg>
     </button>
@@ -145,7 +147,7 @@
   </div>
 </div>
 
-<div class="toast" data-role="toast" hidden></div>
+<div class="toast" data-role="toast" role="status" hidden></div>
 
 <script src="{{ url_for('static', filename='app.js') }}"></script>
 </body>