diff --git a/res/css/components/views/settings/devices/_SelectableDeviceTile.pcss b/res/css/components/views/settings/devices/_SelectableDeviceTile.pcss index aa0cf91a9c..ec6a13b26c 100644 --- a/res/css/components/views/settings/devices/_SelectableDeviceTile.pcss +++ b/res/css/components/views/settings/devices/_SelectableDeviceTile.pcss @@ -22,6 +22,11 @@ limitations under the License. } .mx_SelectableDeviceTile_checkbox { - flex: 0 0; - margin-right: $spacing-16; + flex: 1 0; + + .mx_Checkbox_background + div { + flex: 1 0; + /* override more specific selector */ + margin-left: $spacing-16 !important; + } } diff --git a/src/components/views/elements/EffectsOverlay.tsx b/src/components/views/elements/EffectsOverlay.tsx index 11e11211b2..d372d9ed71 100644 --- a/src/components/views/elements/EffectsOverlay.tsx +++ b/src/components/views/elements/EffectsOverlay.tsx @@ -90,6 +90,7 @@ const EffectsOverlay: FunctionComponent = ({ roomWidth }) => { top: 0, right: 0, }} + aria-hidden={true} /> ); }; diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx index aa8f82bb03..cd339eadee 100644 --- a/src/components/views/elements/ImageView.tsx +++ b/src/components/views/elements/ImageView.tsx @@ -540,8 +540,9 @@ export default class ImageView extends React.Component { { } private getSettingValue(): boolean { - return SettingsStore.getValueAt( + return !!SettingsStore.getValueAt( this.props.level, this.props.name, this.props.roomId ?? null, diff --git a/src/components/views/elements/Slider.tsx b/src/components/views/elements/Slider.tsx index a6f11aa075..44947aa651 100644 --- a/src/components/views/elements/Slider.tsx +++ b/src/components/views/elements/Slider.tsx @@ -35,6 +35,8 @@ interface IProps { // Whether the slider is disabled disabled: boolean; + + label: string; } const THUMB_SIZE = 2.4; // em @@ -77,6 +79,7 @@ export default class Slider extends React.Component { disabled={this.props.disabled} step={this.props.step} autoComplete="off" + aria-label={this.props.label} /> {selection} diff --git a/src/components/views/messages/DateSeparator.tsx b/src/components/views/messages/DateSeparator.tsx index 7f2b5afc88..4eed475d5c 100644 --- a/src/components/views/messages/DateSeparator.tsx +++ b/src/components/views/messages/DateSeparator.tsx @@ -322,7 +322,7 @@ export default class DateSeparator extends React.Component { public render(): React.ReactNode { const label = this.getLabel(); - let dateHeaderContent; + let dateHeaderContent: JSX.Element; if (this.state.jumpToDateEnabled) { dateHeaderContent = this.renderJumpToDateMenu(); } else { @@ -336,9 +336,8 @@ export default class DateSeparator extends React.Component { } // ARIA treats
s as separators, here we abuse them slightly so manually treat this entire thing as one - // tab-index=-1 to allow it to be focusable but do not add tab stop for it, primarily for screen readers return ( -
+

{dateHeaderContent}
diff --git a/src/components/views/settings/FontScalingPanel.tsx b/src/components/views/settings/FontScalingPanel.tsx index 03a8b963b8..89cb785f19 100644 --- a/src/components/views/settings/FontScalingPanel.tsx +++ b/src/components/views/settings/FontScalingPanel.tsx @@ -128,6 +128,7 @@ export default class FontScalingPanel extends React.Component { onChange={this.onFontSizeChanged} displayFunc={(_) => ""} disabled={this.state.useCustomFontSize} + label={_t("Font size")} />
Aa
diff --git a/src/components/views/settings/devices/SelectableDeviceTile.tsx b/src/components/views/settings/devices/SelectableDeviceTile.tsx index 71e625c36c..b42c4d3421 100644 --- a/src/components/views/settings/devices/SelectableDeviceTile.tsx +++ b/src/components/views/settings/devices/SelectableDeviceTile.tsx @@ -35,10 +35,11 @@ const SelectableDeviceTile: React.FC = ({ children, device, isSelected, o className="mx_SelectableDeviceTile_checkbox" id={`device-tile-checkbox-${device.device_id}`} data-testid={`device-tile-checkbox-${device.device_id}`} - /> - - {children} - + > + + {children} + +
); }; diff --git a/src/components/views/settings/tabs/room/NotificationSettingsTab.tsx b/src/components/views/settings/tabs/room/NotificationSettingsTab.tsx index b9c481125a..d5ab107540 100644 --- a/src/components/views/settings/tabs/room/NotificationSettingsTab.tsx +++ b/src/components/views/settings/tabs/room/NotificationSettingsTab.tsx @@ -284,6 +284,7 @@ export default class NotificationsSettingsTab extends React.Component diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index a057beb742..c64a49abd1 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1701,6 +1701,7 @@ "Sounds": "Sounds", "Notification sound": "Notification sound", "Set a new custom sound": "Set a new custom sound", + "Upload custom sound": "Upload custom sound", "Browse": "Browse", "Failed to unban": "Failed to unban", "Unban": "Unban", @@ -2600,6 +2601,7 @@ "%(oneUser)ssent %(count)s hidden messages|one": "%(oneUser)ssent a hidden message", "collapse": "collapse", "expand": "expand", + "Image view": "Image view", "Rotate Left": "Rotate Left", "Rotate Right": "Rotate Right", "Information": "Information", diff --git a/test/components/structures/__snapshots__/MessagePanel-test.tsx.snap b/test/components/structures/__snapshots__/MessagePanel-test.tsx.snap index 5d13954302..008246e855 100644 --- a/test/components/structures/__snapshots__/MessagePanel-test.tsx.snap +++ b/test/components/structures/__snapshots__/MessagePanel-test.tsx.snap @@ -42,7 +42,6 @@ exports[`MessagePanel should handle lots of membership events quickly 1`] = ` aria-label="Thu, Jan 1 1970" class="mx_DateSeparator" role="separator" - tabindex="-1" >
should match the snapshot 1`] = ` aria-label="Thu, Jan 1 1970" class="mx_DateSeparator" role="separator" - tabindex="-1" >
should support events with 1`] = ` aria-label=", NaN NaN" class="mx_DateSeparator" role="separator" - tabindex="-1" >


renders device panel with devices 1`] = ` class="mx_Checkbox_checkmark" /> +
+
+
+
+ + +
+

+ device_2 +

+ +
+
+
+ Rename +
+
+
+
-
-
-
- - -
-

- device_2 -

- -
-
-
- Rename -
-
-
renders device panel with devices 1`] = ` class="mx_Checkbox_checkmark" />
+
+
+
+
+ + +
+

+ device_3 +

+ +
+
+
+ Rename +
+
+
+
-
-
-
- - -
-

- device_3 -

- -
-
-
- Rename -
-
-
renders unselected device tile with checkbox 1 class="mx_Checkbox_checkmark" />
+
+
+
+
+ + +
+

+ My Device +

+ +
+
+
+ test +
+
+
+
-
-
-
- - -
-

- My Device -

- -
-
-
- test -
-
-
`; diff --git a/test/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap b/test/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap index 86f0f717ef..6ebf8957b0 100644 --- a/test/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap +++ b/test/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap @@ -66,7 +66,7 @@ exports[`HTMLExport should export 1`] = `

-
  • @user49:example.com
    Message #49
  • @user48:example.com
    Message #48
  • @user47:example.com
    Message #47
  • @user46:example.com
    Message #46
  • @user45:example.com
    Message #45
  • @user44:example.com
    Message #44
  • @user43:example.com
    Message #43
  • @user42:example.com
    Message #42
  • @user41:example.com
    Message #41
  • @user40:example.com
    Message #40
  • @user39:example.com
    Message #39
  • @user38:example.com
    Message #38
  • @user37:example.com
    Message #37
  • @user36:example.com
    Message #36
  • @user35:example.com
    Message #35
  • @user34:example.com
    Message #34
  • @user33:example.com
    Message #33
  • @user32:example.com
    Message #32
  • @user31:example.com
    Message #31
  • @user30:example.com
    Message #30
  • @user29:example.com
    Message #29
  • @user28:example.com
    Message #28
  • @user27:example.com
    Message #27
  • @user26:example.com
    Message #26
  • @user25:example.com
    Message #25
  • @user24:example.com
    Message #24
  • @user23:example.com
    Message #23
  • @user22:example.com
    Message #22
  • @user21:example.com
    Message #21
  • @user20:example.com
    Message #20
  • @user19:example.com
    Message #19
  • @user18:example.com
    Message #18
  • @user17:example.com
    Message #17
  • @user16:example.com
    Message #16
  • @user15:example.com
    Message #15
  • @user14:example.com
    Message #14
  • @user13:example.com
    Message #13
  • @user12:example.com
    Message #12
  • @user11:example.com
    Message #11
  • @user10:example.com
    Message #10
  • @user9:example.com
    Message #9
  • @user8:example.com
    Message #8
  • @user7:example.com
    Message #7
  • @user6:example.com
    Message #6
  • @user5:example.com
    Message #5
  • @user4:example.com
    Message #4
  • @user3:example.com
    Message #3
  • @user2:example.com
    Message #2
  • @user1:example.com
    Message #1
  • @user0:example.com
    Message #0
  • +
  • @user49:example.com
    Message #49
  • @user48:example.com
    Message #48
  • @user47:example.com
    Message #47
  • @user46:example.com
    Message #46
  • @user45:example.com
    Message #45
  • @user44:example.com
    Message #44
  • @user43:example.com
    Message #43
  • @user42:example.com
    Message #42
  • @user41:example.com
    Message #41
  • @user40:example.com
    Message #40
  • @user39:example.com
    Message #39
  • @user38:example.com
    Message #38
  • @user37:example.com
    Message #37
  • @user36:example.com
    Message #36
  • @user35:example.com
    Message #35
  • @user34:example.com
    Message #34
  • @user33:example.com
    Message #33
  • @user32:example.com
    Message #32
  • @user31:example.com
    Message #31
  • @user30:example.com
    Message #30
  • @user29:example.com
    Message #29
  • @user28:example.com
    Message #28
  • @user27:example.com
    Message #27
  • @user26:example.com
    Message #26
  • @user25:example.com
    Message #25
  • @user24:example.com
    Message #24
  • @user23:example.com
    Message #23
  • @user22:example.com
    Message #22
  • @user21:example.com
    Message #21
  • @user20:example.com
    Message #20
  • @user19:example.com
    Message #19
  • @user18:example.com
    Message #18
  • @user17:example.com
    Message #17
  • @user16:example.com
    Message #16
  • @user15:example.com
    Message #15
  • @user14:example.com
    Message #14
  • @user13:example.com
    Message #13
  • @user12:example.com
    Message #12
  • @user11:example.com
    Message #11
  • @user10:example.com
    Message #10
  • @user9:example.com
    Message #9
  • @user8:example.com
    Message #8
  • @user7:example.com
    Message #7
  • @user6:example.com
    Message #6
  • @user5:example.com
    Message #5
  • @user4:example.com
    Message #4
  • @user3:example.com
    Message #3
  • @user2:example.com
    Message #2
  • @user1:example.com
    Message #1
  • @user0:example.com
    Message #0