fix: center align text

[mdneyazahmad]

Details

Fixed Issues

$ #7636

Tests

1. Create a "New Room" via the floating "+" icon
2. If already created go to the room
3. Click the room header to access the Details right hand pane
4. Verify that the room name is aligned to center

• Verify that no errors appear in the JS console

QA Steps

1. Same as tests

• Verify that no errors appear in the JS console

Tested On

• Web
• Mobile Web
• Desktop
• iOS
• Android

Screenshots

Web

Mobile Web

Desktop

iOS

Android

[OSBotify]

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

[OSBotify]

🚀 Deployed to staging by @tgolen in version: 1.1.40-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[OSBotify]

🚀 Deployed to production by @yuwenmemon in version: 1.1.40-2 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[SumitDiyora]

Issue 1 -

Title - [High]: Chrome+Jaws : Screen reader: Role and label not defined for "back" control.
Actual - Role is not defined for the "back (<)"control. This made it difficult for screen reader users to access the functionality associated with it. Additionally, the label is not defined for the mentioned interactive element in the source code of the page.
Expected - When a role is defined appropriately for the interactive element, the screen reader user will interact with the element effectively.
WCAG failure - 4.1.2, 1.1.1
Reproducible in staging? - Yes
Version Number: - v1.1.40-2
Platforms - Web, Desktop, Mobile-web, iOS, Android
Suggested Fix - Ensure that all the page functionality is available for all users irrespective of the device being used.
Apply the following changes:

• Specify role="button" for the 'div' element containing the "back (<)" control.
• Provide aria-label value such as "back" for the 'div' element containing the "back (<)" control.

Issue 2 -

Title- [High]: Chrome+Jaws: Screen reader: Role is not defined for controls.
Actual - Role is not defined for the "Members", "Settings", "Invite" and "Leave room" controls. This made it difficult for screen reader users to access the functionality associated with it.
Expected - Role should be defined as a 'button' for the "Members", "Settings", "Invite" and "Leave room" controls.
WCAG failure - 4.1.2
Reproducible in staging?: - Yes
Version Number: - v1.1.40-2
Platforms - Web, Desktop, Mobile-web, iOS, Android
Suggested Fix - Ensure that all the page functionality is available for all users irrespective of the device being used.
Apply the following changes:

• Specify role="button" for the 'div' element containing the "Members", "Settings", "Invite" and "Leave room" controls.

Issue 3 -

Title - [Medium]: Chrome+Jaws : Missing list markup for controls.
Actual - The list mark-up, is not used to present related information on the screen. For instance, the related information such as "Members", "Settings", "Invite" and "Leave room" controls are not marked as list items that visually look like a list. As a result, screen reader users might find it difficult to navigate to the lists and different list items quickly.
Expected - When list mark-up is provided for the mentioned content, screen reader users will identify a number of list items.
WCAG failure - 1.3.1
Reproducible in staging? - Yes
Version Number: - v1.1.40-2
Platforms - Web, Desktop, Mobile-web, iOS, Android
Suggested Fix - Use appropriate list mark-up, such as 'li' and 'ul' to identify related information. In addition, if required apply styles to maintain the visual presentation of the web page.

Issue 4 -

Title - [Medium] Chrome: Color Contrast: Insufficient color contrast for text.
Actual - Background/foreground color combinations with an insufficient contrast ratio was found on text.. For instance, the #7D8B8F "Crowded Policy - Definitive Edition" and "10440" text has an insufficient color contrast ratio of 3.5.1 with a #FFFFFF background.
Expected - The "Crowded Policy - Definitive Edition" and "10440" text should have a contrast ratio against the page background of 4.5:1 or greater.
WCAG failure - 1.4.3
Reproducible in staging?: - Yes
Version Number: - v1.1.40-2
Platforms - Web, Desktop, Mobile-web, iOS, Android
Suggested Fix - Ensure that each text/background color combination presents a contrast ratio of at least 4.5:1.