Improving accessibility in InfCloud

bgstack15 — Sun, 29 May 2022 13:11:54 GMT

I just wrote about my calendar solution, which uses Radicale and my fork of InfCloud.

I finally got around to solving an ultimately minor problem, but it makes my day so much better! The application does not display a focus indicator, i.e., a way to know which field you are editing. Text fields have the text cursor of course, but a lot of the inputs are drop-downs (technically they are html selects). I'm hardly a css expert, so it took me quite a while to find the part of the default.css that affects the elements.

I started with the language selector drop-down on the login page. I eventually discovered that it was the selector *:focus. I modified the outline: attribute and then I could see which field was selected! I gave *:focus a visible red outline, so now as I tab around on any screen, and even the buttons, I can see which field is currently selected.

I also modified the login screen so that "login" button is selectable, so I can tab to it. Now, a javascript event still captures the "Enter" keypress, but still, I'm used to tabbing to a submit button and then selecting it. And now I can.

See the commit in the repo (or on gitlab), or here:

diff --git a/radicale_infcloud/web/css/default.css b/radicale_infcloud/web/css/default.css
index 14e8156..64aeef7 100644
--- a/radicale_infcloud/web/css/default.css
+++ b/radicale_infcloud/web/css/default.css
@@ -409,9 +409,10 @@ body, input, select, textarea
    position: static;   /* required by fullcalendar */
 }

-*:focus
-{
-   outline: none;
+/* stackrpms removed outline none which is bad for keyboard navigation */
+*:focus {
+   outline: 1px solid rgb(180,0,0);
+   -moz-outline: 1px solid currentcolor;
 }

 select
@@ -768,7 +769,7 @@ input[type=text], input[type=password]
 {
    height: 19px;
    margin-left: 0px;
-   outline: none;
+   /* stackrpms removed outline none which is bad for keyboard navigation */
    border: 0px;

    padding-left: 2px;   /* it resizes the input size :( */
@@ -826,9 +827,10 @@ textarea
    resize: none;
    padding-left: 3px;

-   outline: none;
-   -moz-outline: none;
-   -moz-border-radius: 0px;
+   /* stackrpms removed outline none which is bad for keyboard navigation */
+   /*outline: none; */
+   /*-moz-outline: none; */
+   /*-moz-border-radius: 0px; */

    /* mobile safari remove rounded corners */
    -webkit-appearance: none;
diff --git a/radicale_infcloud/web/index.html b/radicale_infcloud/web/index.html
index 26ee0d5..39b8583 100644
--- a/radicale_infcloud/web/index.html
+++ b/radicale_infcloud/web/index.html
@@ -93,10 +93,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
                            </td>
                        </tr>
                        <tr>
-                           <td><img data-type="system_login" alt="login" title="login" src="images/login.svg" onclick="if(event.shiftKey) ignoreServerSettings=true; $(this).closest('form').find('[type=\'submit\']').click();" /></td>
-                       </tr>
-                       <tr style="display:none">
-                           <td><input type="submit" /></td>
+                           <td><input type="image" data-type="system_login" alt="login" title="login" src="images/login.svg" onclick="if(event.shiftKey) ignoreServerSettings=true; $(this).closest('form').find('[type=\'submit\']').click();" /></td>
                        </tr>
                    </table>
                </form>

Knowledge Base (Posts about accessibility)

Improving accessibility in InfCloud