From ae55e6483dcaf660a953842a94b553bcf169d314 Mon Sep 17 00:00:00 2001 From: Eliot Berriot Date: Sun, 21 Oct 2018 15:41:31 +0200 Subject: [PATCH] Fix #576: Improved keyboard accessibility on player, queue and various controls --- changes/changelog.d/576.enhancement | 1 + front/src/App.vue | 30 ++++ front/src/components/Pagination.vue | 19 ++- front/src/components/Sidebar.vue | 18 ++- front/src/components/audio/PlayButton.vue | 23 +++- front/src/components/audio/Player.vue | 128 ++++++++++++------ front/src/components/audio/album/Widget.vue | 6 +- front/src/components/audio/track/Row.vue | 4 +- front/src/components/audio/track/Table.vue | 2 +- front/src/components/audio/track/Widget.vue | 9 +- .../favorites/TrackFavoriteIcon.vue | 9 +- .../playlists/TrackPlaylistIcon.vue | 8 +- front/src/components/playlists/Widget.vue | 10 +- 13 files changed, 185 insertions(+), 82 deletions(-) create mode 100644 changes/changelog.d/576.enhancement diff --git a/changes/changelog.d/576.enhancement b/changes/changelog.d/576.enhancement new file mode 100644 index 000000000..ee6087a73 --- /dev/null +++ b/changes/changelog.d/576.enhancement @@ -0,0 +1 @@ +Improved keyboard accessibility on player, queue and various controls (#576) diff --git a/front/src/App.vue b/front/src/App.vue index 16154b130..946a0621e 100644 --- a/front/src/App.vue +++ b/front/src/App.vue @@ -359,6 +359,13 @@ html, body { cursor: pointer; } +.ui.really.basic.button { + &:not(:focus) { + box-shadow: none !important; + background-color: none !important; + } +} + .floated.buttons .button ~ .dropdown { border-left: none; } @@ -380,4 +387,27 @@ a { display: none; } +button.reset { + border: none; + margin: 0; + padding: 0; + width: auto; + overflow: visible; + + background: transparent; + + /* inherit font & color from ancestor */ + color: inherit; + font: inherit; + + /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */ + line-height: normal; + + /* Corrects font smoothing for webkit */ + -webkit-font-smoothing: inherit; + -moz-osx-font-smoothing: inherit; + /* Corrects inability to style clickable `input` types in iOS */ + -webkit-appearance: none; + text-align: inherit; +} diff --git a/front/src/components/Pagination.vue b/front/src/components/Pagination.vue index cc5f17164..bdc20b53d 100644 --- a/front/src/components/Pagination.vue +++ b/front/src/components/Pagination.vue @@ -1,25 +1,25 @@ @@ -90,4 +90,3 @@ export default { cursor: pointer; } - diff --git a/front/src/components/Sidebar.vue b/front/src/components/Sidebar.vue index efd6f416c..8702f8051 100644 --- a/front/src/components/Sidebar.vue +++ b/front/src/components/Sidebar.vue @@ -16,8 +16,8 @@