Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add highcontrast class to body just like with dark theme #22195

Merged
merged 1 commit into from
Aug 18, 2020

Conversation

jancborchardt
Copy link
Member

Need this for adjustments in the Dashboard app, just like with the .dark class. :)

@@ -90,6 +90,7 @@ export default {
// SELECT handlers
selectHighContrast(id) {
this.selectItem('highcontrast', id)
document.body.classList.toggle('highcontrast')
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would actually have preferred a better generic class.
Like I don't know, theme--highcontrast Ideallyu with BEM syntax like we're using in lots of other areas :)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I’ll leave that up to you then – also theme--dark would be nice, but then we need to adjust it in places where we used it? :)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it used really in other locations? I actually never saw it before.
Also, I was not really aware of this and I figure it would be nice to maybe discuss a proper standard before? Did I miss something?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note that all of that is about dark mode, not high contrast though.

Is it used really in other locations? I actually never saw it before.

I’m using it in Dashboard now, since that’s the easiest way to check via CSS if dark mode is enabled.


So I’ll just use theme--highcontrast for the high contrast mode now and we can do the dark mode stuff separately.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since that was available for quite some time and apps are using it, add it to the dev notes please.

nextcloud/spreed#4036
#22354

Deck also used body.dark

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thx Joas :)

@jancborchardt jancborchardt force-pushed the design/accessibility-highcontrast-class branch from 015842c to e168cb2 Compare August 11, 2020 17:49
@faily-bot
Copy link

faily-bot bot commented Aug 11, 2020

🤖 beep boop beep 🤖

Here are the logs for the failed build:

Status of 31636: failure

acceptance-app-files

  • tests/acceptance/features/app-files.feature:262
Show full log
  Scenario: unmarking a file as favorite causes the file list to be sorted again                          # /drone/src/tests/acceptance/features/app-files.feature:262
    Given I am logged in                                                                                  # LoginPageContext::iAmLoggedIn()
    And I create a new folder named "A name alphabetically lower than welcome.txt"                        # FileListContext::iCreateANewFolderNamed()
    And I see that "A name alphabetically lower than welcome.txt" precedes "welcome.txt" in the file list # FileListContext::iSeeThatPrecedesInTheFileList()
    And I close the details view                                                                          # FilesAppContext::iCloseTheDetailsView()
    And I see that the details view is closed                                                             # FilesAppContext::iSeeThatTheDetailsViewIsClosed()
      │ Details view in Files app visibility could not be got
      │ Exception message: Element not found with xpath, (//html//*[@id="app-sidebar" or contains(@class, 'app-sidebar')])[1]
      │ 
      │ Unable to locate element: {"method":"xpath","selector":"(//html//*[@id=\"app-sidebar\" or contains(@class, 'app-sidebar')])[1]"}
      │ For documentation on this error, please visit: http://seleniumhq.org/exceptions/no_such_element.html
      │ Build info: version: '2.53.1', revision: 'a36b8b1', time: '2016-06-30 17:37:03'
      │ System info: host: '40aaa729231e', ip: '172.21.0.2', os.name: 'Linux', os.arch: 'amd64', os.version: '4.15.0-76-generic', java.version: '1.8.0_91'
      │ Driver info: driver.version: unknown
      │ Trying again
      │ 
    And I mark "welcome.txt" as favorite                                                                  # FileListContext::iMarkAsFavorite()
    And I see that "welcome.txt" is marked as favorite                                                    # FileListContext::iSeeThatIsMarkedAsFavorite()
    And I see that "welcome.txt" precedes "A name alphabetically lower than welcome.txt" in the file list # FileListContext::iSeeThatPrecedesInTheFileList()
    When I unmark "welcome.txt" as favorite                                                               # FileListContext::iUnmarkAsFavorite()
    Then I see that "welcome.txt" is not marked as favorite                                               # FileListContext::iSeeThatIsNotMarkedAsFavorite()
      Not favorited state icon for file welcome.txt in file list could not be found after 100 seconds (NoSuchElementException)
    And I see that "A name alphabetically lower than welcome.txt" precedes "welcome.txt" in the file list # FileListContext::iSeeThatPrecedesInTheFileList()

@jancborchardt
Copy link
Member Author

@skjnldsv I changed the class to theme--highcontrast – and we can look at the dark theme class modification later?

Signed-off-by: Jan C. Borchardt <hey@jancborchardt.net>
@skjnldsv skjnldsv force-pushed the design/accessibility-highcontrast-class branch from e168cb2 to aa16550 Compare August 18, 2020 06:34
@skjnldsv skjnldsv added 4. to release Ready to be released and/or waiting for tests to finish and removed 3. to review Waiting for reviews labels Aug 18, 2020
@skjnldsv skjnldsv merged commit 1f1c087 into master Aug 18, 2020
@skjnldsv skjnldsv deleted the design/accessibility-highcontrast-class branch August 18, 2020 07:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
4. to release Ready to be released and/or waiting for tests to finish design Design, UI, UX, etc. enhancement feature: accessibility feature: dashboard
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants