Skip to content

Android: Disabled States does not announce or disable function for some components #30840

Closed
callstack/react-native-slider
#354
Closed
Android: Disabled States does not announce or disable function for some components#30840
callstack/react-native-slider
#354
Labels
AccessibilityAccessibility Team - EvaluatedGood first issueInterested in collaborating? Take a stab at fixing one of these issues.Platform: AndroidAndroid applications.React Native Engineering - EvaluatedResolution: LockedThis issue was locked by the bot.

Description

@amarlette
amarlette
opened on Feb 3, 2021

Description

Does not announce "disabled" on the following components:

Doesn't disable click functionality of the following components:

This behavior is usually due to there being both a "disabled" prop on the component itself, that does not necessarily sync with the accessibilityState's "disabled" field. When "disabled" is set, we should just automatically set accessibilityState: disabled as well so that they stay in sync. (You can see an example of this fix in the linked Pressable issue).

When testing a component, be sure to test both the accessibilityState and the components own disabled prop if one exists, and make sure all combinations of them work as expected. This commit has a great example of snapshot tests added to ensure the component behaves as expected.

Issue #30246 is similar to this issue and should be taken into account when creating a solution.

React Native version:

v0.63

Expected Results

When a component is "disabled", screen readers should announce this as part of their focus announcement. Clicks to these elements should also have no effect.

If a component has both a "disabled" prop and allows "accessibilityState: disabled", the "disabled" prop should be the authority on the state of the component (ignoring accessibilityState: disabled).

Snack

https://snack.expo.io/d1Ikg7nqo

Android details

To disable an element for Talkback, the AccessibilityNodeInfo's enabled property should be set to false and the clickable, longClickable, or focusable attribute should be true (one of these is likely already true if the element was clickable, it's important that it remains that way).

If an AccessibilityAction of AccessibilityNodeInfo.ACTION_CLICK, AccessibilityNodeInfo.ACTION_LONG_CLICK, or AccessibilityAction.ACTION_CONTEXT_CLICK is set on the AccessibilityNodeInfo, it should be removed.

All of the above can be achieved automatically by simply setting the enabled property of the View itself to false, but this means that the components own "disabled" prop (if one exists, such as with ), and the accessibilityState's "disabled" field, must remain in sync.

Metadata

Metadata

Assignees

No one assigned

    Labels

    AccessibilityAccessibility Team - EvaluatedGood first issueInterested in collaborating? Take a stab at fixing one of these issues.Platform: AndroidAndroid applications.React Native Engineering - EvaluatedResolution: LockedThis issue was locked by the bot.

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions

      , 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
       blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Android: Disabled States does not announce or disable function for some components · Issue #30840 · react/react-native · GitHub
      Skip to content
      Android: Disabled States does not announce or disable function for some components #30840
      Closed
      callstack/react-native-slider
      #354
      Closed
      Android: Disabled States does not announce or disable function for some components#30840
      callstack/react-native-slider
      #354
      Labels
      AccessibilityAccessibility Team - EvaluatedGood first issueInterested in collaborating? Take a stab at fixing one of these issues.Platform: AndroidAndroid applications.React Native Engineering - EvaluatedResolution: LockedThis issue was locked by the bot.
      Description
      @amarlette
      amarlette
      opened on Feb 3, 2021
      Description
      Does not announce "disabled" on the following components:
      Doesn't disable click functionality of the following components:
      This behavior is usually due to there being both a "disabled" prop on the component itself, that does not necessarily sync with the accessibilityState's "disabled" field. When "disabled" is set, we should just automatically set accessibilityState: disabled as well so that they stay in sync. (You can see an example of this fix in the linked Pressable issue).
      When testing a component, be sure to test both the accessibilityState and the components own disabled prop if one exists, and make sure all combinations of them work as expected. This commit has a great example of snapshot tests added to ensure the component behaves as expected.
      Issue #30246 is similar to this issue and should be taken into account when creating a solution.
      React Native version:
      v0.63
      Expected Results
      When a component is "disabled", screen readers should announce this as part of their focus announcement. Clicks to these elements should also have no effect.
      If a component has both a "disabled" prop and allows "accessibilityState: disabled", the "disabled" prop should be the authority on the state of the component (ignoring accessibilityState: disabled).
      Snack
      https://snack.expo.io/d1Ikg7nqo
      Android details
      To disable an element for Talkback, the AccessibilityNodeInfo's enabled property should be set to false and the clickable, longClickable, or focusable attribute should be true (one of these is likely already true if the element was clickable, it's important that it remains that way).
      If an AccessibilityAction of AccessibilityNodeInfo.ACTION_CLICK, AccessibilityNodeInfo.ACTION_LONG_CLICK, or AccessibilityAction.ACTION_CONTEXT_CLICK is set on the AccessibilityNodeInfo, it should be removed.
      All of the above can be achieved automatically by simply setting the enabled property of the View itself to false, but this means that the components own "disabled" prop (if one exists, such as with ), and the accessibilityState's "disabled" field, must remain in sync.
      Metadata
      Metadata
      Assignees
      No one assigned
        Labels
        AccessibilityAccessibility Team - EvaluatedGood first issueInterested in collaborating? Take a stab at fixing one of these issues.Platform: AndroidAndroid applications.React Native Engineering - EvaluatedResolution: LockedThis issue was locked by the bot.
        Type
        No type
        Projects
        No projects
          Milestone
          No milestone
          Relationships
          None yet
          Development
          No branches or pull requests
          Issue actions
          
, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Android: Disabled States does not announce or disable function for some components · Issue #30840 · react/react-native · GitHub
          Skip to content
          Android: Disabled States does not announce or disable function for some components #30840
          Closed
          callstack/react-native-slider
          #354
          Closed
          Android: Disabled States does not announce or disable function for some components#30840
          callstack/react-native-slider
          #354
          Labels
          AccessibilityAccessibility Team - EvaluatedGood first issueInterested in collaborating? Take a stab at fixing one of these issues.Platform: AndroidAndroid applications.React Native Engineering - EvaluatedResolution: LockedThis issue was locked by the bot.
          Description
          @amarlette
          amarlette
          opened on Feb 3, 2021
          Description
          Does not announce "disabled" on the following components:
          Doesn't disable click functionality of the following components:
          This behavior is usually due to there being both a "disabled" prop on the component itself, that does not necessarily sync with the accessibilityState's "disabled" field. When "disabled" is set, we should just automatically set accessibilityState: disabled as well so that they stay in sync. (You can see an example of this fix in the linked Pressable issue).
          When testing a component, be sure to test both the accessibilityState and the components own disabled prop if one exists, and make sure all combinations of them work as expected. This commit has a great example of snapshot tests added to ensure the component behaves as expected.
          Issue #30246 is similar to this issue and should be taken into account when creating a solution.
          React Native version:
          v0.63
          Expected Results
          When a component is "disabled", screen readers should announce this as part of their focus announcement. Clicks to these elements should also have no effect.
          If a component has both a "disabled" prop and allows "accessibilityState: disabled", the "disabled" prop should be the authority on the state of the component (ignoring accessibilityState: disabled).
          Snack
          https://snack.expo.io/d1Ikg7nqo
          Android details
          To disable an element for Talkback, the AccessibilityNodeInfo's enabled property should be set to false and the clickable, longClickable, or focusable attribute should be true (one of these is likely already true if the element was clickable, it's important that it remains that way).
          If an AccessibilityAction of AccessibilityNodeInfo.ACTION_CLICK, AccessibilityNodeInfo.ACTION_LONG_CLICK, or AccessibilityAction.ACTION_CONTEXT_CLICK is set on the AccessibilityNodeInfo, it should be removed.
          All of the above can be achieved automatically by simply setting the enabled property of the View itself to false, but this means that the components own "disabled" prop (if one exists, such as with ), and the accessibilityState's "disabled" field, must remain in sync.
          Metadata
          Metadata
          Assignees
          No one assigned
            Labels
            AccessibilityAccessibility Team - EvaluatedGood first issueInterested in collaborating? Take a stab at fixing one of these issues.Platform: AndroidAndroid applications.React Native Engineering - EvaluatedResolution: LockedThis issue was locked by the bot.
            Type
            No type
            Projects
            No projects
              Milestone
              No milestone
              Relationships
              None yet
              Development
              No branches or pull requests
              Issue actions
              
, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Android: Disabled States does not announce or disable function for some components · Issue #30840 · react/react-native · GitHub
              Skip to content
              Android: Disabled States does not announce or disable function for some components #30840
              Closed
              callstack/react-native-slider
              #354
              Closed
              Android: Disabled States does not announce or disable function for some components#30840
              callstack/react-native-slider
              #354
              Labels
              AccessibilityAccessibility Team - EvaluatedGood first issueInterested in collaborating? Take a stab at fixing one of these issues.Platform: AndroidAndroid applications.React Native Engineering - EvaluatedResolution: LockedThis issue was locked by the bot.
              Description
              @amarlette
              amarlette
              opened on Feb 3, 2021
              Description
              Does not announce "disabled" on the following components:
              Doesn't disable click functionality of the following components:
              This behavior is usually due to there being both a "disabled" prop on the component itself, that does not necessarily sync with the accessibilityState's "disabled" field. When "disabled" is set, we should just automatically set accessibilityState: disabled as well so that they stay in sync. (You can see an example of this fix in the linked Pressable issue).
              When testing a component, be sure to test both the accessibilityState and the components own disabled prop if one exists, and make sure all combinations of them work as expected. This commit has a great example of snapshot tests added to ensure the component behaves as expected.
              Issue #30246 is similar to this issue and should be taken into account when creating a solution.
              React Native version:
              v0.63
              Expected Results
              When a component is "disabled", screen readers should announce this as part of their focus announcement. Clicks to these elements should also have no effect.
              If a component has both a "disabled" prop and allows "accessibilityState: disabled", the "disabled" prop should be the authority on the state of the component (ignoring accessibilityState: disabled).
              Snack
              https://snack.expo.io/d1Ikg7nqo
              Android details
              To disable an element for Talkback, the AccessibilityNodeInfo's enabled property should be set to false and the clickable, longClickable, or focusable attribute should be true (one of these is likely already true if the element was clickable, it's important that it remains that way).
              If an AccessibilityAction of AccessibilityNodeInfo.ACTION_CLICK, AccessibilityNodeInfo.ACTION_LONG_CLICK, or AccessibilityAction.ACTION_CONTEXT_CLICK is set on the AccessibilityNodeInfo, it should be removed.
              All of the above can be achieved automatically by simply setting the enabled property of the View itself to false, but this means that the components own "disabled" prop (if one exists, such as with ), and the accessibilityState's "disabled" field, must remain in sync.
              Metadata
              Metadata
              Assignees
              No one assigned
                Labels
                AccessibilityAccessibility Team - EvaluatedGood first issueInterested in collaborating? Take a stab at fixing one of these issues.Platform: AndroidAndroid applications.React Native Engineering - EvaluatedResolution: LockedThis issue was locked by the bot.
                Type
                No type
                Projects
                No projects
                  Milestone
                  No milestone
                  Relationships
                  None yet
                  Development
                  No branches or pull requests
                  Issue actions
                  
, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
Android: Disabled States does not announce or disable function for some components · Issue #30840 · react/react-native · GitHub
                  Skip to content
                  Android: Disabled States does not announce or disable function for some components #30840
                  Closed
                  callstack/react-native-slider
                  #354
                  Closed
                  Android: Disabled States does not announce or disable function for some components#30840
                  callstack/react-native-slider
                  #354
                  Labels
                  AccessibilityAccessibility Team - EvaluatedGood first issueInterested in collaborating? Take a stab at fixing one of these issues.Platform: AndroidAndroid applications.React Native Engineering - EvaluatedResolution: LockedThis issue was locked by the bot.
                  Description
                  @amarlette
                  amarlette
                  opened on Feb 3, 2021
                  Description
                  Does not announce "disabled" on the following components:
                  Doesn't disable click functionality of the following components:
                  This behavior is usually due to there being both a "disabled" prop on the component itself, that does not necessarily sync with the accessibilityState's "disabled" field. When "disabled" is set, we should just automatically set accessibilityState: disabled as well so that they stay in sync. (You can see an example of this fix in the linked Pressable issue).
                  When testing a component, be sure to test both the accessibilityState and the components own disabled prop if one exists, and make sure all combinations of them work as expected. This commit has a great example of snapshot tests added to ensure the component behaves as expected.
                  Issue #30246 is similar to this issue and should be taken into account when creating a solution.
                  React Native version:
                  v0.63
                  Expected Results
                  When a component is "disabled", screen readers should announce this as part of their focus announcement. Clicks to these elements should also have no effect.
                  If a component has both a "disabled" prop and allows "accessibilityState: disabled", the "disabled" prop should be the authority on the state of the component (ignoring accessibilityState: disabled).
                  Snack
                  https://snack.expo.io/d1Ikg7nqo
                  Android details
                  To disable an element for Talkback, the AccessibilityNodeInfo's enabled property should be set to false and the clickable, longClickable, or focusable attribute should be true (one of these is likely already true if the element was clickable, it's important that it remains that way).
                  If an AccessibilityAction of AccessibilityNodeInfo.ACTION_CLICK, AccessibilityNodeInfo.ACTION_LONG_CLICK, or AccessibilityAction.ACTION_CONTEXT_CLICK is set on the AccessibilityNodeInfo, it should be removed.
                  All of the above can be achieved automatically by simply setting the enabled property of the View itself to false, but this means that the components own "disabled" prop (if one exists, such as with ), and the accessibilityState's "disabled" field, must remain in sync.
                  Metadata
                  Metadata
                  Assignees
                  No one assigned
                    Labels
                    AccessibilityAccessibility Team - EvaluatedGood first issueInterested in collaborating? Take a stab at fixing one of these issues.Platform: AndroidAndroid applications.React Native Engineering - EvaluatedResolution: LockedThis issue was locked by the bot.
                    Type
                    No type
                    Projects
                    No projects
                      Milestone
                      No milestone
                      Relationships
                      None yet
                      Development
                      No branches or pull requests
                      Issue actions
                      
, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Android: Disabled States does not announce or disable function for some components · Issue #30840 · react/react-native · GitHub
                      Skip to content
                      Android: Disabled States does not announce or disable function for some components #30840
                      Closed
                      callstack/react-native-slider
                      #354
                      Closed
                      Android: Disabled States does not announce or disable function for some components#30840
                      callstack/react-native-slider
                      #354
                      Labels
                      AccessibilityAccessibility Team - EvaluatedGood first issueInterested in collaborating? Take a stab at fixing one of these issues.Platform: AndroidAndroid applications.React Native Engineering - EvaluatedResolution: LockedThis issue was locked by the bot.
                      Description
                      @amarlette
                      amarlette
                      opened on Feb 3, 2021
                      Description
                      Does not announce "disabled" on the following components:
                      Doesn't disable click functionality of the following components:
                      This behavior is usually due to there being both a "disabled" prop on the component itself, that does not necessarily sync with the accessibilityState's "disabled" field. When "disabled" is set, we should just automatically set accessibilityState: disabled as well so that they stay in sync. (You can see an example of this fix in the linked Pressable issue).
                      When testing a component, be sure to test both the accessibilityState and the components own disabled prop if one exists, and make sure all combinations of them work as expected. This commit has a great example of snapshot tests added to ensure the component behaves as expected.
                      Issue #30246 is similar to this issue and should be taken into account when creating a solution.
                      React Native version:
                      v0.63
                      Expected Results
                      When a component is "disabled", screen readers should announce this as part of their focus announcement. Clicks to these elements should also have no effect.
                      If a component has both a "disabled" prop and allows "accessibilityState: disabled", the "disabled" prop should be the authority on the state of the component (ignoring accessibilityState: disabled).
                      Snack
                      https://snack.expo.io/d1Ikg7nqo
                      Android details
                      To disable an element for Talkback, the AccessibilityNodeInfo's enabled property should be set to false and the clickable, longClickable, or focusable attribute should be true (one of these is likely already true if the element was clickable, it's important that it remains that way).
                      If an AccessibilityAction of AccessibilityNodeInfo.ACTION_CLICK, AccessibilityNodeInfo.ACTION_LONG_CLICK, or AccessibilityAction.ACTION_CONTEXT_CLICK is set on the AccessibilityNodeInfo, it should be removed.
                      All of the above can be achieved automatically by simply setting the enabled property of the View itself to false, but this means that the components own "disabled" prop (if one exists, such as with ), and the accessibilityState's "disabled" field, must remain in sync.
                      Metadata
                      Metadata
                      Assignees
                      No one assigned
                        Labels
                        AccessibilityAccessibility Team - EvaluatedGood first issueInterested in collaborating? Take a stab at fixing one of these issues.Platform: AndroidAndroid applications.React Native Engineering - EvaluatedResolution: LockedThis issue was locked by the bot.
                        Type
                        No type
                        Projects
                        No projects
                          Milestone
                          No milestone
                          Relationships
                          None yet
                          Development
                          No branches or pull requests
                          Issue actions
                          
, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Android: Disabled States does not announce or disable function for some components · Issue #30840 · react/react-native · GitHub
                          Skip to content
                          Android: Disabled States does not announce or disable function for some components #30840
                          Closed
                          callstack/react-native-slider
                          #354
                          Closed
                          Android: Disabled States does not announce or disable function for some components#30840
                          callstack/react-native-slider
                          #354
                          Labels
                          AccessibilityAccessibility Team - EvaluatedGood first issueInterested in collaborating? Take a stab at fixing one of these issues.Platform: AndroidAndroid applications.React Native Engineering - EvaluatedResolution: LockedThis issue was locked by the bot.
                          Description
                          @amarlette
                          amarlette
                          opened on Feb 3, 2021
                          Description
                          Does not announce "disabled" on the following components:
                          Doesn't disable click functionality of the following components:
                          This behavior is usually due to there being both a "disabled" prop on the component itself, that does not necessarily sync with the accessibilityState's "disabled" field. When "disabled" is set, we should just automatically set accessibilityState: disabled as well so that they stay in sync. (You can see an example of this fix in the linked Pressable issue).
                          When testing a component, be sure to test both the accessibilityState and the components own disabled prop if one exists, and make sure all combinations of them work as expected. This commit has a great example of snapshot tests added to ensure the component behaves as expected.
                          Issue #30246 is similar to this issue and should be taken into account when creating a solution.
                          React Native version:
                          v0.63
                          Expected Results
                          When a component is "disabled", screen readers should announce this as part of their focus announcement. Clicks to these elements should also have no effect.
                          If a component has both a "disabled" prop and allows "accessibilityState: disabled", the "disabled" prop should be the authority on the state of the component (ignoring accessibilityState: disabled).
                          Snack
                          https://snack.expo.io/d1Ikg7nqo
                          Android details
                          To disable an element for Talkback, the AccessibilityNodeInfo's enabled property should be set to false and the clickable, longClickable, or focusable attribute should be true (one of these is likely already true if the element was clickable, it's important that it remains that way).
                          If an AccessibilityAction of AccessibilityNodeInfo.ACTION_CLICK, AccessibilityNodeInfo.ACTION_LONG_CLICK, or AccessibilityAction.ACTION_CONTEXT_CLICK is set on the AccessibilityNodeInfo, it should be removed.
                          All of the above can be achieved automatically by simply setting the enabled property of the View itself to false, but this means that the components own "disabled" prop (if one exists, such as with ), and the accessibilityState's "disabled" field, must remain in sync.
                          Metadata
                          Metadata
                          Assignees
                          No one assigned
                            Labels
                            AccessibilityAccessibility Team - EvaluatedGood first issueInterested in collaborating? Take a stab at fixing one of these issues.Platform: AndroidAndroid applications.React Native Engineering - EvaluatedResolution: LockedThis issue was locked by the bot.
                            Type
                            No type
                            Projects
                            No projects
                              Milestone
                              No milestone
                              Relationships
                              None yet
                              Development
                              No branches or pull requests
                              Issue actions
                              
, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
Android: Disabled States does not announce or disable function for some components · Issue #30840 · react/react-native · GitHub
                              Skip to content
                              Android: Disabled States does not announce or disable function for some components #30840
                              Closed
                              callstack/react-native-slider
                              #354
                              Closed
                              Android: Disabled States does not announce or disable function for some components#30840
                              callstack/react-native-slider
                              #354
                              Labels
                              AccessibilityAccessibility Team - EvaluatedGood first issueInterested in collaborating? Take a stab at fixing one of these issues.Platform: AndroidAndroid applications.React Native Engineering - EvaluatedResolution: LockedThis issue was locked by the bot.
                              Description
                              @amarlette
                              amarlette
                              opened on Feb 3, 2021
                              Description
                              Does not announce "disabled" on the following components:
                              Doesn't disable click functionality of the following components:
                              This behavior is usually due to there being both a "disabled" prop on the component itself, that does not necessarily sync with the accessibilityState's "disabled" field. When "disabled" is set, we should just automatically set accessibilityState: disabled as well so that they stay in sync. (You can see an example of this fix in the linked Pressable issue).
                              When testing a component, be sure to test both the accessibilityState and the components own disabled prop if one exists, and make sure all combinations of them work as expected. This commit has a great example of snapshot tests added to ensure the component behaves as expected.
                              Issue #30246 is similar to this issue and should be taken into account when creating a solution.
                              React Native version:
                              v0.63
                              Expected Results
                              When a component is "disabled", screen readers should announce this as part of their focus announcement. Clicks to these elements should also have no effect.
                              If a component has both a "disabled" prop and allows "accessibilityState: disabled", the "disabled" prop should be the authority on the state of the component (ignoring accessibilityState: disabled).
                              Snack
                              https://snack.expo.io/d1Ikg7nqo
                              Android details
                              To disable an element for Talkback, the AccessibilityNodeInfo's enabled property should be set to false and the clickable, longClickable, or focusable attribute should be true (one of these is likely already true if the element was clickable, it's important that it remains that way).
                              If an AccessibilityAction of AccessibilityNodeInfo.ACTION_CLICK, AccessibilityNodeInfo.ACTION_LONG_CLICK, or AccessibilityAction.ACTION_CONTEXT_CLICK is set on the AccessibilityNodeInfo, it should be removed.
                              All of the above can be achieved automatically by simply setting the enabled property of the View itself to false, but this means that the components own "disabled" prop (if one exists, such as with ), and the accessibilityState's "disabled" field, must remain in sync.
                              Metadata
                              Metadata
                              Assignees
                              No one assigned
                                Labels
                                AccessibilityAccessibility Team - EvaluatedGood first issueInterested in collaborating? Take a stab at fixing one of these issues.Platform: AndroidAndroid applications.React Native Engineering - EvaluatedResolution: LockedThis issue was locked by the bot.
                                Type
                                No type
                                Projects
                                No projects
                                  Milestone
                                  No milestone
                                  Relationships
                                  None yet
                                  Development
                                  No branches or pull requests
                                  Issue actions