From 6158b8667e6c76c5a5a09b480b82d6f04b8e4885 Mon Sep 17 00:00:00 2001 From: tusooa Date: Sat, 28 Jan 2023 22:10:06 -0500 Subject: [PATCH 01/12] Make checkbox settings accessible --- src/_mixins.scss | 12 ++++++++++++ src/components/checkbox/checkbox.vue | 8 ++++++-- .../screen_reader_notice/screen_reader_notice.vue | 9 +++------ 3 files changed, 21 insertions(+), 8 deletions(-) diff --git a/src/_mixins.scss b/src/_mixins.scss index e99fe26f..677bc210 100644 --- a/src/_mixins.scss +++ b/src/_mixins.scss @@ -16,3 +16,15 @@ @content; } } + +@mixin visible-for-screenreader-only { + display: block; + width: 1px; + height: 1px; + margin: -1px; + overflow: hidden; + visibility: visible; + clip: rect(0 0 0 0); + padding: 0; + position: absolute; +} diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue index 7139d4fc..ac7acd52 100644 --- a/src/components/checkbox/checkbox.vue +++ b/src/components/checkbox/checkbox.vue @@ -10,7 +10,10 @@ :indeterminate="indeterminate" @change="$emit('update:modelValue', $event.target.checked)" > - + @import "../../variables"; +@import "../../mixins"; .checkbox { position: relative; @@ -81,7 +85,7 @@ export default { } input[type="checkbox"] { - display: none; + @include visible-for-screenreader-only; &:checked + .checkbox-indicator::before { color: $fallback--text; diff --git a/src/components/screen_reader_notice/screen_reader_notice.vue b/src/components/screen_reader_notice/screen_reader_notice.vue index 5098b94f..1cd908ae 100644 --- a/src/components/screen_reader_notice/screen_reader_notice.vue +++ b/src/components/screen_reader_notice/screen_reader_notice.vue @@ -10,12 +10,9 @@ From 8351e73bd72986ded6c121abef0adf5360df0431 Mon Sep 17 00:00:00 2001 From: Pleroma Renovate Bot Date: Mon, 30 Jan 2023 09:11:40 +0000 Subject: [PATCH 02/12] Update dependency eslint to v8.33.0 --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 651887c4..493ad44a 100644 --- a/package.json +++ b/package.json @@ -72,7 +72,7 @@ "css-loader": "6.7.3", "css-minimizer-webpack-plugin": "4.2.2", "custom-event-polyfill": "1.0.7", - "eslint": "8.32.0", + "eslint": "8.33.0", "eslint-config-standard": "17.0.0", "eslint-formatter-friendly": "7.0.0", "eslint-plugin-import": "2.27.5", diff --git a/yarn.lock b/yarn.lock index bce48465..960c8abc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4148,10 +4148,10 @@ eslint-webpack-plugin@3.2.0: normalize-path "^3.0.0" schema-utils "^4.0.0" -eslint@8.32.0: - version "8.32.0" - resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.32.0.tgz#d9690056bb6f1a302bd991e7090f5b68fbaea861" - integrity sha512-nETVXpnthqKPFyuY2FNjz/bEd6nbosRgKbkgS/y1C7LJop96gYHWpiguLecMHQ2XCPxn77DS0P+68WzG6vkZSQ== +eslint@8.33.0: + version "8.33.0" + resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.33.0.tgz#02f110f32998cb598c6461f24f4d306e41ca33d7" + integrity sha512-WjOpFQgKK8VrCnAtl8We0SUOy/oVZ5NHykyMiagV1M9r8IFpIJX7DduK6n1mpfhlG7T1NLWm2SuD8QB7KFySaA== dependencies: "@eslint/eslintrc" "^1.4.1" "@humanwhocodes/config-array" "^0.11.8" From c1249ffaf36a89ebc704f34359fe4ba258799145 Mon Sep 17 00:00:00 2001 From: Pleroma Renovate Bot Date: Tue, 31 Jan 2023 09:09:59 +0000 Subject: [PATCH 03/12] Update dependency nightwatch to v2.6.11 --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 493ad44a..b2a61b95 100644 --- a/package.json +++ b/package.json @@ -99,7 +99,7 @@ "lodash": "4.17.21", "mini-css-extract-plugin": "2.7.2", "mocha": "10.2.0", - "nightwatch": "2.6.10", + "nightwatch": "2.6.11", "opn": "5.5.0", "ora": "0.4.1", "postcss": "8.4.20", diff --git a/yarn.lock b/yarn.lock index 960c8abc..25970f78 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6537,10 +6537,10 @@ nightwatch-axe-verbose@^2.1.0: dependencies: axe-core "^4.6.1" -nightwatch@2.6.10: - version "2.6.10" - resolved "https://registry.yarnpkg.com/nightwatch/-/nightwatch-2.6.10.tgz#eda82a6a0ff0002fdbeb9d160938d3c53a92dd88" - integrity sha512-nn5HVEtETLQ8qgu7APAZKg/yXTBkMflwdmzhfywP8mZUfKk0/dRQbeDqY2RawHr/sYsFmZV6eMirlJaaQoQ7Yw== +nightwatch@2.6.11: + version "2.6.11" + resolved "https://registry.yarnpkg.com/nightwatch/-/nightwatch-2.6.11.tgz#ba36d13855b003b488b74f64b4ffd8d13a5d1807" + integrity sha512-HLi9gTgcxqlDWfgZ/jT1QP8g3SzjBMZlFNdiDm065dopXR95jvyIpjA0Js8MsWRYzSTkRLGZvPVk28dwGaGXcQ== dependencies: "@nightwatch/chai" "5.0.2" "@nightwatch/html-reporter-template" "0.1.4" From 902954b29825647eaf5435c89e379ef4babe7931 Mon Sep 17 00:00:00 2001 From: tusooa Date: Thu, 9 Feb 2023 21:35:56 -0500 Subject: [PATCH 04/12] Use class to style screenreader-only text --- src/App.scss | 14 ++++++++++++-- src/_mixins.scss | 12 ------------ src/components/checkbox/checkbox.vue | 3 +-- .../screen_reader_notice/screen_reader_notice.vue | 10 +--------- .../settings_modal/helpers/modified_indicator.vue | 2 +- 5 files changed, 15 insertions(+), 26 deletions(-) diff --git a/src/App.scss b/src/App.scss index 1c4c8941..3f352e8d 100644 --- a/src/App.scss +++ b/src/App.scss @@ -580,8 +580,6 @@ textarea, } &[type="checkbox"] { - display: none; - &:checked + label::before { color: $fallback--text; color: var(--inputText, $fallback--text); @@ -887,3 +885,15 @@ option { opacity: 0; } /* stylelint-enable no-descending-specificity */ + +.visible-for-screenreader-only { + display: block; + width: 1px; + height: 1px; + margin: -1px; + overflow: hidden; + visibility: visible; + clip: rect(0 0 0 0); + padding: 0; + position: absolute; +} diff --git a/src/_mixins.scss b/src/_mixins.scss index 677bc210..e99fe26f 100644 --- a/src/_mixins.scss +++ b/src/_mixins.scss @@ -16,15 +16,3 @@ @content; } } - -@mixin visible-for-screenreader-only { - display: block; - width: 1px; - height: 1px; - margin: -1px; - overflow: hidden; - visibility: visible; - clip: rect(0 0 0 0); - padding: 0; - position: absolute; -} diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue index ac7acd52..42f89be9 100644 --- a/src/components/checkbox/checkbox.vue +++ b/src/components/checkbox/checkbox.vue @@ -5,6 +5,7 @@ >
{{ currentText }} @@ -8,11 +8,3 @@ - - diff --git a/src/components/settings_modal/helpers/modified_indicator.vue b/src/components/settings_modal/helpers/modified_indicator.vue index 8311533a..45db3fc2 100644 --- a/src/components/settings_modal/helpers/modified_indicator.vue +++ b/src/components/settings_modal/helpers/modified_indicator.vue @@ -5,12 +5,12 @@ >